Skip to content

👨‍💻 Fullstack web app built with MongoDB, NodeJs, React and Redux. Features: Protected routes client/server side, MaterialUI layout

License

Notifications You must be signed in to change notification settings

jeffersonRibeiro/react-nodejs-mongodb-crud

Repository files navigation

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