Go back to projects
View external

Countlorie Calorie Tracker

#ProductDevelopment #Agile #Laravel #React #Flutter

Project Overview

Countlorie was a class-based group project developed through the Agile Product-Based Learning curriculum at Politeknik Elektronika Negeri Surabaya.

Countlorie Showcase

Our team identified a relatable problem: many young users enjoy food and drinks but do not consistently consider how their daily consumption may affect their long-term health.

We developed Countlorie to help users calculate a personalized calorie target, record their food consumption, and review how their daily intake compares with their goals.

The Problem

Daily calorie requirements are different for each person.

Countlorie uses information such as:

  1. Age and gender
  2. Body weight and height
  3. Physical activity level
  4. Weight-management goal

The system calculates an estimated daily calorie target and supports goals such as maintaining, reducing, or increasing body weight.

Users can then record meals under breakfast, lunch, dinner, or other consumption categories.

Product Approach

The product was developed through three repositories:

  1. Flutter Mobile Application Provides personal assessment, calorie tracking, consumption history, weekly analytics, profile management, and reminders.

  2. React Web Application Provides authentication, personal assessment, food recording, daily calorie monitoring, profile management, and weekly analytics through a browser.

  3. Laravel Backend API Manages users, assessments, food data, consumption records, calorie calculations, authentication, and analytics for the web application.

The main user flow was:

  1. Complete a personal assessment
  2. Receive an estimated daily calorie target
  3. Search or create food records
  4. Record food portions and meal categories
  5. Compare consumed calories with the daily target
  6. Review historical and weekly consumption patterns

Technical Implementation

Countlorie Architecture

Web Application

The web client was developed using:

  • React 18 and TypeScript
  • Vite for the build environment
  • React Router for application navigation
  • TanStack Query for server-state management
  • React Hook Form and Zod for form handling and validation
  • Recharts for consumption analytics
  • Tailwind CSS and reusable interface components

The web application contains protected routes for the home dashboard, assessment, food recording, profile, and analytics pages.

Backend API

The backend was developed using Laravel 11 and PHP 8.2.

It provides API endpoints for:

  • Registration, login, logout, and password recovery
  • Personal calorie assessments
  • Food search and custom food creation
  • Daily consumption records
  • Consumption editing and deletion
  • Historical and weekly calorie data
  • AI-generated summaries of weekly consumption

The calorie target is calculated from the user’s age, gender, weight, height, activity factor, and selected goal.

Food portions are converted proportionally into calorie and nutritional values before being stored as consumption records.

Mobile Application

The mobile application was developed using Flutter with BLoC and Cubit for state management.

Its features include:

  • Personal assessment
  • Daily calorie dashboard
  • Food and portion recording
  • Meal-category tracking
  • Consumption history
  • Weekly calorie analytics
  • Profile reassessment
  • Push and local notifications

The mobile implementation uses SQLite for local user, food, and consumption data. Firebase Cloud Messaging and local notifications are used to deliver reminders.

Agile Development Process

The project was developed iteratively through:

  • Product brainstorming
  • User interface design
  • Sprint planning
  • Stand-up meetings
  • Cross-platform development
  • Feature testing
  • Sprint reviews
  • Team retrospectives

The process required collaboration across product design, mobile, frontend, backend, and testing responsibilities.

My Contribution

I contributed across several areas of the project:

  • Designing user interfaces
  • Developing Flutter features
  • Developing React pages and components
  • Contributing to the Laravel backend
  • Testing product functionality
  • Participating in brainstorming and sprint activities
  • Joining stand-ups and retrospectives
  • Representing Countlorie at AT-Fest

Working across different roles gave me experience with the full product-development process rather than only one technical layer.

Tech Stack

  • Laravel
  • React
  • Flutter
  • MySQL
  • SQLite

Countlorie taught me that product development begins with understanding people’s daily habits, not with selecting a technology stack.