This project is a responsive analytics dashboard designed for real-time product insights. It features interactive data visualization, advanced filtering options, cookie-based user preferences, and secure URL sharing for customized views. Built with a focus on functionality and user experience, this application includes a robust backend API and data pipeline for seamless data handling.
- Bar charts to represent features (e.g., A, B, C) and total time spent.
- Line charts to display time trends of selected categories, with pan, zoom-in, and zoom-out options.
- Filters for Age (15-25, >25) and Gender (Male, Female).
- Date range selector for analytics data.
- Dynamic graph updates based on selected filters and date range.
- Stores user preferences for filters and date range.
- Automatically applies preferences on revisit.
- Option to reset or clear preferences.
- Share filtered charts with specific filters and date ranges via URL.
- Shared links require user authentication to access.
- Secure sign-up, login, and logout functionality.
- Ensures data confidentiality for authorized users only.
- Fully optimized for desktops, tablets, and mobile devices.
- Template-Engine: Ejs.
- Chart Library: Chart.js.
- Responsive Styling: TailwindCSS.
- Framework: Express Js.
- Database: MongoDB.
- API Integration: Handles data fetching, filtering, and chart updates.
- Data Pipeline: Processes data from the provided dataset for real-time analytics.
- Custom-Authentication.
- Express-session.
- Default Express-session Cookies.
- Stores and retrieves user preferences.
The project uses the dataset provided in the following link: Frontend Developer Assignment Data
- Node.js and npm installed.
- Clone the repository:
git clone [repository_url] cd [repository_name] - Install dependencies:
npm install
- Start the backend server:
npm run watch
- Access the application in your browser at
http://localhost:3000.
- Login or sign up to access the dashboard.
- Apply filters for age, gender, and date range to visualize data.
- Interact with charts by panning, zooming, or clicking on bars.
- Share specific views using the URL sharing feature.
- Clear or reset filters using the cookie management options.
Contributions are welcome! Please follow these steps:
- Fork the repository.
- Create a new branch:
git checkout -b feature-name
- Commit changes:
git commit -m "Add feature" - Push to the branch:
git push origin feature-name
- Open a pull request.
This project is licensed under the MIT License.
For any queries or feedback, please contact [Your Name or Email Address].