Full-Stack Calorie Tracker

A full-stack calorie and macronutrient tracking application built with a Java Spring Boot backend and a vanilla JavaScript frontend.

This project demonstrates REST API design, dynamic frontend rendering, client-side state management, user authentication, Docker deployment, and a responsive UI.

Live Demo and Preview

• Live demo: moustafa-calorie-tracker.onrender.com
• Related backend portfolio project: MandateIQ

Deployment note: the live demo is hosted on Render's free tier. It can take time to wake up, and may occasionally show Render's loading page before the app is available. The screenshots and GIFs below show the intended app behavior reliably.

Demo

Home Page

Adding Foods

Changing Settings

Creating Custom Foods

Recruiter Snapshot

Area	Evidence
Backend	Java 17, Spring Boot, REST controllers, Spring Data JPA, H2
Frontend	HTML, Tailwind CSS, vanilla JavaScript, dynamic DOM updates
Auth	Spring Security, JWT utilities, registration/login endpoints
Product logic	food search, food logs, custom foods, serving sizes, macro totals, TDEE calculator
Deployment	Dockerfile and Render deployment
CI	GitHub Actions workflow running the Maven test phase

Core Features

• Create, read, update, and delete food log entries and custom foods
• Built-in local food database with 50+ common foods
• Dynamic serving size adjustment with instant calorie and macro recalculation
• Daily food diary with totals for calories, protein, carbohydrates, and fat
• Macro progress visualizations
• Custom saved foods for repeat logging
• TDEE calculator for daily maintenance calorie estimates
• User settings for calorie and macro targets
• Responsive layout built with Tailwind CSS
• JWT-based authentication structure using Spring Security

Architecture

graph TD
    A[Browser UI] --> B[Vanilla JavaScript]
    B --> C[Spring Boot REST Controllers]
    C --> D[Repositories]
    D --> E[(H2 Database)]
    C --> F[Food Database JSON]
    G[JWT Filter] --> C

Loading

Tech Stack

Frontend

• HTML5
• Tailwind CSS
• Vanilla JavaScript
• Chart.js

Backend

• Java 17
• Spring Boot 3.2
• Spring Web
• Spring Data JPA
• Spring Security
• JWT via JJWT

Database and Deployment

• H2 in-memory database
• Docker
• Render
• GitHub Actions

Run Locally

Prerequisites:

• Java 17+
• Maven 3.9+

Clone the repository:

git clone https://github.com/Moustafa-Ameen/full-stack-java-calorie-app.git
cd full-stack-java-calorie-app

Run the app:

mvn spring-boot:run

Open:

http://localhost:8080

The project is self-contained and does not require API keys.

Testing and CI

Run the Maven test phase locally:

mvn test

CI runs the same Maven test phase on pushes and pull requests to main.

What I Learned

Building this app strengthened my understanding of:

• designing REST endpoints with Spring Boot
• connecting a Java backend to a JavaScript frontend through Fetch and JSON
• managing frontend state without a framework
• structuring a small full-stack app for deployment
• using Docker for repeatable hosting
• handling authentication flow with Spring Security and JWT utilities

Roadmap

• Add focused unit tests for controllers and repository behavior
• Move persistent user data from H2 to PostgreSQL
• Add weekly calorie trend charts
• Add a dark/light mode toggle
• Improve live deployment reliability beyond free-tier hosting

Author

Built by Moustafa Ameen.