Order App

A single-page food-ordering app built with Vue 3 and the Composition API. Customers browse a menu of dishes, add them to a cart, adjust quantities and place an order — with the cart state staying perfectly in sync across every part of the interface.

The project was an exercise in getting reactive state right: rather than passing the cart around through props or duplicating it in several components, everything reads from one central store.

• A product catalogue rendered as responsive cards, grouped by category
• A cart that any component can read from and write to without prop drilling
• A checkout flow with a live order summary and total
• Quantity controls that update the cart — and every dependent value — instantly

The cart lives in a single Pinia store as the one source of truth. Totals, item counts and the "cart is empty" state are all derived from it with computed properties, so there are never two numbers that can drift apart. Navigation between the menu, cart and checkout is handled by Vue Router, and the whole UI is styled mobile-first with Tailwind CSS.

Clean state management makes a UI feel trustworthy — when the cart badge, the summary and the checkout total always agree, the app just works. Deriving values instead of storing them was the key lesson here.