MealLog - Family Meal Planning & Tracking

MealLog is a comprehensive full-stack family meal planning and child food tracking application designed to simplify the complexities of feeding a family. I built this application to help parents organize recipes, plan weekly meals, and track their children's dietary habits in one secure, offline-capable place.

Project Overview

Managing family meals involves more than just cooking—it requires planning, shopping, and often tracking specific dietary needs or preferences for children. MealLog consolidates these tasks into a mobile-first experience that works seamlessly whether you're in the kitchen or at the grocery store without a signal.

Key Features

Intelligent Recipe Management

A centralized hub for all family recipes that supports:

Rich Details: Store cooking times, difficulty levels, and allergen warnings.
Multimedia Integration: Embed video tutorials directly from YouTube.
Smart Organization: Tag and categorize recipes for easy retrieval.
Random Recipe Picker: Get meal suggestions with optional meal type filtering.

Interactive Weekly Planner

A mobile-friendly weekly planner interface that allows families to:

Plan breakfast, lunch, dinner, and snacks for the entire week.
Generate per-person meal plans to accommodate different family members.
Quickly search and assign recipes with category filters.
Visual meal count indicators per day with animated transitions.

Child Food Tracking

A dedicated log for monitoring children's eating habits:

Portion & Preference: Track how much was eaten (full, half, little, none) and the child's reaction (liked, neutral, disliked).
Health Monitoring: Log allergic reactions or stomach upset with notes.
History & Analytics: View eating patterns, preference trends, and favorites over time.

Smart Shopping Lists

Automated grocery list generation based on the weekly plan:

Category Sorting: Items are automatically grouped by aisle (Produce, Dairy, etc.).
Manual Additions: Easily add household essentials alongside recipe ingredients.

Technical Architecture

Backend (Go/Fiber)

The REST API is built with Go for high performance and type safety:

Framework: Fiber v2 - Express-like web framework with excellent performance.
Database: PostgreSQL 16 with GORM for ORM, hosted on Neon (production).
Authentication: Clerk JWT verification middleware for secure API access.
Image Storage: Cloudflare R2 with presigned URL uploads for recipe images.
Architecture: Clean separation with handlers, services, and repository layers.

Frontend (Next.js 16)

A modern React application with server-side rendering:

Framework: Next.js 16 with App Router for routing and SSR.
Styling: Tailwind CSS v4 with custom design system (mobile-first, 430px max-width).
Components: ShadCN UI + Radix UI primitives for accessible, high-quality components.
Animations: Framer Motion with spring physics and Cult UI for polished interactions.
State Management: TanStack Query (React Query) for server state, React Hook Form + Zod for forms.
Authentication: Clerk (@clerk/nextjs) for user management.

Infrastructure

Both frontend and API are deployed on VPS using Docker containers, with PostgreSQL for the database and Cloudflare R2 for image storage.

Design Philosophy

MealLog follows a mobile-first, mobile-only approach—forcing a phone-sized layout (430px max) even on desktop browsers. This ensures consistency and focuses development effort where users actually interact with the app: on their phones in the kitchen.

Key design decisions:

No shadows: Clean borders with border-border/60 for depth.
Warm color palette: Coral (#FF6B5B) for CTAs, Sage Green (#7FA884) for success states.
Spring animations: Natural feel with stiffness: 300, damping: 24.
Large touch targets: Minimum 44x44px for all interactive elements.

Results

MealLog transforms the chaotic process of family meal management into a streamlined, enjoyable experience. The full-stack architecture ensures fast, reliable performance while the mobile-first design serves the real-world needs of busy parents—whether they're planning meals at their desk or checking recipes at the grocery store.