A fun, educational web game that teaches children about nutrition and healthy eating through interactive calorie climbing gameplay. Built with React, TypeScript, and integrated with the USDA Food Database for accurate nutritional information.
Calorie Climb is an educational game where kids feed a virtual character different foods, learning about calories and nutrition in the process. The goal is to "climb" the calorie ladder by choosing foods with progressively more calories while keeping the character healthy and happy.
- 🥗 Real Food Data: Uses the official USDA Food Data Central database
- 🤖 AI-Enhanced Learning: Educational feedback powered by OpenAI
- 🎮 Gamified Education: Makes nutrition learning fun and engaging
- 👨👩👧👦 Family Friendly: Safe, kid-appropriate content with alcohol filtering
- 📱 Responsive Design: Works on desktop, tablet, and mobile devices
- 🔍 Food Search: Explore thousands of foods with detailed nutrition information
Visit the live application: https://calorieclimb.com
- Frontend: React 18 with TypeScript
- Styling: Tailwind CSS
- Routing: React Router
- Icons: Lucide React
- APIs: USDA Food Data Central, OpenAI
- Build Tool: Vite
- Deployment: Netlify
- Node.js (version 18 or higher)
- npm or yarn package manager
-
Clone the repository
git clone [repository-url] cd calorie-climb -
Install dependencies
npm install
-
Set up environment variables (optional but recommended)
cp .env.example .env
Add your API keys to
.env:VITE_USDA_API_KEY=your_usda_api_key_here VITE_OPENAI_API_KEY=your_openai_api_key_here VITE_GA_MEASUREMENT_ID=your_ga_measurement_id_here
-
Start the development server
npm run dev
-
Open your browser to
http://localhost:5173
The app works in offline mode without API keys, but for the full experience:
- USDA API Key: Get free access at USDA Food Data Central
- OpenAI API Key: Sign up at OpenAI Platform
- Google Analytics: Create a GA4 property for analytics
- Start with Water: The game begins with the character drinking water (0 calories)
- Choose Foods: Type in food names to feed the character
- Climb the Ladder: Each new food must have more calories than the previous one
- Stay Healthy: Keep the character healthy and happy with good food choices
- Reach the Goal: Try to reach the calorie limit while maintaining good health
- Online Mode: Access to 300,000+ foods from the USDA database with AI feedback
- Offline Mode: Curated list of common foods with basic educational content
src/
├── components/ # Reusable UI components
│ ├── Character.tsx # Animated character display
│ ├── GameInterface.tsx # Main game controls
│ ├── GameStats.tsx # Score and progress tracking
│ ├── FoodHistory.tsx # Food consumption history
│ └── Navigation.tsx # App navigation
├── pages/ # Page-level components
│ ├── GamePage.tsx # Main game page
│ ├── FoodSearchPage.tsx # Food database explorer
│ └── AboutPage.tsx # About and information page
├── services/ # External API integrations
│ ├── usdaApi.ts # USDA Food Database API
│ └── openaiApi.ts # OpenAI API
├── utils/ # Utility functions
│ ├── foodService.ts # Food search and management
│ ├── gameLogic.ts # Game rules and calculations
│ ├── foodDatabase.ts # Offline food database
│ ├── analytics.ts # Google Analytics integration
│ └── envConfig.ts # Environment configuration
└── types/ # TypeScript type definitions
└── game.ts # Game-related types
npm run dev- Start development servernpm run build- Build for productionnpm run preview- Preview production buildnpm run lint- Run ESLint
- Visual representation of health, happiness, and fullness
- Dynamic expressions based on food choices
- Size changes based on calorie consumption
- Generic Foods: Common foods like "apple", "chicken breast"
- Branded Foods: Specific products with brand names
- Nutritional Data: Calories, nutrients, serving sizes
- Safety Filtering: Automatic removal of inappropriate content
- AI-generated explanations about food choices
- Health ratings for different foods
- Positive reinforcement for healthy choices
- Learning about portion sizes and nutrition
- Keyboard navigation support
- Screen reader friendly
- High contrast color schemes
- Mobile-responsive design
We welcome contributions from developers, educators, nutritionists, and parents! See CONTRIBUTING.md for detailed guidelines.
- 🐛 Report bugs or suggest features
- 💻 Submit code improvements
- 📚 Improve documentation
- 🎨 Enhance design and user experience
- 🍎 Suggest educational content improvements
This project is open source and available under the MIT License.
- Not Medical Advice: This app is for educational purposes only and is not medical advice
- AI-Generated Content: Food descriptions are generated by AI and should be validated
- Parental Guidance: Designed for kids but parental supervision is recommended
- Content Filtering: While we filter inappropriate content, please report any issues
- USDA Food Data Central: For providing comprehensive food nutrition data
- OpenAI: For educational content generation
- React Community: For the amazing ecosystem and tools
- Contributors: Everyone who helps make this project better
- Issues: Report bugs or request features on GitHub
- Questions: Use GitHub Discussions for general questions
- Security: Report security issues privately via email
Made with ❤️ for kids and families who want to learn about nutrition in a fun way!
"Teaching kids about nutrition, one calorie at a time!" 🍎✨