car-booking's Introduction

Car booking

🏁 Get Started

Installation

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

Design Decisions

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.

Built With

Quick Tour

quick-tour.mp4

Testing Coverage

Done ✓

Dashboard component
Booking component
dark theme
basic unit testing

More optimizations

Reach 100% testing coverage
Reach 100% accessibility
Reach 100% responsiveness

Project Structure

|───public
└───src
    ├───assets
    │   ├───DummyData
    │   ├───Icons
    │   └───Images
    ├───Components
    │   ├───CarCard
    │   ├───ContinuousGraph
    │   ├───Navbar
    │   ├───PercentageCard
    │   ├───RecommendCard
    │   ├───Sidebar
    │   └───VerticalBarChart
    ├───Contexts
    ├───Pages
    │   ├───Booking
    │   └───Dashboard
    └───__tests__

Recommend Projects