Challenge Framing
The previous experience needed stronger product discovery, mobile-friendly commerce flows, centralized content management, order handling, stock control, role-based admin access, media management, and SEO readiness.
Hotzy Foods Full-Stack Commerce Platform
Hotzy Foods needed more than a visual redesign. I rebuilt the site as a product and operations platform where customers can discover sauces, add products to cart, check out, and track orders while administrators manage catalogue data, offers, stock, orders, users, moderators, and inquiries from protected workflows.
Case Study
Overview
Project Overview
What I built, the problem, and the solution
Rebuilt Hotzy Foods as a commerce and operations platform rather than a brochure site. The app combines product discovery, account-based cart and checkout, order history, contact inquiries, and protected admin workflows for catalogue, stock, offers, orders, users, moderators, and inquiries.
Solution Strategy
I used Next.js App Router with Server Components for data-heavy pages, Client Components for interactive forms and admin tools, Mongoose models for commerce entities, route handlers for backend workflows, JWT cookies for auth, server-side RBAC guards, Cloudinary for media, and cache revalidation for public catalogue freshness.
Project Highlights
Built a MongoDB-backed product catalogue with static fallback during migration.Implemented JWT authentication with user, moderator, and admin roles.Created admin workflows for products, stock, offers, orders, users, moderators, and inquiries.Designed checkout to re-check stock and update inventory during order creation.Added Cloudinary-backed product and offer image management.Implemented metadata, structured data, sitemap, robots, and dynamic product SEO.
Gallery
Product screens and workflow snapshots
Selected screens show the visible product experience and the operational surfaces behind each project. Projects without captured assets keep a structured placeholder until real screenshots are available.
Homepage and catalogue
Brand-forward public pages guide shoppers toward product discovery, trust signals, featured products, and category browsing.
Brand and trust sections
Supporting public sections present quality cues, ingredient promises, and brand story content in a shopper-friendly layout.
Cart and checkout readiness
Cart state, order readiness, and checkout affordances are designed around clear quantities, totals, and next actions.
Admin dashboard overview
The protected dashboard surfaces product, stock, offer, and operational summaries for administrators.
Product management
Catalogue operations include search, filtering, product status, stock visibility, media thumbnails, and row-level actions.
Order and account operations
Order exports, user management, moderator access, and support workflows sit inside the same protected admin surface.
Tech Stack
Built with tools chosen for reliability and iteration speed
Full-stack commerce architecture, server-side RBAC, MongoDB modeling, admin operations, inventory-safe order flow, and product discovery UX.
Frontend
- Next.js
- React
- TYTypeScript
- Tailwind CSS
- LRLucide React
Backend
- JWJWT
- BCbcryptjs
Data
- MongoDB
- MOMongoose
DevOps
- CLCloudinary
Key Features
Dynamic product catalogue
MongoDB product records power public shop and product pages, with search, filters, sorting, pagination, product facts, stock state, and static fallback during migration.
Inventory-aware checkout
Cart and checkout routes validate active products and current stock before creating orders, updating inventory, and clearing the cart.
Role-based admin dashboard
Protected dashboard workflows separate user, moderator, and admin responsibilities for product, stock, offer, order, inquiry, and account management.
Offer and media management
Admin users can manage promotions and upload product or offer images through Cloudinary-backed workflows with server-side validation.
Architecture
System architecture designed as a readable engineering story
Each layer stays explicit so reviewers can quickly understand where interface, orchestration, persistence, and service responsibilities live.
01
Frontend Layer
Next.js App Router pages combine server-rendered commerce data with client-side forms, cart controls, upload fields, maps, and admin table actions.
Next.jsReactTypeScriptTailwind CSS
02
Backend Layer
Route handlers provide auth, products, offers, cart, orders, admin workflows, image upload, contact inquiries, CSV export, validation, and cache revalidation.
App RouterJWTjosebcryptjs
03
Data Layer
MongoDB and Mongoose model users, products, offers, carts, orders, export logs, and contact inquiries with indexes and soft-deletion patterns.
MongoDBMongooseTransactions
04
Media and Operations
Cloudinary upload workflows manage product and offer images while protected admin screens keep operational data editable without source-code changes.
CloudinaryRBACAdmin Dashboard
System Flow
Key stages broken down as a readable execution path
The pipeline section keeps the most important engineering steps visible without collapsing them into generic bullet lists.
01
Browse
Customers request shop or product routes, and server helpers load MongoDB-backed catalogue data with static fallback for safer migration.
Server ComponentsProduct helpersMongoDB
02
Authenticate
Login and registration validate credentials, hash or compare passwords, sign JWT sessions, and use HTTP-only cookies for protected routes.
Route handlersbcryptjsjose
03
Checkout
Cart mutations and order creation re-check product state, update stock, create the order, and clear the cart through coordinated server logic.
Cart APIOrder APIMongoose
04
Operate
Admin and moderator users manage products, stock, offers, orders, users, moderators, and inquiries through protected dashboard workflows.
RBAC guardsAdmin UICache tags
Timeline
A case-study flow that explains how the system took shape
This timeline keeps the implementation story concise: what was framed first, what was hardened next, and what ultimately made the project production-ready.
01
Phase 01
Existing website audit
Reviewed the public commerce structure, product presentation, brand signals, cart/login affordances, and product discovery gaps.
02
Phase 02
Product and UX redesign
Defined the public experience around product discovery, trust signals, heat and use-case cues, mobile shopping, and contact paths.
03
Phase 03
Full-stack architecture
Built the App Router structure, MongoDB models, route handlers, auth, product helpers, cache strategy, and SEO infrastructure.
04
Phase 04
Admin and commerce workflows
Implemented product, stock, offer, order, user, moderator, inquiry, cart, checkout, image upload, and export workflows.
05
Phase 05
Verification and polish
Completed pagination, offer route optimization, role-boundary fixes, style fixes, lint checks, and production build verification.
Challenges
Technical constraints, decisions, and the reasoning behind them
Each challenge is tied to a concrete design choice and a specific outcome.
Solution
Public product helpers query MongoDB first and fall back to static scraped data when MongoDB is unavailable.
Outcome
The catalogue gained a safer path from static product data into managed commerce content.
Solution
Order creation re-checks stock and coordinates product updates, order records, and cart clearing on the server.
Outcome
Stock integrity is protected at the final write path instead of relying only on client-side state.
Solution
Added server-side guards, role-specific queries, and separated account management workflows.
Outcome
Protected dashboard behavior no longer depends on hidden UI controls alone.
Solution
Used route revalidation and cache tags that are invalidated after product and offer mutations.
Outcome
Public catalogue data can be cached without disconnecting from admin updates.
Results
Metrics and outcomes presented for quick technical review
The emphasis here is signal, not decoration: key numbers, verifiable outcomes, and the context needed to interpret them responsibly.
3
User Roles
User, moderator, and admin with server-side page and API checks.
7
Admin Modules
Overview, products, stock, offers, orders, inquiries, and user/moderator management.
7
Data Models
User, Product, Offer, Cart, Order, OrderExportLog, and ContactInquiry.
5
Core Flows
Catalogue browsing, authentication, cart, checkout, and protected admin operations.
Key Results
- Converted the product catalogue path toward MongoDB-managed content.
- Built a unified public commerce and protected admin platform.
- Added role-based authentication and server-side authorization.
- Implemented cart, checkout, order history, stock updates, and admin order workflows.
- Centralized products, stock, offers, users, moderators, orders, and inquiries.
- Verified the app with lint and production build checks.
Business Impact
Operational control
Products, stock, offers, orders, users, moderators, and inquiries can be managed from protected dashboard workflows.
Customer discovery
The public experience helps customers compare products by category, price, heat, use case, stock, and offers.
Data integrity
Checkout re-checks current product stock before order creation and inventory updates.
Growth path
The architecture leaves clear room for payments, notifications, analytics, monitoring, automated tests, and audit logs.
Continue