Sprint Challenge - Web Unit 2 Sprint 7

Introduction

Welcome to Sprint 7 Challenge! In this project, you will demonstrate your ability using React Router, creating forms with proper validation, and testing React components.

Your main goal is to implement a form that handles a pizza order, validates user input, and POSTs the order to the backend. Your next goal will be to demonstrate basic ability testing functions and components.

To successfully complete this project, you will need the following technical knowledge:

  • React Router, to render different components depending on the path.
  • Forms in React, to track the values entered by the user.
  • Input types like text, checkboxes and dropdowns.
  • Form Validation using Yup, to help the user fill out the form correctly.
  • Testing components using Jest and React Testing Library.

Additionally, the following soft skills will greatly impact your performance:

  • Attention to detail. Make sure there isn't a single character out of place!
  • Perseverance. Keep trying until you figure it out!
  • Patience. Make sure to read the entire README for important information.

Project repository: https://github.com/bloominstituteoftechnology/W_S7_Challenge

Instructions

You have been given a take-home coding assessment as part of the hiring process for a Web Developer position. Your task is to implement basic routing for a home-delivery pizza site and create a form to take pizza orders.

💾 Setup

Here are the steps to set up this project:

  1. Clone this repository to your computer.
  2. Within your terminal, navigate to the project folder and execute npm i.
  3. After successful installation execute npm run dev.
  4. Run tests locally executing npm test.
  5. Load the app in Chrome by navigating to http://localhost:3003.

❗ Note: On the event of NPM errors during setup, delete the node_modules folder and the package-lock.json file, and retry npm i and npm run dev.

🥷 Tasks

👉 TASK 1 - Study the mock site

Your fully-functional design mock is https://bloominstituteoftechnology.github.io/W_S7_Challenge/

Study it using Chrome Dev Tools, paying special attention to the Elements tab.

Your finished product will have to match the functionality of the design exactly.

👉 TASK 2 - Study the pizza order endpoint

Explore the API functionality at http://localhost:9009/api/order. The API works with GET and POST requests.

Try to do a POST request with Postman or a similar tool, to understand how the API expects your payload to be structured.

👉 TASK 3 - Implement Routing

Make sure to match the paths in the mock site. There are 3 paths that should render:

  • Home (/): the landing page of your application
  • Order (/order): the pizza order form
  • Success (/success): the order confirmation screen

👉 TASK 4 - Implement the order form

Work on the order form that allows users to:

  • Enter their first and last name (required)
  • Enter a valid address (required)
  • Select at least one topping for the pizza
  • Choose a valid size for the pizza
  • Enter special instructions (optional)

Show validation errors if any required fields are missing or incorrect.

👉 TASK 5 - Implement form submission

When the form is submitted successfully, you should:

  • POST the order data to the API endpoint
  • Redirect the user to the success page showing order details
  • Handle any potential errors from the API

👉 TASK 6 - Write Tests

Make sure to implement the required tests for:

  • Testing the order form components
  • Testing validation functions
  • Testing API interactions (or mocking them)

Project Requirements

🧪 Testing Requirements

  • All components render without crashing
  • Form validation correctly identifies valid and invalid inputs
  • Form submission behaves properly (submits with valid data, shows errors with invalid data)
  • Navigation works correctly between routes

🎯 Success Criteria

  • All tests pass successfully
  • The application matches the mock site functionality
  • Users can submit a valid pizza order
  • The application properly validates user input
  • The application handles API interactions correctly

Submission

Complete the project and push it to GitHub. Share the repository link with your instructor before the deadline.

Back to Home Challenge Repository