Skip to content

Latest commit

 

History

History
95 lines (73 loc) · 2.25 KB

README.md

File metadata and controls

95 lines (73 loc) · 2.25 KB

Hex Ocean dish submitter task

This project is a React SPA that sends details about a user's dish to a given API endpoint with POST request.

Time it took to create this project: 6-8 hours.

Live preview

Live preview can be found in here: https://dish-submitter.netlify.app/

Tools / libraries used to build

  • React.js
  • Formik + Yup form validation
  • Vite
  • SASS
  • Font Awesome icons

Requirements

  • Node v18.16.0
  • npm v9.6.6

Installation and starting the development server

  1. Clone this repository using git clone
  2. Navigate to the project directory.
  3. Run the following commands: npm install and npm run dev

This will start the server on http://localhost:5173

Example request

An example request made by UI can look as following:

{
  "name": "Margherita",
  "preparation_time": "03:30:00",
  "type": "pizza",
  "no_of_slices": 6,
  "diameter": 32,
}

React.js UI screenshots

Initial look initial look
Valid pizza type form valid pizza type form
Invalid form invalid form
Form submitting state form submitting state
Success message on adding dish success message
Server response error on adding dish server error message
Client error on adding dish client error message