E-commerce Platform

A fully functional meal kit delivery platform that makes healthy cooking accessible and convenient. Features secure payments, real-time order tracking, and comprehensive admin dashboard for managing the entire business workflow.

Brief icon

Brief

Motivation

The meal kit delivery market in Nigeria was fragmented with poor user experiences and limited payment options. I wanted to create a comprehensive platform that would make healthy cooking accessible to busy professionals and families. The goal was to build a full-stack e-commerce solution that handles everything from product catalog to order fulfillment, with a focus on the Nigerian market's specific needs like Paystack integration and location-based delivery pricing.

Challenges

  • Complex order management with multiple meal kits and quantities
  • Secure payment processing with Paystack integration for Nigerian market
  • Location-based delivery pricing across different states and LGAs
  • Real-time order tracking and status updates
  • Comprehensive admin dashboard for business operations
  • Guest checkout support while maintaining order tracking
  • Email notification system for order confirmations and updates

Solutions

  • Built a sophisticated cart system with real-time price calculation and quantity management
  • Integrated Paystack payment gateway with proper webhook handling and transaction verification
  • Implemented dynamic delivery cost calculation based on state/LGA with configurable business rules
  • Created a comprehensive admin dashboard for order management, recipe CRUD, and business analytics
  • Developed a robust email notification system using Brevo with EJS templates
  • Designed a flexible user system supporting both registered users and guest checkout
  • Implemented Firebase Firestore for real-time data synchronization and scalable storage

Impact

NourishBox demonstrates a complete e-commerce solution from customer experience to business operations. The platform successfully handles the entire meal kit delivery workflow, from browsing recipes to order fulfillment, with proper payment processing and customer communication. The admin dashboard provides business owners with complete control over their operations, while the customer-facing features ensure a smooth shopping experience.

Architecture icon

Architecture

System Overview

NourishBox follows a modern full-stack architecture with Next.js 15 frontend, Firebase backend services, and integrated third-party services. The system is designed for scalability and real-time operations, using Firebase Firestore for data persistence, Firebase Storage for media, and Next.js API routes for server-side logic.

System Flow

Customer browses meal kits → adds to cart with quantities → proceeds to checkout (guest or registered) → payment processed via Paystack → order created in Firestore → email confirmations sent → admin processes order → delivery status updated → customer receives notifications → order completed with review system.

Technology Choices

Backend

FirebaseFirebase

Firebase provides real-time database, authentication, and storage in one platform, perfect for e-commerce applications requiring real-time updates

REST APIREST API

RESTful API design for predictable integration with payment gateways and third-party services

Frontend

Next.jsNext.js

Next.js 15 with App Router provides excellent SEO capabilities, server-side rendering, and built-in optimization features crucial for an e-commerce platform

TypeScriptTypeScript

Type safety is essential for e-commerce applications to prevent runtime errors in payment processing and order management

Tailwind CSSTailwind CSS

Rapid development and consistent styling system for building responsive e-commerce interfaces

Shadcn UI

Pre-built accessible components that accelerate development while maintaining design consistency

Framer Motion

Smooth animations and transitions that enhance user experience in the shopping flow

Database

FirebaseFirebase

Firestore's real-time capabilities and scalability make it ideal for e-commerce applications with dynamic inventory and order tracking

Payments

Paystack

Paystack is the leading payment gateway in Nigeria, providing secure payment processing with excellent developer experience

Communication

Brevo

Reliable email service for order confirmations, status updates, and customer communication with professional templates

EJS

Template engine for creating dynamic email templates with order details and customer information

Storage

Cloudinary

Cloud-based image and video management with automatic optimization and transformation for e-commerce media

Deployment

Vercel

Seamless deployment with automatic scaling, perfect for e-commerce applications with variable traffic

Key Features

  • Advanced shopping cart with real-time price calculation
  • Secure payment processing with Paystack integration
  • Location-based delivery pricing system
  • Real-time order tracking and status updates
  • Comprehensive admin dashboard for business operations
  • Guest and registered user checkout flows
  • Email notification system with professional templates
  • Review and rating system for meal kits
  • Media management with Cloudinary integration
Challenges & Solutions icon

Challenges & Solutions

Challenge Overview

Building a complete e-commerce platform required solving complex challenges around payment processing, real-time data synchronization, and business operations management. Each challenge required careful consideration of user experience, security, and scalability.

1

Complex Shopping Cart with Real-time Pricing

Implementing a sophisticated cart system that handles multiple meal kits with different quantities, calculates delivery costs based on location, and applies business rules like taxes and fees in real-time.

2

Secure Payment Integration with Paystack

Integrating Paystack payment gateway with proper webhook handling, transaction verification, and error handling for the Nigerian market.

3

Real-time Order Management System

Creating a system where orders are processed in real-time, status updates are synchronized across admin dashboard and customer notifications, and inventory is properly managed.

4

Comprehensive Admin Dashboard

Building a complete admin interface for managing recipes, orders, users, business rules, and analytics while maintaining security and usability.

5

Location-based Delivery Pricing

Implementing dynamic delivery cost calculation based on Nigerian states and LGAs with configurable business rules.

6

Email Notification System

Creating a reliable email system for order confirmations, status updates, and customer communication with professional templates.

Key Learnings

These challenges required deep understanding of e-commerce workflows, payment processing, real-time data management, and user experience design. The solutions implemented provide a robust foundation for a scalable meal kit delivery business.