Web Development Project
E-Commerce Storefront
An e-commerce storefront is the most complete web project on this list because it contains every hard problem at once: search, cart state that survives a refresh, payment, inventory that must not oversell, and an order record that must never be wrong. Build it in test mode — no real money is needed.
The brief
Build a store where a visitor can browse, search, add to a cart, check out through Stripe test mode and see their order. Inventory must not go negative, and a repeated payment webhook must not create two orders.
What it demonstrates
That you can handle money-adjacent correctness — idempotency, race conditions and state that must reconcile with an external system.
What "done" looks like
Build all of these and the project is finished. Anything past that is in the stretch goals.
- Product catalogue with categories and search
- A cart that survives a refresh and a login
- Stripe test-mode checkout
- Order records with status, created reliably from webhooks
- Inventory that cannot go negative
- An admin view for products and orders
How to build it
- 1
Model the catalogue
Products, variants, prices and stock. Variants are where naive schemas break — a size and a colour are not two products.
- 2
Build browsing and search
Listing, filtering and a product page. Server-render these — they are the pages that need to rank.
- 3
Implement the cart
Persist server-side for logged-in users, in a cookie otherwise, and merge the two on login.
- 4
Price on the server
Never trust a price sent by the client. Recompute the total from the database at checkout, every time.
- 5
Wire up Stripe test mode
Create a checkout session server-side. Test cards cover success, decline and authentication without real money.
- 6
Handle webhooks idempotently
Verify the signature and store the event id, so a redelivered event does not create a second order.
- 7
Decrement stock transactionally
Same transaction as the order, with a constraint blocking negative stock. Checking then writing is a race.
- 8
Build the admin view
Authorise it properly — a hidden route is not access control, and this is where that lesson bites.
Once it works
Only after the definition of done is met. Half-finished ambition reads worse than a small finished thing.
- Add discount codes with validation rules
- Add order emails and a customer order-history page
- Add full-text or faceted search over the catalogue
Frequently Asked Questions
Do I need a real Stripe account?
A free one in test mode, which needs no business details and no real card. Test card numbers cover success, decline and authentication flows, so you can build and demonstrate the whole thing without money changing hands.
Why does idempotency matter here?
Payment webhooks are delivered at least once, so the same event can arrive twice. Without an idempotency key you create two orders and charge confusion into your data. Handling it is the single most important correctness lesson in this project.
How do I stop overselling?
Decrement stock inside the same database transaction that creates the order, with a constraint preventing it going negative. Checking availability and then writing in two steps is a race condition that appears the moment two people buy the last item.