English Bites
A storefront for high school English teaching resources.
Context
An English teacher needed a shop where other teachers can buy her Grades 9–12 English Language Arts resources, and where she can run the catalogue herself.
What was designed and built
- A catalogue with grade, resource-type and price filters, plus hubs for grades, free resources and WebQuests
- Product pages with "look inside" preview pages and a purchase panel
- Instant search that runs in the browser from a pre-built index
- Cart, checkout embedded in the site, and protected downloads
- Customer accounts with a library of everything they have bought
- An admin area to upload files, set prices and publish changes
Key design decisions
Big type, colour-coded grades
Oversized headlines and one colour per grade let a teacher find their year group at a glance, from the home page to every product card.
Checkout without leaving the shop
Payment opens inside the site’s own page, so buyers are never sent off to another domain to pay.
Shaped around a free hosting plan
Public pages are pre-built, the cart is a plain form and search runs in the browser, so browsing needs no paid server time.
A design system the build enforces
A check fails the build if shadows, gradients or blanket transitions creep in, and a script verifies the palette’s contrast.
Notable features
- Orders are priced on the server from product IDs; the browser never sets a price
- A signature-verified, retry-safe payment webhook that grants access only when the amount matches
- Paid files delivered through 60-second signed links, with download logging and rate limits
- A one-button “publish to the live site” panel for the owner
- Structured data, sitemap and robots rules for search
Stack
- Next.js 15
- React 19
- TypeScript
- Tailwind CSS 4
- Supabase
- Whop payments
- Resend
- Cloudflare Workers
Gallery
