Back

Product list with cart

A mock food ordering website, with a saved cart, order history and keyboard controls. A challenge by Frontend Mentor.

vueastrotailwindcssvitest

Links

Overview

The challenge

Users should be able to:

  • Add items to the cart and remove them
  • Increase/decrease the number of items in the cart
  • See an order confirmation modal when they click “Confirm Order”
  • Reset their selections when they click “Start New Order”
  • View the optimal layout for the interface depending on their device’s screen size
  • See hover and focus states for all interactive elements on the page

Keyboard Navigation

KeyAction
-Decrement amount in cart
+ (Shift + =)Increment amount in cart

Screenshot

Desktop

Desktop

Tablet

Tablet

Mobile

Mobile

My process

At first, I wanted to build with SolidJS, but a lot of integrations and @solidjs/testing-library, astro and a bunch of stuff just aren’t very compatible with each other. So I decided against it, and converted all SolidJS code to Vue.

Built with