Live preview: Dark Kitchen

You can add the dishes to your cart, select the quantity and filter by type of dish you want to order.

Site build with

• Vite
• SCSS
• Handlebars
• JS Vanilla
• Dark/Light mode

😷 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

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 a single page website, with the following features.

• 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 and display the total amount of the delivery
• You should create a dark mode switch, to toggle your design between a light and a dark mode

Evaluation process

• One repo per group
• Everyone from the group must contribute
• The website must look nice
• Be creative!
• The website must use semantic HTML
• The website should be responsive (mobile & desktop)
• Every displayed feature must be functional, if you want to go the extra mile make a branch! 🤠