kettle

Kettle is a front-end e-commerce practice project built with HTML, Bootstrap 5.3, and plain JavaScript. It lets people browse a coffee shop, add hot and iced drinks to a cart as a guest, and only has to log in once they reach checkout — a pattern closer to real stores like Amazon than the usual “login first” student project. Product data comes from a free, coffee-specific API (Sample APIs), while everything else — accounts, sessions, carts, and orders — is saved entirely in the browser’s localStorage, since there’s no backend or database involved. The site covers a landing page, registration and login, a filterable shop page with pagination, product detail pages with size- and milk-based pricing, a cart with a favourites filter, checkout, and an orders page showing order status. The result is a small but complete shopping flow that demonstrates real front-end patterns: client-side routing of access (guest vs. logged-in), state persisted across page loads, and data fetched live from an external API, all without needing a server.