React Sales Dashboard
React Sales Dashboard empowers sales teams with real-time analytics, dynamic visualizations, and interactive charts, backed by a secure Node.js/Express API with role-based authorization, JWT authentication, and middleware protection, while React hooks and context ensure efficient state management and enhanced frontend security.
React
Node.js
MongoDB
TypeScript
Html
CSS
Project Requirements
- Develop a secure authentication system (JWT-based).
- Create a RESTful API for CRUD operations.
- Implement state management with Redux/Context API.
- Ensure a scalable folder structure for both frontend and backend.
- Use MongoDB (Mongoose) for efficient data management.
- Deploy on a cloud platform (Vercel & Render).
Approaches Used
- Followed MVC (Model-View-Controller) architecture for backend.
- Used React hooks (useEffect, useState, useContext) for UI updates.
- Created a modular component system to ensure reusability.
- Used Axios for API integration with loading & error handling.
- Applied JWT authentication for secure user login.
- Used React Router for client-side navigation.
Challenges and Solutions
- Managing authentication across pages.
Used React Context API and local storage to persist user state.
- Handling asynchronous API requests.
Used Axios interceptors for global request/response handling.
- Ensuring responsiveness across devices.
Used Tailwind CSS grid and flexbox for adaptive layouts.
- Deploying frontend and backend seamlessly.
Hosted backend on Render and frontend on Vercel, configured CORS properly.
Project Structure
react-sales-dashboard/
├── backend/
│ ├── controllers/ # Business logic (orders, users, auth)
│ ├── models/ # MongoDB schemas (User.js, Order.js)
│ ├── routes/ # Express routes (authRoutes.js, salesRoutes.js)
│ ├── middleware/ # Auth, role checking, error handler
│ ├── config/ # MongoDB connection & env setup
│ └── server.js # API entry point
├── frontend/
│ ├── src/
│ │ ├── components/ # UI components (Sidebar, Charts, Widgets)
│ │ ├── pages/ # Dashboard, Login, Reports
│ │ ├── context/ # Global state (auth, data)
│ │ ├── utils/ # Axios config, formatters
│ │ └── App.js
│ ├── public/
│ └── package.json
├── .env # Environment variables
├── README.md
└── .gitignore
How It Works
📦 Setup & Installation
- Clone the repository: `git clone https://github.com/your-repo.git`
- Install backend dependencies: `cd backend && npm install`
- Start backend: `npm run dev`
- Install frontend dependencies: `cd frontend && npm install`
- Start frontend: `npm run dev`
Installation
Backend
cd backend && npm install && npm start
Frontend
cd frontend && npm install && ng serve
API Endpoints
| Method | Route | Description |
|---|---|---|
| POST | /api/auth/login | User login |
| POST | /api/auth/register | Register new user |
| POST | /api/auth/logout | User logout |
| GET | /api/auth/me | Get logged-in user info |
| GET | /api/sales/summary | Fetch overall sales metrics |
| GET | /api/leaderboard | Get top-performing users/sellers |
| GET | /api/orders | Get all orders |
| POST | /api/orders | Create new order |
| GET | /api/products | Get list of products |
| POST | /api/products | Add a new product (Admin only) |
| GET | /api/users | Admin: View all users |
| PUT | /api/users/:id | Admin: Update user info |
| DELETE | /api/users/:id | Admin: Delete user |