T-Mash Foods
From Instagram DMs to a full-stack e-commerce engine
View Live Site↗
Design System & Results
Background
#FCFBF8
Surface
#F5F3EC
Primary
#2D4A2D
Accent
#E6C326
On Surface
#0F1A0F
Muted
#75746C
Playfair Display
Primary
Inter
Secondary
Typography
Playfair Display at tight -0.04em tracking anchors hero and section headings, scaling responsively from 3rem to 6rem. Inter handles all UI and body text at weights 300–700, ensuring legibility across the admin dashboard and storefront alike.
E-Commerce / DTC
Key Components Built
Overview
The Challenge
T-Mash Foods was taking orders through Instagram DMs and manual Zelle transfers — a process that dropped 60%+ of interested buyers before they could pay. There was no product catalog, no order tracking, and the founder spent hours each day reconciling payments against screenshots in her camera roll.
Our Solution
We designed a warm, premium storefront anchored by an olive-and-gold palette that mirrors the brand's Nigerian heritage, paired with a zero-fee checkout flow built around Zelle and CashApp. A purpose-built admin dashboard gives the founder real-time order stats, one-tap payment verification against uploaded proof screenshots, and automated email notifications at every stage of fulfillment.
The Approach
React 19 + Vite + Tailwind CSS 4 on Vercel with a Firebase serverless backend. CSS keyframe animations for product reveals, Zustand for persistent cart state, and server-side price validation to eliminate checkout exploits.
Process
How we got here
Discovery & Audit
Mapped the founder's existing Instagram-to-Zelle workflow end-to-end to identify every drop-off point. Audited competitor DTC food brands and defined a conversion-first information architecture.
Design System & Prototyping
Established the olive-and-gold visual language with component primitives — Button, Card, Badge, Heading — each supporting multiple variants. Built high-fidelity prototypes for the storefront and admin dashboard simultaneously.
Full-Stack Engineering
Implemented the React 19 storefront with Zustand cart persistence and the Firebase serverless backend with six Cloud Functions. Hardened security across 14 identified vectors including price injection, XSS, and ownership verification.
Admin Tools & Launch
Built the full admin dashboard with real-time order feeds, payment verification, product CRUD, and contact message management. Deployed to Vercel and Firebase with zero-downtime cutover.
Gallery
A bold hero section with floating product imagery and dual CTAs drives visitors straight to the shop.
The admin dashboard surfaces real-time KPIs and payment-pending alerts so the founder never misses an order.
A streamlined mobile checkout with copy-to-clipboard payment details reduces friction on the dominant device.
Tomilola Ashiru
Founder, T-Mash Foods
I used to spend two hours a day matching Zelle screenshots to DM orders. Now payments verify in one click and customers get instant confirmation emails — I just focus on cooking.
Next Project
Helix Group
Full-stack web presence for India's integrated real estate delivery powerhouse
Want results like T-Mash Foods?
Let's build something worth showcasing.