https://github.com/lokeshahire/datadashboard
Data Dashboard Assignment
https://github.com/lokeshahire/datadashboard
Last synced: 3 months ago
JSON representation
Data Dashboard Assignment
- Host: GitHub
- URL: https://github.com/lokeshahire/datadashboard
- Owner: lokeshahire
- Created: 2024-12-15T19:07:44.000Z (6 months ago)
- Default Branch: master
- Last Pushed: 2024-12-15T20:04:07.000Z (6 months ago)
- Last Synced: 2024-12-15T20:26:49.278Z (6 months ago)
- Language: JavaScript
- Homepage: https://data-dashboard-nu.vercel.app/
- Size: 180 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Data Dashboard Assignment
## Screenshots
## Live Demo
You can try the live demo here: [Demo](https://data-dashboard-nu.vercel.app/)
---
## **Assignment Overview**
This project involves building a **Data Dashboard** to display a list of items, each showcasing key metrics like engagement score and reach. The dashboard includes layout design, filtering and sorting functionalities, and a modal for additional details. The project is hosted online, with a GitHub repository available for code review.
---
## **Features**
### **Page Layout and Styling (HTML/CSS)**:
- **Main Dashboard**:
- Display a **list of items** in **cards**, each showing:
- **Name/Title** (e.g., "Product A")
- **Engagement score** (calculated as `likes + shares + comments`)
- **Reach** (calculated as `followers * engagement / 100`)
- **Category** (e.g., "Tech")
- **Location** (e.g., "USA")
- A **button** to open a modal with more details.
- **Filter Options**:
- Dropdown to filter by **category** (e.g., "Tech", "Fashion", "Sports").
- Filter by **Engagement Score** ranges (e.g., "0–1000", "1000–5000").
- **Sort Options**:
- **Sort by Engagement Score** (ascending/descending).
- **Sort by Reach** (ascending/descending).
- **Responsive Design**:
- Fully responsive dashboard.
### **JavaScript/React.js (Core Functionality)**:
- **Mock Data**:
- Includes at least 5 items in JSON format with properties like:
- **name**, **likes**, **shares**, **comments**, **followers**, **category**, **location**.
- **Data Rendering**:
- Dynamically renders the list of items using React.
- **Modal for Item Details**:
- Shows detailed information (engagement history, category, location) when **View Details** is clicked.
- **Filter Functionality**:
- Filters by **category** and **engagement score**.
- **Sorting Functionality**:
- Sorts by **engagement score** and **reach** in both ascending and descending order.
---
## **Technologies Used**
- **React.js**: Frontend library for building the UI components.
- **CSS3**: For layout and styling.
- **JavaScript (ES6+)**: Core functionality.
- **Bootstrap**: For responsive design.
- **JSON**: Mock data.
- **Vercel**: Hosting platform.
---
## **Installation Procedure**
To run the project locally:
1. Clone the repository:
```bash
git clone
```
2. Navigate to the project directory:
```bash
cd data-dashboard
```
3. Install the dependencies:
```bash
npm install
```
4. Start the development server:
```bash
npm start
```
5. Open your browser and go to:
```
http://localhost:3000
```
---
## **Project Structure**
```plaintext
src/
├── components/
│ ├── Dashboard.jsx
│ ├── Filter.jsx
│ ├── Sort.jsx
│ ├── ItemCard.jsx
│ ├── ItemModal.jsx
├── data/
│ └── mockData.json
├── App.js
├── index.js
└── styles/
└── App.css
```