Tecnologias | Projeto | Layout | Como contribuir | Licença
Construir o app inspirado no waze para localizar desenvolvedores na sua região.
O Dev Radar é uma que segue alguns parâmetros para localizar desenvolvedores e assim conectar profissionais as demandas conforme os projetos. 💰
Esse projeto foi desenvolvido com as seguintes tecnologias:
- HTML/CSS/Javascript
- ReactJS
- React Native
- Nodejs
- MongoDB
- Git/Github
- Yarn/Npm
- VSCode
- Git Bash
- Insomnia
- MongoDB Atlas
- MongoDB Compass
Você pode visualizar o layout do projeto através desse link. É necessário ter conta no Figma para acessá-lo.
- nodejs
- chocolatey
- npm
- yarn
- vscode
- extensões vscode: drácula e material icon theme
- backend com Nodejs
- regras de negócio
- conexão com banco de dados
- envio de e-mail
- comunicação com webservices
- autenticação do usuário
- criptografia e segurança
- Json a estrutura de dados para interligar o backend com o frontend
-
yarn init -y: na pasta C:\douglasabnovato\rocketseat\omnistack-10\backend -
package.json: arquivo de configuração -
yarn add express: auxilia na criação de rotas -
node index.js: executa nosso servidor -
npm init -y: vou usar npm -
npm install nodemon - D: restartar o servidor - Ferramenta Insomnia: configurar rest
- Listar Usuários - GET: criar nova requisição
- Métodos HTTP: get, post, put, delete
- Tipos de parâmetros: query params (request.query: filtros, ordenação, paginação, ...),
- Tipos de parâmetros: route params (request.params: identificar um recurso na alteração ou remoção)
- Tipos de parâmetros: body (dados para a criação ou alteração de um registro)
- conectar com o bd - mongodb - não relacional - hospedagem na núvem com mongodb atlas
- Instalar o Mongoose:
npm install mongoose - Arquivos de rotas:
routes.js - Biblioteca axios faz chamadas para outras API:
npm install axios - MongoDB Compass: SGBD que permite visualizar o bd
- DevController: index, show, store, update, destroy
- SearchController
- Iniciar o projeto backend:
npm run dev
- Introdução do cenário de desenvolvimento: abordagem com framework e abordagem com js, html, css
- Criar projeto:
npx create-react-app web - Iniciar o projeto frontend web:
npm start - Criado a estrutura dos elementos no App
- Estilização do global.css
- Estilização do Sidebar.css
- Estilização do Main.css
- Aplicar responsividade: quando aplicar, como aplicar
- Função de Geolocalização
- Instalação e configuração de extensão no backend:
cors. Objetivo de permitir acessar o backend - Axios:
npm install axios - map para exibir a lista de devs
- refatoração e estrutura de pastas
- warning: não está adicionando dev: revisar o web: key no li para montar no frontend.
- warning: não está adicionando dev: revisar o backend: e.preventDefault escrito errada.
- Aplicação será construída com react native com expo
- Instalar expo:
npm install -g expo-cli - Criar o módulo:
expo init mobile --template blank - Iniciar o projeto mobile:
npm start -
localhost:19002e o abrir o qr com o app expo instalado. - alterando a versão do node para corrigir o warning
- warnings e errors: docs!
- docs expo
- MapsView:
expo install react-native-maps - location:
expo install expo-location - WebView:
expo install react-native-webview
- no backend: Adicionar dependência da socket.io:
npm install socket.io - no backend: Configuração do socket.io
- no mobile: Adicionar dependência da socketio:
npm install socket.io-client - no mobile: Configuração do socket.io na página main, na função loadDevs
Esse projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.
Feito com ♥ by douglasabnovato! 👋
Fonte do projeto: Diego Fernandes - Rocketseat - Semana Omnistack 10.0 - dev radar