/Car-booking

Simple car booking page using React and chart.js

Primary LanguageTypeScript

Car booking

🏁 Get Started

Installation

  1. Clone the repository
git clone https://github.com/HazemAbdo/Vekelz-Task.git Vekelz-Task
  1. Navigate to repository directory
$ cd Vekelz-Task
  1. Install dependencies
$ npm install
  1. 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

react typescript css3 html5 figma

Pages

Booking

booking booking-dark

Dashboard

dashboard dashboard-dark

Quick Tour

quick-tour.mp4

Testing Coverage

testCoverage

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__