Be The Hero - Semana OmniStack 11
Projeto desenvolvido na semana OmniStack 11 da Rocketseat dias 23/03/2020 à 27/03/2020.
Com as aulas online do Diego Fernandes.
O projeto ensinado encontra-se Semana OmniStack 11
Projeto
Criar uma plataforma web/mobile utilizando React e React-native para frontend da web e mobile respectivamente e utilizar Express para o backend.
Meu projeto está bem modificado do que foi dado durante a aula, caso queira ver o projeto como foi idealizado e ensinado veja o github da Rocketseat acima
Tecnologias utilizadas
git, node, express, knex, sqlite, reactjs, react-native, expo, vuejs
Instalação
Clone o repositório, utilizando git clone ou faça o download do repositório.
aviso que o arquivo de gravação de tela do emulador que esta na pasta vídeo possui 25mb
Após clonar ou baixar o repositório instale as dependências necessárias:
Utilize o npm para instalar as dependências nas pastas backend, react-frontend, vue-frontend, mobile.
npm install
Após instalar as dependências você precisa rodar o comando do knex no backend para criar o banco de dados SQLite e rodar as migrações.
npx knex migrate:latest
Após a geração do banco de dados e das migrações você poderá rodar o backend, react-frontend, vue-frontend e mobile utilizando...
Para o backend e react-frontend:
npm start
Para o vue-frontend:
npm run serve
Para o mobile
expo start
Para visualização da aplicação mobile utilize o celular com o aplicativo Expo ou emulador Android/iOS.
Mudanças
Mudanças feitas no projeto idealizado da aula para aprendizado, preferências pessoais e teste de tecnologias:
Backend - Express
- Banco de dados mantive o campo id do SQL intacto e adicionei um campo key para ser usado como identificado das ONGs
- Adicionei os testes ao backend (atualizado com teste jwt)
- Adicionei a pasta http com REST requests para rodar no vscode usando o pacote Rest Client caso não queira utilizar insomnia ou postman
ReactJS - Frontend
- Adicionei uma janela de confirmação de cadastro de nova ONG no frontend.
RegisterSuccess
- Adicionado paginação no perfil da ONG frontend.
- Adicionado página de edição de ONG
Account
- Adicionado botão de apagar conta na página de edição da ONG
- Adicionado alertas de confirmação de conta atualizada na página de perfil e de conta apagada na página inicial
- Adicionado página para atualizar caso
EditIncident
- Removi o campo KEY da tabela ongs
- Adicionei os timestamps created_at e updated_at às tabelas ongs e incidents
- Adicionado autenticação com JWT
- Adicionado envio de e-mail após o cadastro
- Armazenamento do token JWT utilizando cookie httpOnly
- Adicionei dois select input na página de registro para seleção de estados e cidades
- (em breve) adicionar Redux para lidar com as states
React Native - Mobile
- Adicionei a exibição da cidade e do estado nos detalhes do caso.
- Adicionei funções de refresh do FlatList no mobile para exibir o carregamento de novos casos:
onRefresh={loadIncidents}
refreshing={loading}
- Se não tiver nenhum caso para exibir fará requisição para listar casos a cada 30 segundos
- Arrumei a disposição das informações conforme está no Figma
VueJS - Frontend
- Adicionei um frontend feito em VueJS
- Utilizando Vuex para armazenamento de states e variaveis que eram armazenadas manualmente no localStorage
- Adicionei dois select input na página de registro para seleção de estados e cidades
Autor
Lucas Nunes
- soulucas.com.br
- Github
- Discord - Chizuko#0959
License
This project is licensed under the MIT License