/frontend-react-challenge

Zenport React Assignment

This assignment is aimed to help us assess your React skills.

Requirements

Must

  • Use React (preferred Next.js)
  • Use ES6+
  • Write unit tests (any testing library, but preferred jest)
  • Make it responsive / mobile friendly

Optional

  • Use a type system (preferred Typescript or flow)
  • Write integration tests
  • Use styled components (preferred css modules or emotion)
  • Save form values to state or context

Setup

As this test is to evaluate basic React skills, we are not be focusing on tooling setup (webpack, babel, etc...).

So feel free to use create react app or create next app to jump start your development, although if not comfortable custom setup is also welcomed.

Description

We want to make multi step form. This form is aimed to help user order food from a restaurant. The wireframes are available at this link or in the wireframes folder.

Data is provided in the data folder and images are provided in the images folder. Fonts used are available at Google Fonts, and any additional icons are available at Font Awesome.

Step 1

  • Users inputs the number of people (maximum 10)

Step 2

  • User adds dishes to their order
  • Come up with a way to add items to the right person

Step 3

  • User is presented with a review of their order
  • They can go back and edit their order

Notes

  • User can't proceed without selecting number of people or adding any items to their order.
  • If user inputs are not valid, show appropriate validation errors.
  • Finer details of UX is left for you to decide.

Submission

  • Submit a working link of your code repository (github / gitlab / bitbucket, etc.)
  • Submit a link of the deployed app (github.io / now / surge, etc.)

FAQs

  • Library Usage
    • You are free to use any 3rd party library you want, although we might ask for justification.