This project provides an interviewing screen for React engineers by providing a mock project to build.
It uses Create React App with
a REST API server on a local proxy. (e.g. API calls to /services will forward
to http://localhost:2000/services)
- Remember: This is an exercise and you do not need to follow as robust a process as a production application.
- This exercise uses Functional React with hooks, so be prepared to demonstrate your knowledge.
- Please fork the repository to your own GitHub account before starting the project. This will allow you to work on your own copy and track your progress. Be sure to push your code to your repo at least 24 hours before the interview, so it's available for review during the live session.
- The goal is to work through the project independently before your interview session. Plan to spend 1-2 hours on it. Be prepared to discuss your code and decision-making process during the live interview. We will then spend additional time enhancing the project in a live-coding session during the technical interview.
Ensure you have the following installed:
Execute the following commands to get started:
git clone https://github.com/driveway-engineering/react-kata.git
cd react-kata
npm installStart the local app development server:
npm startIn a separate terminal start the REST API server:
npm run serverTo run unit tests:
npm test- Discovery: Read the requirements and familiarize yourself with the codebase and API. (~10 min)
- Organize/Plan: Review each feature and think through any design & implementation choices, considering pros and cons of each decision. Base your choices on importance to Product + UX, as well as technical complexity. (~15-30 min)
- Implement/Test: Start building the features from the provided starter application. (~60-90 min)
Lithia & Driveway takes pride in helping people in all phases of their car-ownership. It's up to our scrappy team to build a snappy UI to help users book appointments such as oil changes, tire replacements, etc.
- "You should feel free to use any libraries or frameworks you need, but let's not overbuild this. Getting the tech right is my TOP PRIORITY!"
- "These back-end engineers can't make a stable web service to save their lives! Make sure the pages still work even if the backend services are being spotty. Resiliency is my TOP PRIORITY!"
- "Making sure people can do business with us is most important goal. As long as people can book an appointment with us, our shareholders will be happy!"
- "We want people to see our Logo first and a little blurb about what we do. After that they should be able to click a button to get the ball rolling."
- "The user should be presented with all the services available in the next two weeks. When they select a service, they should be presented with all the available appointment slots for that service. They can then select a slot and book it, by entering their name, email, and vehicle information.
- "After booking, the customer should see a confirmation of their booking details."
- "Almost forgot! We should put our contact info somewhere on the landing screen if people want to talk to someone. It's [email protected] and the number is 555-872-3289."
src/assets/: Images & icons provided by designers.src/components/: Initial project components to build from.src/server/: Mock API server providing service information.src/utils/: Utility and middleware libraries.wireframes: Sample wireframes provided by designers.
Returns a list of services available within the next 14 days. Each contains:
id: The unique service identifier.name: The name of the service.duration: The duration of the service in seconds.
Example JSON response:
[
{
"id": 1,
"name": "Replace Brakes",
"duration": 3600
},
{
"id": 2,
"name": "Oil Change",
"duration": 1800
},
{
"id": 3,
"name": "Rotate Tires",
"duration": 1800
}
]Returns a list of all currently available appointment blocks within the next 14 days. See the next section for details.
Returns a list of non-booked appointment blocks currently available for the requested
Service ID within the next 14 days. Each contains:
id: The unique service appointment identifier.serviceName: The name of the service appointment.serviceId: The id of the service.start: The start date & time of the appointment.duration: The duration of the appointment in seconds.booked?: A boolean indicating whether or not the appointment has been booked.email?: An optional property indicating the booked customer's email;customerName?: An optional property indicating the booked customer's full name;modelYear?: An optional property indicating the booked customer's vehicle year;make?: An optional property indicating the booked customer's vehicle make;model?: An optional property indicating the booked customer's vehicle model;
Example JSON Response:
[
{
"id": "972836c4-a389-4b23-9709-78cf33c246ed",
"name": "Replace Brakes",
"start": "2025-3-15T08:30:00.000Z",
"duration": 3600,
"booked": false
},
{
"id": "b192cf15-dcc7-443d-8d2a-6604be7952f1",
"name": "Replace Brakes",
"start": "2025-3-23T13:00:00.000Z",
"duration": 3600,
"booked": false
}
]Book the requested appointment for a particular customer and vehicle. Request body must contain:
email: The customer's contact email address.customerName: The customer's full name.make: The make of the vehicle they are servicing.modelThe model of the vehicle they are servicing.modelYear: The year of the model they are servicing.
Example JSON Request:
{
"email": "[email protected]",
"customerName": "John Doe",
"make": "Mazda",
"model": "Miata",
"modelYear": "2005"
}The response from this endpoint is an appointment confirmation which includes:
id: The unique scheduled appointment identifier.serviceName: The name of the scheduled service appointment.start: The start date & time of the appointment.duration: The duration of the appointment in a human-readable format.booked: A boolean confirming the booking status of the appointment.customerName: The customer's full name.make: The make of the vehicle they are servicing.modelThe model of the vehicle they are servicing.modelYear: The year of the model they are servicing.
Example JSON Response:
{
"id": "71p51iun6j0jajc7ln894q32pd",
"serviceName": "Oil Change",
"start": "2025-03-01T09:00:00.000Z",
"duration": "30 minutes",
"booked": true,
"email": "[email protected]",
"customerName": "John Doe",
"make": "Mazda",
"model": "Miata",
"modelYear": "2005"
}