A full-stack authentication system built using the MERN stack (MongoDB, Express.js, React, Node.js) with modern security features and a beautiful user interface.
- User registration and login
- JWT-based authentication
- Password encryption using bcrypt
- Email verification
- Modern responsive UI using Tailwind CSS
- Toast notifications for better UX
- Node.js
- Express.js
- MongoDB with Mongoose
- JWT for authentication
- Bcrypt for password hashing
- Nodemailer for email functionality
- CORS for cross-origin resource sharing
- Cookie Parser for handling cookies
- Environment variables management with dotenv
- React
- React Router DOM
- Axios for API requests
- Tailwind CSS for styling
- React Toastify for notifications
- Vite as build tool
- ESLint for code quality
- Clone the repository
git clone https://github.com/mahm0udnasr/Auth-System.git
cd Auth-System- Install Server Dependencies
cd server
npm install- Install Client Dependencies
cd ../client
npm install- Set up Environment Variables
Create .env file in server directory with:
MONGODB_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret
EMAIL_USER=your_email
EMAIL_PASS=your_email_password
Create .env file in client directory with:
VITE_API_URL=http://localhost:3005
- Start the Server
cd server
npm run start:dev- Start the Client
cd client
npm run start:devThe server will run on http://localhost:3005 and the client on http://localhost:5173
server/
├── config/ # Configuration files
├── controller/ # Route controllers
├── middlewares/ # Custom middlewares
├── models/ # Database models
├── routes/ # API routes
└── server.js # Entry point
client/
├── public/ # Static files
├── src/
│ ├── assets/ # Assets files
│ ├── components/ # React components
│ ├── pages/ # Page components
│ ├── context/ # React context
│ └── App.jsx # Main component
└── index.html
Mahmoud Nasr
- Fullstack Web Developer
- Project: Authentication System using MERN Stack
This project is licensed under the ISC License.