Giter Club home page Giter Club logo

reactassignmentisb's Introduction

To run

cd foodselection
npm start

React Assignment

| This assignment is aimed to help us know more about your React skills.

Requirements

Must

  • Use React
  • Use ES6 + TypeScript
  • If needed use a CSS framework, preferred tailwindcss

Optional

  • If comfortable, it is preferred to use Nextjs as a framework
  • Write Integration/Unit Tests

Setup

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.

Description

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).

Step 1

  • Select Meal Category (breakfast/lunch/dinner) (required)
  • Need to input number of people (maximum 10) (required)

Step 2

  • Select restaurants that provides meals based on selection in Step 1. (required)

Step 3

  • 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.

Step 4

User can review all his/her previous choices before final submit.

Notes

  • 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.

reactassignmentisb's People

Contributors

naval-surange avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.