😷 Dark Kitchen

Dark kitchens are also known as virtual kitchens, cloud kitchens, ghost kitchens or delivery-only restaurants. However you call it, a dark kitchen always revolves around the same concept: selling meals exclusively through delivery. Ghost kitchens have no sitting capacity for in-house diners or walk-ins, as they focus only on delivery, preparing food once an order comes in through a delivery app or an online ordering system.

• Type of challenge: consolidation
• Duration: 3 days
• Team challenge: teams of 2-3
• Deployment strategy: Github Pages or Netlify

Learning objectives

Using all that you know about frontend so far to work on real use case.

The mission

You will be in charge of building a Dark Kitchen online delivery service. The site must be with the following features.

(🌱 = Must Have | 🌼 = Nice To Have)

• 🌱 Create a list of dishes that people will order online.
• 🌱 The website should be responsive, it should work on a standard mobile resolution and on desktop
• 🌱 You must list the food using some sort of card templates
• 🌱 You should categorize your food to be able to filter it (ex: vegan, comfort food)
• 🌱 You should create a shopping cart component to display the selected dishes with their price and the amount ordered and an "order" button
  • 🌱 Your items must still be saved after reloading a page. (tip: see localStorage)
• If the user clicks on order, the following should happen:
  • 🌼 a modal should appear asking for their name, email, region, city, zip, street and street number and save it in a local storage
  • 🌼 after submitting the modal form, it goes to a page with the final order containing all details (the order + delivery address + contact information)
  • 🌼 include a delivery and VAT fee to the total price
• 🌱 You should create a dark mode switch, to toggle your design between a light and a dark mode

Evaluation process

• Everyone from the group must contribute
  • Make sure to divide the workload evenly and fairly.
• The website must look nice
  • Use real life examples to inspire your website's looks
• Be creative with your ideas!
• The website must use semantic HTML
• The website should be responsive (mobile & desktop)