Giter VIP home page Giter VIP logo

adelpro / mern-auth-roles-boilerplate Goto Github PK

View Code? Open in Web Editor NEW
20.0 1.0 8.0 19.67 MB

MERN-auth-roles a web application that allows you to manage the authentication and roles of users using MERN (MongoDB Express React Node)

Home Page: https://mern-auth-roles.onrender.com

License: MIT License

JavaScript 93.19% HTML 2.65% CSS 4.16%
authentication mern react reactjs roles cookie hookform jwt nodejs recoil token yup

mern-auth-roles-boilerplate's Introduction

MERN-auth-roles

Codacy Badge

Live website

https://mern-auth-roles.onrender.com

About

MERN-auth-roles a full-stack MERN (MongoDB Express React Node) boilerplate starter application with React, Recoil, authentication, roles, JWT, protected api MERN-auth-roles

We have two parts in the application

MERN-AUTH-ROLES-Backend (sever)

Futures

✓ User with roles (Admin, Manager, user)

✓ NodeJS server

✓ Token and refresh token

✓ async/await syntax

✓ Server side validation

✓ .env file configuration

✓ Profile image upload with Multer (delete old image and replace it with the new image),

✓ Cross-origin resource sharing (CORS)

✓ Limit repeated requests such as password reset.

✓ Cookies

✓ Password Hashing

✓ Real-time notifications using Socket.io

run this command

  cd backend
  npm install
  npm run dev

MERN-AUTH-ROLES-Frontend (client)

Futures

✓ React DevTools desabled in production

✓ Axios with Interceptors to manage fetchs

✓ Token persist only in memory and cookies

✓ Refresh Token (in memory) and access token (in cookies)

✓ Hookform: to manage form inputs

✓ YUP: to validate inputs

✓ react-multi-select-component

✓ Recoil and Recoil-persist: to manage states

✓ react-icons and @uiball/loaders to give a nice look to the UI

✓ Protected routes with Higher order components

✓ Layout component, it will be very easy to navigation and footer

✓ Profile image upload

✓ Real-time notifications using Socket.io client

Run the code

you can run the code by executing this command

cd frontend
npm install
npm start

Screenshots

Home page

MERN-auth-roles

Dash

MERN-auth-roles

Users

MERN-auth-roles MERN-auth-roles

Notes

MERN-auth-roles

MERN-auth-roles

Notifications

MERN-auth-roles

Youtube Video demonstration

Contact us 📨

twitter facebook github medium

Support me ❤️

Ko-fi Buymeacoffee PayPal BitCoin

Thank you

Stargazers repo roster for @adelpro/MERN-auth-roles-boilerplate

Forkers repo roster for @adelpro/MERN-auth-roles-boilerplate

mern-auth-roles-boilerplate's People

Contributors

adelpro avatar dependabot[bot] avatar josephdev123 avatar

Stargazers

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

Watchers

 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.