Project and role
Torch Republic commerce application
The flagship case study presents the creation and refinement of an AI-assisted e-commerce system built with Base44 and React, connected to Shopify for live product information, cart creation, and secure checkout. The stated challenge was not simply to generate a storefront, but to continuously evaluate generated output against business requirements, catch defects, validate fixes, and improve product, content, navigation, mobile, and conversion experience.
Role: Founder · Product builder · E-commerce QA
Business and product requirements
Present a focused product line with clear pricing and product information. Enable online purchasing through Shopify-hosted cart and secure checkout. Support both one-time and subscription purchases. Provide a responsive customer experience across mobile and desktop. Maintain accurate metadata and structured data for search visibility.
Interface gallery
Captures from the live application
Mobile views of the published storefront. Select any image to open it full size.
What it does
The live storefront today
The application at torchrepublic.com presents a focused product line, supports online purchasing through Shopify, and provides content that helps customers understand and compare the products.
Core products
Two instant coffee products with dedicated detail pages, pricing, and preparation instructions
Shopping flow
Shop page, product detail pages, cart, and Shopify-hosted checkout
Content
Brand story, product comparison, brewing guide, and customer feedback sections
Responsive
Mobile and desktop layouts with adaptive navigation and touch-friendly controls
System overview
How the application is structured
1
Customer
The end user browsing and purchasing
2
Storefront / UX
Mobile and desktop browsing experience
3
Product & Content System
Custom interface, content, customer interactions, and application state
4
Commerce workflows
Cart and checkout integration
5
Customer / loyalty / subscription
Post-purchase experience and recurring commerce
6
Analytics & feedback
Measurement, interpretation, and reporting
7
QA + iteration
Testing, defect resolution, and continuous improvement
The custom application does not collect or store payment-card information. Shopify handles all payment processing through its secure checkout.
My responsibilities
Where I contributed
Strategy & architecture
- Strategy, requirements, and architecture decisions
- Product taxonomy and content architecture
- Conversion optimization and iterative redesign
Product decisions
- Product line definition and pricing structure
- Brand direction and customer-facing content
- Page structure and customer journey design
AI-assisted implementation
- Prompt specifications for component and page generation
- Review and validation of AI-generated output
- Correcting defects introduced during implementation
Configuration
- Shopify integration settings and product data mapping
- Centralized pricing, content, and site configuration files
- Metadata, structured data, and analytics event setup
Hands-on QA
- Customer-journey testing from discovery through checkout
- Responsive review across desktop, tablet, and mobile
- Defect documentation, troubleshooting, and regression testing
AI-assisted tools produced portions of the implementation. My responsibility was reviewing, testing, and validating the output rather than writing every line of code manually.
Selected defects
Four issues investigated and addressed
Each entry shows the observation, the action taken, and the type of evidence reviewed. Code review establishes what the implementation contains; it does not by itself confirm that the live customer journey passed testing.
Broken product imagery
Observation
Stale hardcoded image URLs caused broken product image states across product, collection, and gallery views.
Action
URLs were removed and standardized to verified-working asset sources. Product, collection, and gallery views were then rechecked.
Implementation evidence
Code review confirms image URLs were replaced with verified Base44 media and Shopify assets. Visual recheck of key views confirmed images render. This establishes what the code contains; it does not confirm every image across every route was verified.
Legacy product names at checkout
Observation
Collection pages passed retired catalog data to the cart, causing legacy product names to appear at checkout instead of current names.
Action
Grids and routes were simplified, retired catalog references were removed, and items were re-added to the cart to confirm current naming throughout the purchase flow.
Implementation evidence
Code review confirms a simplified product data flow from current catalog sources to cart line items. Cart re-add testing confirmed current names display. This describes the code path; exhaustive checkout testing across all products was not documented.
Discontinued category routes
Observation
Retired category URLs produced 404 errors or served stale pages, creating poor user experience and crawl issues.
Action
301 redirects and 410 (Gone) responses were added for discontinued apparel, collectible, and category routes. Legacy URLs were then retested to confirm correct redirect behavior.
Implementation evidence
Code review confirms redirect and 410 routes are configured for discontinued paths. Retesting confirmed legacy URLs redirect or return 410 as intended. This verifies route configuration; search-engine reindexing was not confirmed.
Mobile product hierarchy
Observation
On mobile, the primary action and key product information risked being hard to identify due to layout hierarchy and spacing.
Action
Hierarchy, spacing, and responsive behavior were adjusted across breakpoints. Mobile product pages were retested to confirm the primary action and key information are clearly visible.
Implementation evidence
Code review confirms adjusted responsive classes and layout hierarchy for mobile breakpoints. Retesting across mobile widths confirmed improved visibility. This describes the implementation; formal multi-device testing was not documented.
Reusable components
Patterns that can be adapted for other storefronts
The custom customer interface is separated from Shopify’s underlying product, cart, and checkout services. Product displays, cart behavior, content sections, analytics events, and Shopify integration logic are organized as reusable patterns that can be revised for additional products or adapted to other direct-to-consumer brands.
- Product and collection presentation
- Cart creation and state management
- Shopify checkout handoff
- Loading, empty, success, and error states
- Analytics event patterns
- Configurable brand and product content
The codebase is maintained in version control, allowing tested components and system patterns to be restored, revised, and reused in future commerce projects.
Outcome
What the project demonstrates
Torch Republic demonstrates the ability to move from an ambiguous business concept to a live commerce application while maintaining responsibility for requirements, output review, customer experience, defect identification, and final quality.
The project connects AI-assisted implementation with the human judgment required to determine whether the result is accurate, coherent, usable, and ready for customers.
← Back to portfolio