CMS

Overview

The CMS is a full-stack application designed to manage customer payments, notifications, and bulk data uploads efficiently. It includes real-time updates, secure authentication, and strict validation checks to ensure data integrity.

---

🚀 Tech Stack

Frontend

• Next.js
• Tailwind CSS
• TypeScript
• Redux
• Framer Motion (for animations)

Backend

• Node.js
• Express.js
• TypeScript
• MongoDB (for User & Notifications storage)
• Elasticsearch (Bulk customer data storage)
• JWT Token Authentication
• Express-rate-limit (Rate Limiting)
• Multer & XLSX (File upload handling)
• Socket.io (Real-time updates)
• Docker (Containerized deployment)

---

🔥 Functionalities

1. Authentication System

• User registration & login functionality.
• "Remember Me", "Password Toggle", and real-time field validation.
• JWT-based authentication with proper middleware.
• Protected routes using custom hooks.

2. Customer Management

• Manually add customers or bulk upload via Excel.
• Strict validation checks for customer data.
• Count existing customers for future subscription-based plans.
• Show success/failure summary.
• List view with filtering and sorting.

3. Payment Management

• Mock payment API to update payment status (Pending → Received).
• Real-time UI updates using WebSockets.

4. Notification System

• Real-time notifications using WebSockets.
• Notification types:
  • Payment Received
  • Payment Overdue
  • New Customer Added
• Notification center for managing user notifications.
• Clear one-by-one or All at one click.

5. Other Features

• Clean & responsive UI.
• Global state management (Redux/Context API).
• Form validation & error handling.
• Loading states.
• Real-time updates.
• File upload handling.

---

🛠️ Setup Instructions

1. Clone Repository

git clone https://github.com/ayusharma-ctrl/CMS

cd your-repo

2. Folder Structure

• /client - Frontend
• /server - Backend

3. Setup `` Files

• Copy .env.example from both /client and /server and create a new .env file in each.
• Fill in the necessary environment variables.

4. Installation & Running the Project

Method 1: Run Manually

# Install dependencies for both client and server
cd ./client && npm install
cd ./server && npm install

# Start frontend and backend
npm run dev (client)
npm start (server)

Method 2: Using Docker

docker-compose up --build   # Start the project
docker-compose down        # Stop the project

---

Your application will be available at:

• Frontend: http://localhost:3000
• Backend: http://localhost:8000

---

🏗️ API Endpoints

Authentication APIs

Method	Endpoint	Description
POST	/api/v1/auth/signup	User Registration
POST	/api/v1/auth/signin	User Login
POST	/api/v1/auth/signout	User Logout

Protected Routes (Require Auth)

Method	Endpoint	Description
GET	/api/v1/user	Get User Details
GET	/api/v1/user/notification/all	Get All Notifications
DELETE	/api/v1/user/notification/:id	Delete a notifiaction
DELETE	/api/v1/user/notification/all/clear	Delete all notifiactions
GET	/api/v1/user/customer	Get customer data
POST	/api/v1/user/customer/add	Add customer data
PUT	/api/v1/user/customer/ps/:customerId	Update payment status
POST	/api/v1/user/file/upload/bulk	Upload excel file to store
GET	/api/v1/user/file/download/template	Download sample template

Public Test Route

Method	Endpoint	Description
GET	/	Test API Response

---

🔮 Future Improvements

• Server side in-memory caching.
• More filters can be used for data fetching.
• State management could be better.
• Improve unit & integration testing for better reliability.

---

---

👨‍💻 Author

Developed by Ayush 🚀