A modern, responsive web application for tracking daily calorie intake and managing meal plans. Built with React and featuring both desktop and mobile-friendly interfaces, BurnBook helps users maintain their nutritional goals with ease.
-
Responsive Design
- Automatic detection between desktop and mobile views
- Optimized interface for both platforms
- Seamless transition between devices
-
Core Functionality
- Daily calorie tracking
- Meal planning and management
- Weight tracking with progress visualization
- Custom meal entries and favorites
- Comprehensive dashboard
Visit the live application at: BurnBook App
- Frontend Framework: React 18
- Routing: React Router v6
- Data Visualization: Recharts
- Build Tool: Vite
- Deployment: Vercel
- Styling: Custom CSS with responsive design
Before running this project, ensure you have:
- Node.js (v14 or higher)
- npm (v6 or higher)
- Clone the repository:
git clone https://github.com/RackyAllen/BurnBook.git
cd BurnBook- Install dependencies:
npm install- Start the development server:
npm run devThe application will be available at http://localhost:3000
Create a production-ready build:
npm run buildThe optimized files will be generated in the dist directory.
BurnBook/ ├── src/ │ ├── components/ # Reusable UI components │ ├── screens/ │ │ ├── Desktop/ # Desktop view components │ │ │ ├── DesktopDashboard/ │ │ │ ├── DesktopLogin/ │ │ │ └── ... │ │ └── Mobile/ # Mobile view components │ │ ├── MobileDashboard/ │ │ ├── MobileLogin/ │ │ └── ... │ ├── utils/ # Utility functions │ ├── App.jsx # Main application component │ └── main.jsx # Application entry point ├── static/ # Static assets ├── index.html # HTML entry point └── vite.config.js # Vite configuration
- Full-width dashboard with comprehensive statistics
- Easy-to-use meal entry system
- Detailed weight tracking interface
- Settings management
- Streamlined interface for on-the-go tracking
- Quick meal entry
- Simplified dashboard
- Touch-optimized controls