Code Monkey home page Code Monkey logo

react-nodejs-mongodb-crud's Introduction

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

react-nodejs-mongodb-crud's People

Contributors

dependabot[bot] avatar jeffersonribeiro avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.