/BeTheHero

RepositĆ³rio criado com o projeto da Semana Omnistack 11.0 da RocketSeat šŸš€

Primary LanguageJavaScriptMIT LicenseMIT

Be the hero

A platform to help ONGs raise funds to solve cases

Made by William Jesus Language count License


BeTheHero

Esse projeto foi desenvolvido durante a Semana Omnistack 11.0 da Rocketseat que durou de 23/03 a 28/03/2020. O projeto serĆ” frequentemente atualizado com novas features para fixaĆ§Ć£o de conteĆŗdo e upgrade das minhas skills.

InstalaĆ§Ć£o

Para instalar as dependĆŖncias e executar o Servidor (modo desenvolvimento), clone o projeto em seu computador efetue uma cĆ³pia do arquivo .env.example e renomeie como .env no backend, faƧa as alteraƧƵes necessĆ”rias e em seguida execute (Ć  partir do root do projeto):

cd backend
yarn install
yarn dev

Para iniciar o Frontend do React utilize o comando (Ć  partir do root do projeto):

cd frontend
yarn install
yarn dev

Ɖ possivel ainda na raiz do projeto iniciar os seguintes comandos:

FunĆ§Ć£o Description
yarn install:yarn Instalar as dependencias de todos os projetos.
npm install:npm Instalar as dependencias de todos os projetos.
yarn start Iniciar os projetos em modo de desenvolvimento.

Assim que o processo terminar, automaticamente serƔ aberta no seu navegador a pƔgina localhost:3000 contendo o Projeto desenvolvido atƩ agora (Dia 5 de 5).

Backend

Veja mais em backend/README.md para informaƧƵes sobre o servidor e sua arquitetura.

Imnsonia

Para testar a API do BeTheHero, baixe e instale o Insomnia e em seguida clique na Workspace ā†’ Import/Export ā†’ Import Data ā†’ From File ā†’ e selecione o arquivo Insomnia.json. Assim que terminar, o resultado ficarĆ” assim:

Run in Insomnia

Frontend

Veja o projeto rodando em https://williamjesusdev.github.io/BeTheHero ou em frontend/README.md para informaƧƵes sobre client Web e os padrƵes.

Light Theme



Dark Theme


Mobile

Veja mais em mobile/README.md para informaƧƵes sobre client Mobile e os padrƵes.

Telas

Light Theme <---------- ----------> Dark Theme


Abra o projeto mobile utilizando Expo


Snapshots

Veja tambƩm as capturas te tela de todos os projetos.

CRONOGRAMA

  • Aula 01 - 23/03

    • bate-papo sobre a stack Node | React | React Native
    • informaƧƵes sobre o projeto BeTheHero
    • configuraĆ§Ć£o do ambiente de desenvolvimento e dicas

  • Aula 02 - 24/03

    • inicio do projeto backend - Node
    • configuraĆ§Ć£o do servidors utilizando express
    • configuraĆ§Ć£o do banco de dados sqlite com knex
    • configuraĆ§Ć£o de rotas de requisiĆ§Ć£o Http - Requests
    • configuraĆ§Ć£o de migrations e controllers
    • testes de requisiƧƵes atravĆ©s do Insomnia.REST
    • adiĆ§Ć£o da biblioteca cors no backend possibilitando acesso via frontend

  • Aula 03 - 25/03

    • inicio do projeto frontend - React
    • criaĆ§Ć£o do projeto com yarn create-react-app
    • configuraĆ§Ć£o de rotas de acesso com react-router-dom
    • criaĆ§Ć£o das pages Logon e Register Components
    • adiĆ§Ć£o da biblioteca axios e configuraĆ§Ć£o do services/api.js para requisiƧƵes ao backend

  • Aula 04 - 26/03

    • inicio do projeto mobile - React Native
    • adiĆ§Ć£o global da expo-cli com yarn global add expo-cli
    • criaĆ§Ć£o do projeto com expo init mobile, cd mobile e expo start
    • configuraĆ§Ć£o de rotas de acesso com react-navigation
    • criaĆ§Ć£o das pĆ”ginas Incidents e Detail Components
    • criaĆ§Ć£o do Scroll Infinito Flatlist
    • adiĆ§Ć£o da biblioteca axios e configuraĆ§Ć£o do services/api.js

  • Aula 05 - 27/03

    • inclusĆ£o de ValidaĆ§Ć£o celebrate backend
    • inclusĆ£o de Testes jest e supertest backend
    • bate-papo sobre Deploy, PadrƵes de CĆ³digo eslint e prettier
    • bate-papo sobre Styled Components e AutenticaĆ§Ć£o jwt
    • finalizaĆ§Ć£o do projeto e bate-papo
FEATURES - EXTRAS

  • feature 01

    • adiĆ§Ć£o e configuraĆ§Ć£o das bibliotecas eslint, prettier, sucrase e dotenv no backend possibilitando uma melhora produtividade.

  • feature 02

    • adiĆ§Ć£o e configuraĆ§Ć£o da biblioteca styled-components no frontend permitindo estilizaĆ§Ć£o perfeita e sem quebras nos componentes.

  • feature 03

    • adiĆ§Ć£o e configuraĆ§Ć£o do tema dark utilizando ThemeProvider do styled-components no frontend.

  • feature 04

    • disponibilizaĆ§Ć£o da api(backend) no heroku e do web(frontend) no github.

  • feature 05

    • Dark Theme no mobile com auteraĆ§Ć£o automatica definida pela configuraĆ§Ć£o do dispositivo.

  • feature 06

    • disponibilizaĆ§Ć£o da mobile(mobile) no exp.host.

PROJETO FINALIZADO | 29/03/2020

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests.

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

Criado com ā™„ļø por William šŸ‘‹