https://github.com/soumya-rayast/productsdashboard

https://github.com/soumya-rayast/productsdashboard

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/soumya-rayast/productsdashboard
• Owner: soumya-rayast
• Created: 2024-11-30T20:12:13.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-12-01T08:20:39.000Z (6 months ago)
• Last Synced: 2025-02-02T15:35:16.025Z (4 months ago)
• Language: JavaScript
• Homepage: https://products-dashboard-six.vercel.app/
• Size: 211 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Product Dashboard  

## Overview  

The **Product Dashboard** is a comprehensive solution for visualizing and managing product data. Built using **React.js**, **Node.js**, and **MongoDB**, it provides real-time data visualization with **Chart.js** and a user-friendly interface for managing product information.

---

## Tech Stack  

- **Frontend:** React.js, CSS3, Chart.js  

- **Backend:** Node.js, Express.js  

- **Database:** MongoDB  

- **Charting Library:** Chart.js  

---

## Features  

- **Product Visualization:** Interactive charts displaying product statistics.  

- **Responsive Design:** Optimized for desktop and mobile devices.  

- **Real-time Updates:** Data sync with MongoDB using REST APIs.  

---

## Screenshots  

### Dashboard Overview  

![image](https://github.com/user-attachments/assets/100ac78f-6ff0-4d4c-8423-fa30dbf4e6f6)

### Product List  

![image](https://github.com/user-attachments/assets/c9c7a814-23b4-48d7-ae45-87d4258512b8)

### Responsive 

![image](https://github.com/user-attachments/assets/ac2845fe-b8a9-4566-af24-0dc689a85f70)

![image](https://github.com/user-attachments/assets/8ae3a392-0bff-4f7c-942e-d466b6edb1ae)

### MongoDB Database

![image](https://github.com/user-attachments/assets/8435ad68-573b-4dcc-a319-c06801920f2f)

---

## Installation and Running Locally  

1. **Clone the repository**  

   ```bash  

   git https://github.com/soumya-rayast/ProductsDashboard.git  

   cd ProductDashboard

2. **Frontend**

   ```bash

   cd client

   npm install

3. **Backend**

   ```bash

   cd server

   npm install

4. **Set up environment variables**

   ```bash

   MONGO_URI=your_mongodb_connection_string

   PORT=8000 

5. **Run the backend**

   ```bash

   cd server

   npm start

   

6. **Run the frontend**

   ```bash

   cd client

   npm start  

Deployed Link

Live Demo