A modern, offline-first meal planning and nutrition tracking application
MealCraft is a comprehensive meal planning application that helps you organize recipes, plan weekly meals, track daily nutrition, and manage your dietary goals. Built with modern web technologies, it runs entirely in your browser with local data storage, ensuring your meal plans and nutrition data remain private and accessible offline.
The application provides an intuitive interface for managing your culinary journey, from discovering and organizing recipes to planning weekly meal schedules and monitoring your nutritional intake against personalized targets.
Create and manage your personal profile with body parameters, activity level, and fitness goals. The app automatically calculates personalized daily nutrition targets (calories, protein, fats, carbohydrates) based on your profile data.
Build and maintain a personal recipe library with detailed nutritional information. Each recipe includes ingredients, instructions, serving sizes, and complete macronutrient breakdowns. Browse, search, and organize your favorite recipes for easy meal planning.
Plan your meals week by week with an intuitive calendar interface. Assign recipes to specific days and meal types (breakfast, lunch, dinner, snacks). Generate shopping lists automatically from your planned meals, copy meal plans between days, and view weekly nutrition summaries.
Log your daily meals and track your nutrition intake in real-time. View progress toward your daily targets with visual indicators for calories, protein, fats, and carbohydrates. Access detailed daily logs and historical nutrition data.
Export all your data (recipes, meal plans, tracker logs, profile, and targets) to a JSON file for backup or transfer. Import data to restore from backups or migrate between devices. All data remains local and private.
Switch between light and dark themes, or follow your system preferences. The application adapts to your preferred appearance for a comfortable viewing experience.
- Frontend Framework: React 18.3.1
- Build Tool: Vite 5.4.19
- Language: TypeScript 5.8.3
- Styling: Tailwind CSS 3.4.17
- UI Components: shadcn-ui (Radix UI primitives)
- State Management: React Query (TanStack Query)
- Routing: React Router DOM 6.30.1
- Data Storage: IndexedDB via idb 8.0.3
- Internationalization: react-i18next 15.1.2
- Form Handling: React Hook Form 7.61.1 with Zod validation
- Date Handling: date-fns 3.6.0
- Charts: Recharts 2.15.4
- Icons: Lucide React 0.462.0
- Node.js (v18 or higher recommended)
- npm (comes with Node.js)
Open PowerShell in the project directory and run:
# Install dependencies
npm install
# Start development server
npm run devThe application will be available at http://localhost:5173 (or the next available port).
# Create production build
npm run build
# Preview production build
npm run preview# Run linter
npm run lint
# Run tests
npm run test
# Run tests in watch mode
npm run test:watch
# Check i18n strings
npm run lint:i18nmeal-planner-pro/
├── public/ # Static assets
│ ├── favicon.svg
│ └── robots.txt
├── src/
│ ├── components/ # React components
│ │ ├── layout/ # Layout components (AppLayout)
│ │ └── ui/ # shadcn-ui components
│ ├── entities/ # Type definitions
│ │ └── types.ts # Shared TypeScript types
│ ├── hooks/ # Custom React hooks
│ ├── lib/ # Utility functions
│ ├── pages/ # Page components
│ │ ├── Dashboard.tsx # Overview and daily progress
│ │ ├── Profile.tsx # User profile and targets
│ │ ├── Recipes.tsx # Recipe collection
│ │ ├── RecipeDetail.tsx # Individual recipe view
│ │ ├── Planner.tsx # Weekly meal planning
│ │ ├── Tracker.tsx # Daily nutrition tracking
│ │ └── Settings.tsx # App settings
│ ├── shared/ # Shared code
│ │ ├── data/ # Seed data and fixtures
│ │ ├── hooks/ # Shared hooks (useStorage, useTheme)
│ │ ├── i18n/ # Internationalization
│ │ └── lib/ # Shared utilities
│ └── test/ # Test files
├── docs/ # Documentation
├── scripts/ # Build and utility scripts
└── index.html # Application entry point
graph TD
A[Start] --> B[Dashboard]
B --> C{User Action}
C -->|View Profile| D[Profile]
C -->|Browse Recipes| E[Recipes]
C -->|Plan Meals| F[Planner]
C -->|Track Nutrition| G[Tracker]
C -->|Configure| H[Settings]
D --> I[Set Body Parameters]
I --> J[Calculate Targets]
J --> B
E --> K[Recipe Detail]
K --> L{Action}
L -->|Add to Planner| F
L -->|Add to Tracker| G
L --> E
F --> M[Select Week]
M --> N[Assign Recipes]
N --> O[Generate Shopping List]
O --> F
G --> P[Select Date]
P --> Q[Log Meals]
Q --> R[View Progress]
R --> G
H --> S{Setting Type}
S -->|Theme| T[Change Theme]
S -->|Language| U[Change Language]
S -->|Export| V[Export Data]
S -->|Import| W[Import Data]
T --> H
U --> H
V --> H
W --> H
style A fill:#e1f5ff
style B fill:#fff4e6
style D fill:#f3e5f5
style E fill:#e8f5e9
style F fill:#fff3e0
style G fill:#e3f2fd
style H fill:#fce4ec
- Documentation Index - Complete documentation hub
- Features Overview - All application features and capabilities
- Data Storage - IndexedDB structure and data architecture
- Recipes - Recipe collection and management
- Meal Planner - Weekly meal planning workflow
- Nutrition Tracker - Daily nutrition tracking
- Export & Import - Data backup and restore
Built with ❤️ using React, Vite, and TypeScript