lucianovilasboas / 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.

💻 Projeto

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.

🚀 Tecnologias

Esse projeto foi desenvolvido com as seguintes tecnologias:

• Node.js
• React
• React Native
• Expo

🎨 Layout

🎨 Aircnc - Web

🚀 Aircnc - Ambiente em desenvolvimento

Conhecendo a Omnistack 9.0

• 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

Criando a base da aplicação

• construir o back-end da sua aplicação
• api rest: um backend separado do frontend
• yarn add express ou npm 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

Construindo a interface web

• 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()

Desenvolvendo o app mobile

• 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

Funcionalidades avançadas

• 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

🤔 Como contribuir

• 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.

📝 Licença

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