This document provides an overview of the My Fitness App repository, a React-based web application designed for recipe search and nutrition tracking. The application enables users to discover recipes, view detailed nutritional information, and manage their meal tracking for maintaining a healthy diet.
For detailed system architecture information, see System Architecture. For specific feature documentation, see Core Features. For development environment setup, see Development Setup.
My Fitness App is a single-page web application that serves as a comprehensive nutrition and recipe platform. The application targets users who want to make informed food choices by providing access to recipe databases with detailed nutritional information and meal tracking capabilities.
Primary Functions:
Recipe search and discovery Detailed nutritional information display Meal logging and tracking Mobile-responsive recipe browsing Target Users:
Health-conscious individuals seeking recipe inspiration Users tracking nutritional intake People looking for detailed ingredient and calorie information
The application is built using modern web development technologies with a focus on performance and maintainability.
Core Dependencies:
Category Technology Version Purpose Framework React 18.2.0 UI component library Language TypeScript 5.2.2 Type-safe JavaScript Build Tool Vite 5.2.0 Fast development server and bundler State Management Zustand 4.5.2 Client-side state management Routing React Router DOM 6.22.3 Single-page application routing Styling Tailwind CSS 3.4.1 Utility-first CSS framework Testing Vitest 1.4.0 Unit testing framework
Key Architectural Components:
main.tsx: Application bootstrap and React DOM integration MyRoutes: Central routing configuration using React Router useRecipeStore: Zustand store for search results and recipe list state useDetailStore: Zustand store for individual recipe detail management ErrorBoundary: React error boundary for graceful error handling External Recipe API: Third-party service for recipe data with authentication
Error Handling Strategy:
ErrorBoundary components wrap critical UI sections Error404 page for invalid routes API error states managed through Zustand stores Graceful degradation for failed data fetches For detailed feature documentation, see Recipe Details & Viewing and Recipe Search. For state management details, see State Management.
The project emphasizes modern development practices with a minimal dependency approach:
API Integration: Native fetch API instead of additional HTTP libraries State Management: Zustand for lightweight, efficient state handling Testing: Comprehensive testing setup with React Testing Library Code Quality: ESLint configuration with TypeScript integration Build Optimization: Vite for fast development and optimized production builds Project Scripts:
Script Command Purpose dev vite Start development server build tsc && vite build TypeScript compilation and production build lint eslint . --ext ts,tsx Code quality validation test vitest Run unit tests preview vite preview Preview production build For complete development setup instructions, see Development Setup and Project Configuration.