A daily fasting and health metrics tracking application built with Next.js 14+, React 18, and MongoDB.
- 📊 Track daily fasting windows with automatic duration calculation
- 🏋️ Monitor health metrics (weight, sleep, energy, hunger, well-being)
- 📝 Record food intake notes with expandable display (auto-truncates >300 characters)
- 📈 View historical data and trends
- 🎨 Beautiful Entry Details Page (Feature 025):
- Glassmorphic design with gradient backgrounds and soft blur effects
- Comprehensive view of all entry data with visual timeline
- Share button with Web Share API (native sharing on mobile/desktop)
- Edit/Delete action buttons with proper confirmation flows
- Entry navigation with prev/next arrows and keyboard shortcuts (← →)
- Responsive performance: <300ms cached page loads, ISR with 5-min revalidate
- Smart date display for midnight-crossing fasts (shows dates when needed)
- 🔍 Personal Insights & Comparisons:
- Personalized insights comparing each entry to your history
- Historical ranking (e.g., "Your #3 longest fast")
- Monthly achievements (longest fast this month)
- Average duration comparisons (overall, last 30 days, same day-of-week)
- Typical breakfast time patterns
- Daily streak tracking with current/longest streaks
- "Best Day" badges for exceptional performance
- Automatic unlock at 5+ entries (shows empty state before threshold)
- 🚀 Performance & Caching:
- ISR (Incremental Static Regeneration) with 5-minute page revalidation
- 30-minute insights cache with automatic invalidation
- 1-hour settings cache for user preferences
- Server-side performance logging with detailed metrics
- Aggressive cache revalidation on mutations (entries, dashboard, insights)
- Target: <500ms page load (200-300ms with cache hits)
- ⚙️ Configurable measurement units (metric/imperial) and time formats (12h/24h)
- 📱 Mobile-Optimized UX:
- Responsive 3-column table on mobile (Date, Duration, Actions)
- Full 8-column table on desktop
- Compact typography (14px body text on mobile, 16px on desktop)
- Mobile-friendly forms with vertical stacking and full-width buttons
- 44px minimum touch targets (WCAG AA compliant)
- Responsive breakpoint: 768px (mobile < 768px, desktop ≥ 768px)
- Native share sheet on mobile devices via Web Share API
- ♿ WCAG 2.1 Level AA accessible
- Framework: Next.js 14+ (App Router)
- Language: JavaScript ES6+
- Styling: TailwindCSS 3
- Database: MongoDB with Mongoose ODM
- Forms: React Hook Form
- Validation: Joi
- Testing: Jest + React Testing Library + Playwright
- Development: Test-Driven Development (TDD) with 80% coverage minimum
This application uses a mobile-first approach with Tailwind CSS responsive utilities:
- Breakpoint: 768px
- Mobile: < 768px (base classes apply)
- Desktop: ≥ 768px (md: prefix classes apply)
Mobile Optimizations (< 768px):
- Compact typography scale (14px body, 24px h1, 18px h2)
- 12px padding (p-3) for tighter layouts
- 3-column entry table (Date, Duration, Actions)
- Vertical form layouts with full-width buttons
- 44px minimum touch targets for accessibility
Desktop Experience (≥ 768px):
- Standard typography scale (16px body, 32px h1, 24px h2)
- 16px padding (p-4) for comfortable spacing
- 8-column entry table (full data visibility)
- Horizontal form layouts with auto-width buttons
- Optimized for mouse/trackpad interaction
Key Implementation Details:
- Pure CSS/Tailwind only (zero JavaScript media queries)
- Zero performance impact (no runtime calculations)
- WCAG 2.1 AA compliant touch targets (≥44px)
- Consistent 4.5:1 color contrast ratios
- Node.js 18+
- MongoDB (local or MongoDB Atlas)
- npm or yarn
- Clone the repository:
git clone https://github.com/DoubleAces/fasting.git
cd fasting- Install dependencies:
npm install- Set up environment variables:
cp .env.local.example .env.localEdit .env.local and add your MongoDB connection string:
MONGODB_URI=mongodb://localhost:27017/fasting-tracker
- Start the development server:
npm run devOpen http://localhost:3000 in your browser.
fasting/
├── src/
│ ├── app/ # Next.js App Router pages and API routes
│ ├── components/ # React components (atomic design)
│ │ ├── atoms/ # Basic building blocks (Button, Input, etc.)
│ │ ├── molecules/ # Simple component combinations
│ │ ├── organisms/ # Complex components (forms, lists)
│ │ └── templates/ # Page layouts
│ ├── lib/ # Utilities and business logic
│ │ ├── db.js # MongoDB connection
│ │ ├── models/ # Mongoose schemas
│ │ ├── utils/ # Helper functions
│ │ └── validation/ # Joi validation schemas
│ └── styles/ # Global styles
├── tests/ # Test files
│ ├── unit/ # Unit tests
│ ├── integration/ # API integration tests
│ ├── components/ # Component tests
│ └── e2e/ # End-to-end tests (Playwright)
├── public/ # Static assets
└── specs/ # Feature specifications and documentation
npm run dev- Start development server with Turbopacknpm run build- Build for productionnpm start- Start production servernpm run lint- Run ESLintnpm test- Run tests (to be configured)npm run test:watch- Run tests in watch mode (to be configured)npm run test:coverage- Run tests with coverage (to be configured)npm run test:e2e- Run E2E tests (to be configured)
This project follows Test-Driven Development (TDD):
- ✅ Write tests first (Red)
- ✅ Implement feature to pass tests (Green)
- ✅ Refactor code (Refactor)
See tasks.md for detailed implementation tasks.
- Feature Specification
- Implementation Plan
- Technical Research
- Data Model
- API Specification
- Development Tasks
- Quickstart Guide
- Mobile UX Specification
- Mobile UX Tasks
- Includes: Responsive table, compact typography, mobile-friendly forms
- Follow TDD principles (tests first!)
- Maintain 80%+ test coverage
- Ensure WCAG 2.1 AA compliance
- Use mobile-first responsive design
- Follow ESLint rules
Private project - All rights reserved.
Branch: 001-daily-fasting-tracker
Phase: Setup & Infrastructure
Progress: 1/60 tasks complete
See tasks.md for current progress.