Live - Full Stack Mern Auth App using Tailwind CSS
Watch a video showcasing the project in action :
# Project Demo Timestamp/Flow:
(0:05) Project Main Page -> Check About Page -> Sign Up (Create Account) -> Successful Signup Leads to Sign In Page -> Check Created Account in Signup in MongoDB -> Also Check the Password Stored in MongoDB as Encrypted -> Use the Signin Account Details to Sign In -> Project Main Page -> Profile Page Instead of Signin or Signup Page -> Update Details from the Profile Page and Check Changes in MongoDB -> Upload Photo -> Update Photo (Reflects Throughout Components) -> Sign Out
(1:58) Sign In with Updated User Details -> Project Main Page -> Delete the Created Account -> Verify Deletion in MongoDB -> Go to Project Main Page without Signin with Google Login -> Select a Gmail to Login -> Check Auto-Generated User Details in the Profile Page -> Verify in MongoDB
Auth.Application.Working.mp4
- Node.js - JavaScript runtime built on Chrome's V8 JavaScript engine
- npm - Package manager for JavaScript
- MongoDB - NoSQL database for storing application data
- Tailwind CSS - Utility-first CSS framework for styling
Use the package manager npm to install Auth App - Installation
npm install -g npmDownload this repo using
git clone github-repo-url- Step-by-step Instruction - Frontend
Open a terminal
# get inside root dir
cd Auth-fullstack-P-2
# get into client dir
cd client
# install the dependencies
npm install
# run client-side
npm run dev- Step-by-step Instruction - Backend
Open another terminal
# get inside root dir
cd Auth-fullstack-P-2
# install the dependencies
npm install
# get into server dir
cd server
# run server-side
node .- Note
For running this project locally, note that certain functionalities will be unavailable due to the absence of environment variables
file specified in the .gitignore file to exclude sensitive information like API keys, Database URI. Ensure you have the necessary
configuration in your local environment.
The project was made with the intent of hosting it on Render, Thus shaping it's current folder structure .
Auth-fullstack-P-2
│
│
│
├── client # React application source code
│ │
│ ├── src # React components and assets
│ │
| ├── components # React components and assets
| ├── pages # Individual pages of the application
| ├── redux # Redux-related files (actions, reducers)
| └── App.jsx # Main React application component
│
├── server # Node.js server files
│ │
│ ├── controllers # Server-side controllers
│ ├── models # Database models
│ ├── routes # API routes
│ ├── utils # Utility functions
│ └── index.js # Main server file
│
│
├── swagger-autogen.js # Swagger documentation Script
├── swagger.json # API documentation
└── README.md
| Main | Folder | File Name | Details |
|---|---|---|---|
| client | src | App.jsx | Entry point for Frontend |
| server | server | index.js | Entry point for Backend |
Explore the comprehensive API documentation with Swagger : Swagger API Documentation
Discover Key APIs - 4
This endpoint is used to create a new user account.
POST /api/auth/signupJSON Request body in the following format:
{
"username": "username",
"email": "user@example.com",
"password": "*********"
}- Status: 201
{
"message": "User created successfully",
}This endpoint is used to authenticate and sign in a user. Upon successful execution, it returns the user's information including their ID, username, email, profile picture, creation and update timestamps, and a version field.
POST /api/auth/signinJSON Request body in the following format:
{
"email": "user@example.com",
"password": "********"
}- Status: 200
{
"_id": "user_id",
"username": "username",
"email": "user@example.com",
"profilePicture": "url_to_profile_picture",
"createdAt": "timestamp",
"updatedAt": "timestamp",
"__v": 0
}This endpoint is used to update a specific user's information. The HTTP POST request should be sent to
POST /api/user/update/{id}JSON Request body in the following format:
Not Required
- Status: 200
{
"_id": "user_id",
"username": "username",
"email": "user@example.com",
"profilePicture": "url_to_profile_picture",
"createdAt": "timestamp",
"updatedAt": "timestamp",
"__v": 0
}
This HTTP DELETE request is used to delete a specific user with the given ID.
DELETE /api/user/delete/{id}JSON Request body in the following format:
Not Required
- Status: 200
{
"User has been deleted..."
}Auth App returns the following status codes in its API:
| Status Code | Description |
|---|---|
| 200 | OK |
| 201 | CREATED |
| 400 | BAD REQUEST |
| 404 | NOT FOUND |
| 500 | INTERNAL SERVER ERROR |
- react-router-dom
- @reduxjs/toolkit
- redux-persist
- firebase
- tailwindcss
- bcryptjs
- jsonwebtoken
- mongoose
- cookie-parser
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.
While I was the main developer of this MERN stack project, this project couldn't have even started without the help of these open-source projects, special thanks to:
- 0.2
- Various bug fixes and optimizations
- See commit change
- 0.1
- Initial Release
This project is licensed under the MIT License - see the LICENSE Tab for details
Inspiration, code snippets, etc.