Projeto | Tecnologias | Executar Aplicação | Licença
Esta aplicação chama-se devFreela, consiste em um sistema para encontrar um programador freelancer mais proximo de você.
Cada cidade no Brasil, possui um código IBGE diferente, e para encontrar o freelancer mais próximo o sistema é integrado ao webservice do ViaCEP,
para realizar consultas de CEP e assim pelo código IBGE do CEP pesquisado, o sistema busca no banco de dados os freelancers que possuem o mesmo código IBGE e mostra ao usuário.
O banckend (API) foi desenvolvido em PHP, utilizando o framework Laravel 8, também foi desenvolvido a validação no preenchimento do formulário.
O frontend foi desenvolvido em React.js e Next.js. 💜
O mobile foi desenvolvido em React Native e Expo, foi usado Location nativo do Expo para solicitar permissão ao usuario pegar suas coordenadas de geolocalização e realizar a busca dos freelancers de forma automatica.
As pessoas nas imagens usadas no sistema não existem, foram retiradas do site!
- Criando o projeto
npx create-next-app devfreela
- Criado arquivo de configuração do TypeScript
tsconfig.json - Instalado TypeScript e tipagem do React
npm i typescript @types/react
- Instalado as dependências
npm i @material-ui/core@next @emotion/react @emotion/styled axios react-input-mask
- Criando o projeto
composer create-project laravel/laravel devfreela
- Criado arquivo de controller DevfreelaController
php artisan make:controller DevfreelaController
- Executado as migrações no banco de dados
php artisan migrate
- Criado novas migração para a tabela devfreela no banco de dados
php artisan make:migration create_devfreelas_table
- Criado modelo Devfreela
php artisan make:model Devfreela
- Instalado a dependência para usar o Laravel HTTP Client
composer require guzzlehttp/guzzle
- Criar link simbólico para o Storage. Dentro da pasta public da aplicação execute no Windows usando prompt em modo administrador:
mklink /D public ..\storage\app\public`
- Instalado o pacote de tradução para pt_BR
composer require lucascudo/laravel-pt-br-localization --dev
php artisan vendor:publish --tag=laravel-pt-br-localization
- Instalado o pacote de mascaras no projeto
composer require clemdesign/php-mask
- Instalando o Expo Global
npm i -g expo-cli
- Criando o projeto mobile
expo init NomeProjeto
- Selecionado opção de desenvolvimento
blank ( TypeScript )
- Em caso de erro no Windows, executar:
set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass
- Instalando dependências
npm i @emotion/react @emotion/native axios @react-native-navigation/native react-native-masked-text react-native-paper
- Instalando dependências do React Navigation
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view @react-navigation/stack
- Instalado o pacote de localização do Expo
expo install expo-location
Tela inicial do sistema.
Retornando os dados da API.
Tela administrativa do sistema.
Esse projeto foi desenvolvido com as seguintes tecnologias:
- Node.js
- Laravel 8
- React.js
- SQLite
- Styled Components
- Axios
- Next.js
- TypeScripts
- Material-ui
- Composer
- Guzzle, PHP HTTP Client
- Expo
- React Native
- React Native Paper
Caso você deseja executar o projeto na sua máquina local, você terá que instalar o Node.js, PHP, Composer.
Após instalar, basta seguir os passos abaixo:
Para começar, você deve simplesmente clonar o repositório do projeto na sua máquina e instalar as dependências.
Abre o cmd (caso esteja utilizando o Windows) navegue até o local onde você clonou o projeto
cd "C:\Users\NomeDoComputador\Documents\clonedoprojeto"
Depois, quando estiver na pasta do projeto devFreela, dentro dela terá três pasta uma com o frontend, outra com o backend, e por último a mobile.
Você precisará executar 3 passos:
1 - PASSO
Acessar o projeto frontend na pasta frontend digitar no cmd a seguinte instrução: (dentro da pasta frontend do projeto clonado)
> npm install
Ao digitar a instrução acima, automaticamente ele irá baixar todas as dependências listadas e definidas no arquivo package.json:
node_modules- que contêm os packages do npm que precisará para o projeto.
Bom, agora (dentro da pasta frontend do projeto clonado) abra um terminal para o projeto ser executado e digite:
npm run dev
Pronto! dessa forma o projeto frontend estará rodando localmente em sua maquina, acesse:
http://localhost:3000
2 - PASSO
Abra outro terminal e acesse o projeto backend na pasta backend digitar no cmd a seguinte instrução: (dentro da pasta backend do projeto clonado)
>
Ao digitar a instrução acima, automaticamente ele irá baixar todas as dependências listadas e definidas no arquivo package.json e em composer.json:
node_modulesevendor- que contêm os packages do npm e composer que precisará para o projeto.
Bom, agora (dentro da pasta backend do projeto clonado) abra um terminal para o projeto ser executado e digite:
php artisan serve
Pronto! dessa forma o projeto backend estará rodando localmente em sua maquina, acesse:
http://127.0.0.1:8000/
3 - PASSO
Abra outro terminal e acesse o projeto mobile na pasta mobile digitar no cmd a seguinte instrução: (dentro da pasta mobile do projeto clonado)
npm install
Ao digitar a instrução acima, automaticamente ele irá baixar todas as dependências listadas e definidas no arquivo package.json:
node_modules- que contêm os packages do que precisará para o projeto.
Bom, agora (dentro da pasta mobile do projeto clonado) abra um terminal para o projeto ser executado e digite:
npm start
Pronto! dessa forma o projeto mobile estará rodando localmente em sua maquina, acesse:
http://localhost:19002/
Caso tenham dúvidas sobre o código do projeto, sintam-se a vontade em abrir uma ISSUE AQUI. Assim que possível, estarei respondendo a todas as dúvidas que tiverem!
Esse projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.
Feito com ♥ by
-
Projeto desenvolvido durante o Workshop Multi-Stack 02.
-
Agradecimento a Akira Hanashiro por compartilhar conteúdo relevante e com qualidade de ensino.