SleepOutside - Outdoor E-commerce

The problem

Frameworks do a lot of invisible work: rendering on state change, routing, keeping the cart in sync across pages. Building a complete store without one means every piece of that has to be written and understood explicitly. That is the point of the exercise, and it is also where the real questions appear: where does cart state live between page loads, how does a multi-page checkout survive a refresh, and what happens when the product API is slow or fails.

Approach

• The application is split into ES modules with clear responsibilities: product listing, product detail, shopping cart, checkout process and a services layer, rather than one script per page.
• All network access goes through a single external services module, so the API base URL is configurable through an environment variable and every request shares the same error handling.
• Responses are validated before use: a non-OK status throws with the status text, and malformed JSON is caught and reported instead of failing silently deeper in the UI.
• Cart state persists in localStorage, so the cart survives navigation and refreshes across a multi-page store without a server session.
• The checkout process is its own module handling totals, tax and shipping separately from the cart display.
• The build is bundled with Vite and deployed as a static site, with unit tests on the product logic.

What it proves

• Complete store flow: listing, product detail, cart and checkout, all in vanilla JavaScript.
• Cart survives page navigation and refreshes via localStorage.
• Network failures surface as handled errors rather than silent breakage.
• Deployed as a static build, consuming a live product API.