Awesome Open Source
Awesome Open Source

Aplicação fullstack utilizando MongoDB, NodeJs, React e Redux


Backend features

O banco de dados Mongo foi hospedado no MLab por conveniência. Foi implementado gravatar para foto de perfil, se o email do usuário tiver um avatar no wordpress ela automaticamente é salva no banco. Rotas sensíveis foram protegidas por meio de JWT em conjunto com passport.

Usando

  • Nodejs
    • Express
    • Nodemon - Para restartar o server sempre que houver uma alteração
    • Passport - Para proteger rotas privadas
    • Jwt - Para proteger rotas privadas
    • Bcrypt - Para Cryptografar as senhas de usuários antes de salvar no banco
  • MongoDB
    • Mongoose

Frontend features

Foi usado React em conjunto com Redux e React-router para construir a SPA. Rotas protegidas redirecionam para a home e só são acessíveis por meio de auth. Localstorage foi utilizado para persistir o state de usuário no recarregamento das páginas.

Usando

  • React
    • Redux - Para gerenciar o state da aplicação
    • asyncRoutes - As rotas carregam em chunks, dessa forma evita da aplicação ficar pesada num primeiro carregamento
  • Axios - Para fazer as requisições HTTP
  • Local storage nativo - Para persistir o state e o auth nas rotas privadas
  • MaterialUI components

Como iniciar a aplicação

Requerimentos

  • Node.js
  • NPM

Instalando os pacotes

Execute o comando abaixo para instalar as dependências:

npm install

Iniciando o servidor

Execute o comando abaixo para iniciar o Nodejs e conectar ao banco de dados MongoDB:

npm run server

Aguarde a execução e a API estará rodando na Url http://localhost:8001/api/

Os endpoints disponíveis são:

  • Post - Login more
  • Post - Register more
  • Put - Update Profile more
  • Del - Delete Account more
  • Get - List Users more

A documentação completa pode ser encontrada no Postman

Deixe o servidor rodando em um terminal, abra outro e siga para o próximo passo:

Iniciando a SPA React

Para isso basta executar o comando abaixo, e pronto! :D

npm start

A aplicação irá iniciar automaticamente no browser na Url http://localhost:3000


Copyright and license

The MIT License (MIT). Please see License File for more information.



A little project by Jefferson Ribeiro


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,533,979
Reactjs (75,409
Nodejs (55,217
Mongodb (14,612
Redux (13,299
Express (11,567
Mongoose (4,241
Material Ui (3,620
Restful Api (2,568
Spa (1,585
Jwt Authentication (1,511
Localstorage (998
Code Splitting (242
Related Projects