React Takeout Exercise

A practice exercise to test your React skills. You will be building a takeout menu from which a user can order food.

If you already know basic HTML, CSS, TypeScript and React, you should be able to complete this exercise in 4-6 hours. If you don't, I recommend that you to look at my React Learning Resources which include a crash course in these technologies as well as deeper resources to learn React.

Before you start this exercise, I have one request for you. I believe that we learn from our mistakes. Realizing what went wrong and reworking the solution helps us internalize key concepts and not make those mistakes again. So that others get the opportunity to go through this learning process, I request that you don't publish your solutions. Use a private repository to work through the exercise. Thanks for your understanding.

Screenshots

Order page with a blank order

Order page with a populated order

Visual Design

This Figma Project contains the visual design for the React Takeout application. You will have to create an account with Figma to be able to inspect the CSS values.

At a very high-level the interface is divided into two parts:

1. The left-hand side shows the menu of available items.
2. The right-hand side shows the current state of the order.

The UI is expected to stretch to the full width of the browser window, with the right-hand side remaining fixed at a width of 400px. The menu item cards should stretch to cover the full space available on the left-hand side.

The heights of the two sides should stretch to the full height of the browser window. Do not fix them to any hard coded number. If the window is too short for the content to fit, the two sides should scroll independently to show the full content.

Technical Design

Before we jump into implementation, let's create a plan of attack. The diagram below shows the component breakdown of the OrderPage.

We will use the following component hierarchy and folder structure to create these components.

Ready, Set, Go!

Now that we have the full context of the exercise, let's jump to implementation. We will do this in 3 parts:

1. Set up the basic Order page
2. Implement the Menu view
3. Implement the Order view

Please go to part 1 to get started!