Repository files navigation

An interactive dashboard built with the MERN stack, enabling users to explore and analyze large datasets through dynamic charts and advanced filtering options. This project aims to provide insights into data trends, feature usage, and user engagement.

• Features
• Tech Stack
• ETL Process
• Installation
• Usage
• Contributing
• License
• Acknowledgments

• Dynamic Charts: Visualize data trends using bar and line charts.
• Advanced Filtering: Filter data by date range, age, and gender for tailored insights.
• User Authentication: Secure access with user authentication and session management.
• URL Sharing: Share specific filtered views via unique URLs after authentication.
• Responsive Design: Optimized for various screen sizes for seamless user experience.
• Real-time Updates: Fetch data dynamically to ensure the latest information is displayed.

• Frontend: React, Redux Toolkit, Bootstrap
• Backend: Node.js, Express
• Database: MongoDB
• Charting Library: Chart.js
• Data Integration: Google Sheets API for ETL
• Deployment: Vercel

This project uses anETL (Extract, Transform, Load) process to fetch and store data from a Google Sheet, allowing up-to-date information for analytics. The process involves:

1. Extract: Accessing data from a Google Sheet using Google’s Sheets API and Service Account for authentication. Credentials are securely stored in environment variables.
2. Transform: Cleaning and formatting the extracted data for consistency and usability, transforming fields such as "Day," "Age," and "Gender" into usable formats.
3. Load: Saving the transformed data into a MongoDB database for efficient access, where it is continuously updated by clearing old entries and inserting new data.

1. Clone the repository:

   git clone https://github.com/yourusername/data-visualization-dashboard.gitcd data-visualization-dashboard

2. Install dependencies for both frontend and backend:

   # Frontendcd clientnpm install# Backendcd servernpm install

3. Configure environment variables in.env for theserver:

   • MongoDB URI
   • Google Sheets API credentials (client_email andprivate_key)

4. Start the development servers:

   # Start the backend servercd servernpm start# Start the frontend servercd clientnpm start

• Open your browser and navigate tohttp://localhost:5173 to access the dashboard.
• Use the filters to customize your data view.
• Click on any feature in the bar chart to display its timeline in the line chart below.

Contributions are welcome! Please follow these steps:

1. Fork the repository.
2. Create a new branch (git checkout -b feature-branch).
3. Make your changes and commit them (git commit -m 'Add new feature').
4. Push to the branch (git push origin feature-branch).
5. Open a pull request.

• Thanks to the open-source community for their contributions and resources.
• Special thanks toChart.js for their excellent charting library.
• Thanks to Google Sheets API for providing easy-to-integrate data access.