- 4 stepscustom gift-box flow
- 3gift-box sizes
- PayPalonline payments
- RWDphone, tablet, desktop
Background
My capstone for iSpan's front-end engineering bootcamp: a complete online store for ShiYueGuo, a fictional Japanese sweets brand. I handled the visual design, front end, back end and database myself and deployed it, so you can sign up, place an order and pay with PayPal.
Features
Catalogue
Products load from the API and appear as category cards that open a detail page.
Accounts
Sign-in and sign-up share one page, with regex validation as you type and a password-strength hint.
Custom gift box
Four steps: choose one of three sizes → place sweets in the box → pick a card and message → confirm.
Checkout
Review the cart, recipient and payment method, pay with PayPal, then see the order and order history.
Architecture
Key design decisions
No plain-text passwords
Passwords are hashed with bcrypt before they reach the database and compared by hash at sign-in.
Sessions with JWT
A JWT is issued at sign-in, kept by the front end and sent with later requests for the API to verify.
Stop bad input early
Fields are validated as you type with a password-strength hint, cutting failed submissions.
Break a complex flow into steps
The gift box is four steps that each do one thing, confirmed together before going into the cart.
Be upfront about free-tier limits
Front end and API run as separate services with the database on Google Cloud SQL; the ~45-second cold start is stated on the site.