Latice
×
Personal Project

Case study

How to Masala

Description
Year
2026
Services
Full-Stack Development, Product Design, Content Architecture, CMS Integration
Client
Personal Project
The Problem

Indian cooking education has a gap. Cookbooks give you recipes but not understanding. YouTube gives you technique but not structure. There was no single product that treated Indian food as a complete system — one where 26 core spices, six flavor categories, and centuries of regional technique connect into a learnable framework. The challenge was building something with real educational depth while shipping fast enough to validate the idea. Every day without a product was a day without signal.

The Solution
A full-stack React + Express platform with real substance

The answer was a vertical slice through every layer of the product at once — authentication, payments, content, and curriculum — all built in parallel rather than sequentially. React 18 with Vite on the frontend. Express with PostgreSQL on the backend. Google OAuth for login. Stripe for subscriptions. Sanity.io for content management. All deployed on Render.

The visual identity was designed to evoke a spice market: a dark warm palette (#100F0D background, #C2703E copper accent), Instrument Serif for editorial authority, DM Mono for technical precision. Every one of the 26 spices received its own color — Kashmiri Chili is #B83230, Saffron is #C4782A, Curry Leaves is #3A6B30 — turning the UI into a sensory map.

The Curriculum Engine:

Three hand-crafted 12-week learning plans — beginner, intermediate, advanced — each week containing 400-600 words of expert-level cooking education. The initial approach used AI-generated personalized plans, but on Day 5 this was replaced with rich static curricula. The product found its voice when it stopped being an AI novelty and became a substantive cooking education with real authority.

The curriculum covers everything: spice cabinet fundamentals, the onion-tomato base, heat and chili mastery, regional techniques from Punjab to Chettinad, bread and rice, street food, pickles, sweets, and finally — cooking without recipes at all.

No items found.

Progressive Disclosure:

Content unlocks as you advance. Recipes are gated by week. Spice lessons connect to related recipes. This mirrors how actual cooking education works — you need to understand tempering before you can make a proper dal. The free tier gives you the entire Heat spice category (Kashmiri Chili, Byadgi Chili, Green Chili, Black Pepper, Long Pepper) and Week 1 — substantial enough to demonstrate real value without giving away the whole curriculum.

Progress tracking persists across sessions via PostgreSQL, with optimistic UI updates and rollback on failure. The lesson interface uses tabbed navigation across spice sections with accordion-style content blocks — expandable, completable, and visually anchored by each spice's color swatch.

Security-First Architecture:

Security headers were baked in from Day 1, not bolted on after. Full Content Security Policy, HTTP-only JWT cookies, HSTS, X-Frame-Options DENY, 10kb body limits, and Stripe webhook signature verification. The admin dashboard at /admin provides user management and analytics behind its own CSP policy. This is a real product with real payment processing — security was non-negotiable.

Sanity.io CMS was integrated on Day 6 to separate content from code. All 26 spice lessons were enriched to a full 5-block structure and managed through Sanity Studio v5.18 with React 19. This means content updates ship without code deploys — a real editorial workflow for a solo creator.

HowToMasala landing page on MacBook Pro desktop with plant
HowToMasala on iPad in kitchen cooking setting
HowToMasala mobile view on iPhone 16 wooden surface
No items found.

The Build Arc:

22 commits across 8 days. Days 1-2: the full product loop (auth, payments, progress tracking, deployment). Days 3-4: landing page, content, mobile polish. Day 5: the pivot from AI generation to hand-crafted curricula. Day 6: CMS integration. Days 7-8: progressive disclosure, admin dashboard, and all 26 spice lessons enriched to their final form.

The result: a production application with a landing page that sells, a 12-module curriculum with real educational depth, Google OAuth + Stripe subscriptions, progress tracking, an admin dashboard, a CMS for content at scale, and a visual design language rooted in the subject matter itself. One person, 8 days, a product that could ship to paying customers today.

Credits
Client
Latice
Recognition
Awards
Testimonial
More Work