- Clone the repository
git clone https://github.com/HazemAbdo/Vekelz-Task.git Vekelz-Task
- Navigate to repository directory
$ cd Vekelz-Task
- Install dependencies
$ npm install
- Run the Client
$ npm run dev
- I decided not to use UI libraries like Bootstrap or material UI to have more flexibility in mocking our Figma design.
- I decided to use chart.js instead of amcharts as the last one only supports react in the old-fashioned class component and I want to make all of my components in the functional style.
- I decided to make SVGs as components not as files so I can add logic and customizations to them.
- I decided to encapsulate all the data in a dummy file in the assets directory then I fetch them and passing them as props so we can easily integrate with real APIs in the future without changing the components code.
quick-tour.mp4
- Dashboard component
- Booking component
- dark theme
- basic unit testing
- Reach 100% testing coverage
- Reach 100% accessibility
- Reach 100% responsiveness
|───public
└───src
├───assets
│ ├───DummyData
│ ├───Icons
│ └───Images
├───Components
│ ├───CarCard
│ ├───ContinuousGraph
│ ├───Navbar
│ ├───PercentageCard
│ ├───RecommendCard
│ ├───Sidebar
│ └───VerticalBarChart
├───Contexts
├───Pages
│ ├───Booking
│ └───Dashboard
└───__tests__