Moonroot
A custom tea storefront with a simpler way to manage content.
Project Properties
- Project Type
- Independent Project
- Technologies
- Next.js, TypeScript, Tailwind CSS
- Status
- In development
The Opportunity
I've seen small-business owners outsource website development, then struggle to make routine updates themselves. Content management interfaces can feel unfamiliar or intimidating, so simple changes are delayed or require bringing in another developer.
Those observations led to the question guiding this project:
How might we make custom websites easier for nontechnical business owners to update without sacrificing design quality or requiring ongoing developer involvement for routine changes?
My working hypothesis is that a custom site can be both visually distinctive and straightforward for its owner to maintain. Moonroot, a botanical tea storefront, is where I'm exploring that hypothesis.
Moonroot is a self-initiated demonstration project, not an operating retail business.
Design Exploration
Using ChatGPT for brainstorming, I explored three directions for the product collection page:
Minimal Grid: clean, organized, and product-focused.
Featured + Details: more information displayed alongside each product.
Visual Cards: photography-led, expressive, and editorial.
I selected Minimal Grid for its clarity, its restrained presentation, and its alignment with Moonroot's identity.
Design Refinement
I then directed a series of refinements to the selected design. These were my creative decisions; Claude Code assisted with implementing them in code.
Square collection images. Collection images share a consistent square format.
Simplified product cards. Each card on the collection page carries only essential information, keeping the grid easy to scan.
Detailed individual pages. Full product details remain on each product's own page.
Cohesive photography. I selected and refined the product photography — public-domain (CC0) images from Wikimedia Commons — so the collection reads as a consistent set.
Refined footer. I refined the footer to suit the rest of the design.
A custom animated teacup. I introduced a custom animated teacup with moving steam.
Implemented so far:
- Next.js, TypeScript, and Tailwind CSS
- Reusable product components
- Local structured sample data for product content
- Responsive layouts for desktop and mobile
- The teacup and its steam as an SVG animated with CSS, with support for visitors' reduced-motion preference
Product content currently lives in the codebase as sample data. It is not yet editable by a nontechnical owner.
Each tea page's Add to Cart and Request a Sample buttons are placeholders: they show a "coming soon" notice, and no orders or personal data are collected.
Planned, and not yet implemented:
- Sanity CMS integration, so a nontechnical business owner can manage routine content without a developer.
- A sample-request workflow, connecting the site to a third-party API or CRM.
My role: I defined the requirements, set the creative direction, selected the design, reviewed the work, and tested it.
ChatGPT: Supported brainstorming and planning, including the three collection-page directions.
Claude Code: Assisted with implementation and technical checks.
AI-assisted development was part of the workflow, while I remained responsible for the project's direction, decisions, and evaluation of the results.
So far, Moonroot has a responsive storefront built on local sample data and deployed publicly through Vercel.
The project's central question — whether a nontechnical owner can maintain the site — remains open until the planned CMS integration is built and tested.