Calorie Tracker is a modern web application that helps users track their meals, analyze nutritional content, and maintain a healthy lifestyle. The app supports breakfast, lunch, dinner, and snacks tracking with image-based meal analysis.
Built with TypeScript, React, Supabase, Clerk, and n8n workflows for a seamless and intelligent experience.
- User Authentication with Clerk
- Meal Tracking for breakfast, lunch, dinner, and snacks
- Image-based Nutrition Analysis powered by n8n workflows
- Data Storage and retrieval using Supabase
- Responsive UI built with React and TSX
- Personalized Dashboard with nutritional insights
Dashboard/Landing Page:
Flow:
Login/Signup(Clerk)
Meal Summary:
Meal Logging:
N8N Flow:
| Layer | Technology |
|---|---|
| Frontend | React, TypeScript, TSX |
| Authentication | Clerk |
| Database | Supabase |
| Backend Workflow | n8n |
| Styling | Tailwind CSS |
| Deployment | Vercel / Netlify (optional) |
- Authentication: Users sign up or log in via Clerk.
- Meal Tracking: Users log meals manually or upload meal images.
- Image Analysis: n8n workflows process the uploaded image to extract nutritional data.
- Database Storage: Supabase stores the meal data and nutrition info.
- Dashboard: Users view daily, weekly, and monthly calorie intake with insights.
- **Streak System:**Implemented the streak system and providing various badges for the users.
- Node.js >= 18
- npm / pnpm / yarn
- Supabase account
- Clerk account
# Clone the repo
git clone https://github.com/Nish2005karsh/Calorie-tracker.git
cd Calorie-tracker# Install dependencies
npm install# Copy env variables
cp .env.example .env# Run locally
npm run devSUPABASE_URL=your_supabase_url
SUPABASE_ANON_KEY=your_supabase_anon_key
CLERK_FRONTEND_API=your_clerk_frontend_api
CLERK_API_KEY=your_clerk_api_keyFrontend: Vercel / Netlify
Backend Workflows: n8n hosted locally or on a server Database: Supabase