O Aircnc é um projeto que visa conectar empresas que querem abrir spots e desenvolvedores que procuram um lugar para trocar ideias com devs, conhecer a empresa e trabalhar lá por um período.
Compartilhar espaços de empresas para programadores externos conhecerem ou até mesmo, trabalharem. Promover esses espaços de forma gratuita ou alugada.
Um módulo para a empresa cadastrar seus espaços. E o outro módulo para quem está interessado em usar esse espaço.
Esse projeto foi desenvolvido com as seguintes tecnologias:
🎨 Aircnc - Web
🚀 Aircnc - Ambiente em desenvolvimento
- Aplicação que será desenvolvida
- Tecnologias utilizadas
- Configuração de Ambiente
- Npm[6.14.6], Node[14.16.1], Yarn[1.22.10]
- VSCode, Drácula Oficial, Material Icon Theme, Rocketseat Reactjs, Fira Code
- Expo
- construir o back-end da sua aplicação
- api rest: um backend separado do frontend
-
yarn add express
ounpm add express
- localhost:3333 : rotas -
npm install nodemon -D
- reiniciar servidor node a cada alteração : error -
yarn dev
- rodar aplicação com o nodemon -npm run dev
: error - mongoose :
yarn add mongoose
: editar o mongoDB - Partner - MVC : estrutura de pastas
- Testar requisições Http: get, post, put, delete no insominia
- Parâmetros - req.query: acessar query params para filtros
- Parâmetros - req.params: acessar route params para edição e deleção
- Parâmetros - req.body: acessar o corpo da requisição para criação e edição
- banco de dados: mongoDB atlas cloud
- Multer: armazenar arquivos:
npm install multer
- criar o projeto:
yarn create react-app frontend
- rodar a aplicação frontend:
yarn run start
- iniciar projeto:
npm start
- Estrutura App.js e Estilização App.css
- Primeira tela
- Chamadas API: axios ou fetch
- Fundamentos: componentização e estado
- Configurar o cors no backend:
npm install cors
- comunicação com a api
- salvando informações no localstorage
- instalar e configurar sistema de rotas:
npm install react-router-dom
- instalar e configurar sistema de arquivo: useMemo
- mudado de history.push() para navigate()
- Instalar expo:
npm install -g expo-cli
- Criar projeto com expo:
expo init mobile --template blank
- Navegação:
yarn add react-navigation
- Animações Navegação:
expo install react-native-gesture-handler react-native-reanimated
- Estilização da page Login
- axios - conectar a aplicação com o api:
yarn add axios
- services/api - baseURL: 'http://192.168.0.31:3333'. Esse ip pode mudar.
- configurar axios na função handleSubmit
- AsyncStorage agora é
@react-native-async-storage/async-storage
- Sincronizar realtime o front mobile e o front web com a lib socket.io.
- socket.io no backend:
yarn add socket.io
- socket.io no frontend:
yarn add socket.io-client
- socket.io: comunicação ponta a ponta
- socket.io: identificar qual é o usuário que está fazendo a conexão.
- notificação do real time de adição de spot.
- estilização da notificação
- socket.io: configuração dentro do backend
- socket.io: configuração dentro do frontend
- socket.io: configuração dentro do mobile
- #omnistacknextlevel
- Faça um fork desse repositório;
- Cria uma branch com a sua feature:
git checkout -b minha-feature
; - Faça commit das suas alterações:
git commit -m 'feat: Minha nova feature'
; - Faça push para a sua branch:
git push origin minha-feature
.
Depois que o merge da sua pull request for feito, você pode deletar a sua branch.
Esse projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.
:. Feito com ♥ by Douglas A B Novato 👋
Fonte do Projeto: Diego Fernandes - Rocketseat na Semana Omnistack 9.0