https://github.com/krotrn/mern-project
This repository features a full-stack MERN Authentication System with secure JWT-based login, registration, and profile management. Powered by Redux Toolkit, MongoDB, and RESTful APIs, it ensures robust state management and backend operations. Tailwind CSS enhances its responsive design, making it scalable, secure, and user-friendly.
https://github.com/krotrn/mern-project
expressjs jwt mongodb mongoose nodejs react redux-toolkit
Last synced: 3 months ago
JSON representation
This repository features a full-stack MERN Authentication System with secure JWT-based login, registration, and profile management. Powered by Redux Toolkit, MongoDB, and RESTful APIs, it ensures robust state management and backend operations. Tailwind CSS enhances its responsive design, making it scalable, secure, and user-friendly.
- Host: GitHub
- URL: https://github.com/krotrn/mern-project
- Owner: krotrn
- License: mit
- Created: 2024-12-13T14:26:10.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-05T15:29:32.000Z (about 1 year ago)
- Last Synced: 2025-06-05T16:35:41.023Z (about 1 year ago)
- Topics: expressjs, jwt, mongodb, mongoose, nodejs, react, redux-toolkit
- Language: JavaScript
- Homepage: https://mern-kr.vercel.app
- Size: 7.36 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
README
# **MERN Full-Stack Application**
## **Table of Contents**
- [Overview](#overview)
- [Features](#features)
- [Tech Stack](#tech-stack)
- [Folder Structure](#folder-structure)
- [Getting Started](#getting-started)
- [Installation](#installation)
- [Environment Variables](#environment-variables)
- [Running the Application](#running-the-application)
- [API Endpoints](#api-endpoints)
- [Code Quality Tools](#code-quality-tools)
- [Contributing](#contributing)
- [License](#license)
---
## **Overview**
This project is a **MERN (MongoDB, Express.js, React.js, Node.js)** full-stack web application with robust features, a modern user interface, and a secure backend architecture. The application is designed for real-world scenarios, including user authentication, state management, and responsive design.
With a focus on scalability and performance, this app is optimized for seamless functionality on all devices. Built with **Redux Toolkit** for efficient state management and styled with **Tailwind CSS**, it ensures a smooth user experience with reusable, modular components.
---
## **Features**
### **Frontend**
- **User Authentication**:
Secure and responsive login, registration, and logout functionality.
- **Dynamic Dashboard**:
Personalized content display using **React Router**.
- **CRUD Operations**:
Create, Read, Update, and Delete data in real-time.
- **State Management**:
Efficient state handling using **Redux Toolkit**.
- **Responsive UI**:
Mobile-first, intuitive design with **Tailwind CSS**.
### **Backend**
- **Secure APIs**:
RESTful APIs with robust authentication and data validation.
- **Scalable Data Handling**:
Built with **MongoDB** for structured, scalable data storage.
- **JWT Authentication**:
JSON Web Tokens (JWT) for secure user sessions.
- **Error Handling**:
Centralized error handling for better debugging and user experience.
### **Additional Features**
- **Real-Time Data Updates**:
Optimized loaders and state synchronization.
- **Notifications**:
Integrated alerts using **React Toastify**.
- **User Management**:
Role-based access controls for admin and user roles.
---
## **Tech Stack**
### **Frontend**
- **React.js**: Library for building the user interface.
- **Redux Toolkit**: State management library for predictable state handling.
- **React Router**: Navigation and routing for a single-page application.
- **Tailwind CSS**: Utility-first CSS framework for responsive design.
### **Backend**
- **Node.js**: JavaScript runtime for server-side development.
- **Express.js**: Framework for building RESTful APIs.
- **MongoDB**: NoSQL database for scalable and flexible data management.
### **Dev Tools**
- **Postman**: API testing and development tool.
- **ESLint & Prettier**: For linting and formatting code consistently.
- **React Toastify**: Notifications for better user feedback.
- **Git & GitHub**: Version control and code collaboration tools.
---
## **Folder Structure**
```
project-root
├── client
│ ├── public
│ ├── src
│ │ ├── components # Reusable React components
│ │ ├── pages # Page-specific components
│ │ ├── redux # Redux slices and API integration
│ │ └── App.js # Main entry point for the frontend
│ └── package.json
├── server
│ ├── config # Configuration files (e.g., DB connection)
│ ├── controllers # Controller functions for handling requests
│ ├── middlewares # Middleware functions (e.g., auth, error handling)
│ ├── models # Mongoose models
│ ├── routes # API route definitions
│ ├── utils # Helper functions and utilities
│ └── server.js # Main entry point for the backend
└── README.md
```
---
## **Getting Started**
### **Installation**
1. Clone the repository:
```bash
git clone https://github.com/krotrn/MERN-Project.git
```
2. Navigate to the project directory:
```bash
cd MERN-Project
```
3. Install dependencies for both backend and frontend:
```bash
# Install backend dependencies
npm install
# Navigate to the client directory and install frontend dependencies
cd client
npm install
```
---
### **Environment Variables**
Create a `.env` file in the `server` directory and configure the following variables:
```env
PORT=3000
MONGO_URI=your-mongodb-connection-string
JWT_SECRET=your-jwt-secret
NODE_ENV=development
```
---
### **Running the Application**
1. Start the backend server:
```bash
npm run server
```
2. Start the frontend application:
```bash
npm run client
```
3. Run both the frontend and backend simultaneously:
```bash
npm run dev
```
4. Open the application in your browser at `http://localhost:5173` or other.
---
## **API Endpoints**
| Method | Endpoint | Description |
|--------|---------------------|--------------------------------|
| POST | `/api/users/login` | Logs in a user |
| POST | `/api/users/register` | Registers a new user |
| GET | `/api/users/profile` | Retrieves the user's profile |
| PUT | `/api/users/profile` | Updates the user's profile |
---
## **Code Quality Tools**
- **ESLint**: Enforces coding standards and ensures consistent formatting.
- **Prettier**: Automatically formats code for better readability.
- **React Testing Library & Jest**: For writing unit and integration tests (future enhancement).
---
## **Contributing**
Contributions are welcome! Follow these steps to contribute:
1. Fork the repository.
2. Create a new branch for your feature:
```bash
git checkout -b feature/AmazingFeature
```
3. Commit your changes:
```bash
git commit -m "Add some AmazingFeature"
```
4. Push your changes to the branch:
```bash
git push origin feature/AmazingFeature
```
5. Open a pull request.
---
## **License**
This project is licensed under the MIT License. See the [LICENSE](./LICENSE) file for details.