Bright Stone Ceramics
Personal project · React → Shopify migration concept
A personal project exploring e-commerce platform decisions — built first as a custom React frontend, then migrated to Shopify to demonstrate when a managed platform serves a small business better than a custom build.
React → Shopify — choosing the right tool for the right context
Password: zintow
Origin
- Personal Project
- Concept Store
MY Role
- React Frontend
- Shopify theme
- Migration
Stack
- React → Shopify
- Liquid
- Custom CSS
Scope
- Homepage
- Products
- Shopping Cart
Overview
Bright Stone Ceramics — Shopify build
A concept e-commerce store for a small ceramics business, used to explore a real question that comes up in professional web work: when does a custom React frontend serve a client better than a managed platform like Shopify — and when does it not? Building both versions gave a direct, practical answer.
“Building it in React first gave me a clear understanding of what Shopify handles out of the box — and why that matters for a small business that needs to manage its own store without developer involvement.”
React Version First
The custom frontend
The store was built first as a custom React frontend — component-based, fully controlled, with a clear separation of concerns. This version worked well technically but raised an immediate practical question: who maintains it when the developer isn’t available?
React build — custom components, full frontend control
- Component-based architecture — product card, cart, navigation built as reusable React components
- State management for the shopping cart — add, remove, update quantity without page reload
- Clean, maintainable code — but every content change requires a developer
The Migration Decision
Why Shopify made more sense
react Frontend
Custom build
- Full design control
- Custom component logic
- Developer needed for updates
- No built-in CMS or admin
- Payment/checkout built from scratch
Shopify
Managed Platform
- Client manages content independently
- Built-in product / order management
- Secure checkout out of the box
- Theme customisable without code
- Scales without developer involvement
For a small business owner selling ceramics, the React version created a dependency that didn’t serve the client. Shopify shifted that dependency — the client owns their store, manages their products, and processes payments without needing a developer on call.
Shopify Build
Theme development and scope
Scope: homepage, product pages and shopping cart completed
- Custom Liquid templates for homepage, collection and product pages — structured for client content management
- CSS custom properties for brand colours and typography — consistent with the React version’s visual design
- Shopping cart built to working state — add to cart, update quantity, remove items, running total
- Mobile-first responsive layout throughout
Project scope: homepage, product pages and shopping cart completed. Checkout flow not built — the focus of this project was platform comparison and theme development, not payment integration.
Skills Demonstrated
What this project shows
React component architecture and state management · Shopify Liquid templating · CSS across two different build environments · Platform evaluation and migration decision-making · Understanding of when a managed CMS serves a client better than a custom build — which is directly relevant to CMS management work.
Disclaimer: All content on this site is fictional and created solely to demonstrate website design. Product photos by Tom Crew on Unsplash and courtesy of Turning Earth Ceramics. Other photos by Taylor Heery and Anne Nygard on Unsplash.
Links
Password: zintow