This project is a replication of the provided dashboard design using React.js. The goal is to create a responsive and functional dashboard that matches the original design.
To complete this assignment, I followed these steps:
- Carefully examined the provided dashboard design to understand the layout, components, and functionality.
- Set up a new React.js project using Create React App.
- Designed and implemented the dashboard layout using CSS Grid and Flexbox.
- Created modular components for reusability, including the navigation menu, progress bar, and input fields.
- Implemented form validation using React Hook Form.
- Added dynamic elements, such as checkboxes, dropdowns, and file upload buttons.
- Tested the dashboard for responsiveness and functionality across different screen sizes.
- One of the challenges I faced was replicating the exact design of the progress bar. To solve this, I used CSS pseudo-elements to create the progress bar's visual effects.
- Another challenge was implementing form validation without using external libraries. I solved this by using React Hook Form's built-in validation features.
- I assumed that the dashboard's layout and design should be replicated as closely as possible.
- I assumed that the form validation should prevent empty submissions and provide feedback to the user.
- Frontend Framework: React.js
- Styling: CSS Grid, Flexbox, and CSS pseudo-elements
- Form Validation: React Hook Form
Please find attached screenshots of the completed dashboard in desktop
I hope this sample README file helps! Let me know if you need any further assistance.