This project demonstrates a frontend application built with React, Vite, and Tailwind CSS. It features dynamic and responsive components, including an interactive D3-based graph and a user-friendly popup form for updating scores.
-
Responsive Comparison Graph:
- Built using D3.js, the graph visualizes percentile scores dynamically.
- Adapted for both desktop and mobile views with responsive layouts.
-
Responsive Popup Form:
- Form inputs for updating Rank, Percentile, and Score.
- Built-in form validation with error handling.
- Fully responsive for mobile and desktop users.
- React — Component-based architecture for building UI
- Vite — Fast development server and build tool
- Tailwind CSS — Utility-first CSS for responsive design
- D3.js — Data-driven visualizations
- Heroicons — Interactive icons for better UI
-
Clone the repository:
git clone https://github.com/Mohit138928/WhatBytes-Assignment.git cd project-directory -
Install dependencies:
npm install
-
Start the development server:
npm run dev
-
Graph Interaction:
The comparison graph shows the percentile score dynamically.- A vertical line indicates your current score compared to the simulated data distribution.
-
Popup Form:
- Enter your Rank, Percentile, and Score (0-15).
- Error messages guide the user to enter valid input.
- Click Save to update the data or Cancel to close the popup.
- Graph: The graph scales for mobile devices and maintains readability.
- Popup Form:
- Stacks input fields vertically on mobile devices.
- Adjusts layouts for larger screens seamlessly.
- Fork the project
- Create a feature branch:
git checkout -b feature/your-feature - Commit changes:
git commit -m 'Add your feature' - Push changes:
git push origin feature/your-feature - Open a Pull Request
This project is licensed under the MIT License.
Feel free to reach out for questions or suggestions:
- Email: mauryamohit138@email.com
- GitHub: Mohit Maurya