cd foodselection
npm start
| This assignment is aimed to help us know more about your React
skills.
- Use
React
- Use ES6 + TypeScript
- If needed use a CSS framework, preferred
tailwindcss
- If comfortable, it is preferred to use Nextjs as a framework
- Write Integration/Unit Tests
As this test is to evaluate basic React
skills, we won't focusing on tooling setup (webpack, create-react-app, Vite, etc...).
So FEEL FREE to use any tools or custom setup to jump start your development.
Also FEEL FREE to use any 3rd-party libraries you prefer (we maybe ask for the reasons).
You can use the same repository to push back the code. Either initialize the project in root folder, or create a sub folder. Do what is less confusing and managable for you.
We want a multi-steps form that is aimed to help users pre-order food from restaurants, the restaurants and food item data is provided in the data folder.
Wire frames are provided in the wire frames folder (just guide lines, feel free to alter the UI).
- Select Meal Category (breakfast/lunch/dinner) (required)
- Need to input number of people (maximum 10) (required)
- Select restaurants that provides meals based on selection in Step 1. (required)
-
Select dishes based on the meal and restaurant selected in Step 1 & Step 2.
-
First choose a dish
-
Then user can add number of servings of the dish (defaulted to 1)
-
Also user CAN'T select the same dish twice, rather add more servings.
The total number of dishes (i.e Number of dishes * respective serving) should be greater or equal to the number of people selected in Step 1 and a maximum of 10 is allowed.
User can review all his/her previous choices before final submit.
- User can't proceed to next step unless have valid inputs on the current step.
- if inputs are invalid, show validation errors.
- At any step user can go back and change their preference on any previous step.
- For the final submit, just print the results in console, as we don't have any backend at this moment.
- Feel free to alter/optimize with the UI/UX.