Drink Timeline Tracker

A personal full-stack drink logging app that turns everyday beverages into a visual timeline, collection, and lightweight habit tracker.

Live project: https://drink-tracker-ak.vercel.app/

Drink Timeline Tracker started as a small hobby project for recording drinks, calories, volume, caffeine, and notes over time. Instead of treating the data like a spreadsheet, the app presents each drink as a visual item on a horizontal timeline, with reusable presets, image uploads, background removal, cropping tools, monthly summaries, medals, and an admin-only editing flow.

This is both a personal tracking app and a learning project for building a polished full-stack Next.js app.

---

What It Does

Drink Timeline Tracker helps you record and review your drink history in a more visual way.

You can:

• Log drinks from reusable presets
• Track consumed time, volume, calories, caffeine, and notes
• Browse drink records on a horizontal timeline
• Group records by day and month
• Upload and edit drink images
• Remove image backgrounds for cleaner drink icons
• Crop drink images before saving
• View monthly summaries and hover details
• Collect medals based on drinking history
• Keep old drink records historically accurate even after presets are edited
• Share the timeline publicly in read-only mode while keeping editing tools protected

---

Feature Highlights

Visual Drink Timeline

The main view is a horizontal timeline of your drink history.

Features include:

• Horizontally scrollable timeline
• Daily grouping by date
• Month markers
• Background month watermark
• Jump-to-date control
• Today shortcut
• Drink detail preview on hover or click
• Keyboard navigation support
• Drag-to-pan interaction
• Custom timeline scrollbar

The goal is to make personal data feel more like a visual diary than a table.

---

Drink Logging

You can add drink records from saved presets.

Each log can store:

• Drink name
• Category
• Consumed time
• Volume
• Calories
• Caffeine
• Notes
• Image
• Color

Existing records can be edited or deleted when needed.

---

Historical Snapshot Records

Each drink log stores a snapshot of the preset at the time it was recorded, including name, category, color, and image.

That means old logs remain historically accurate even if the original preset is renamed, recolored, edited, replaced, or disabled later.

For example:

You log "Black Coffee" in May
→ Later you rename the preset to "Americano"
→ The old May record can still remember it as "Black Coffee"

---

Drink Preset Library

The preset library lets you create reusable drink templates.

Preset fields include:

• Name
• Category
• Default volume
• Default calories
• Default caffeine
• Color
• Image
• Active / inactive status

Presets can be filtered by category and edited over time.

Soft-deleting presets by marking them inactive helps preserve old data while keeping the add-drink menu clean.

---

Image Tools

Image Uploads

Drink preset images are uploaded to Vercel Blob in production.

The app stores the returned public image URL in the database, so uploaded images continue to work after deployment.

Recommended production flow:

User uploads image
→ Server action receives image
→ Image is stored in Vercel Blob
→ Blob URL is saved to the database
→ App displays the image from the saved URL

---

Background Removal

The app supports image background removal for drink preset images.

This is useful when you want drink icons to look cleaner on the timeline, especially if the original photo has a messy table, wall, package background, or lighting distraction.

Good use cases:

• Turning a drink photo into a cleaner icon
• Removing white or noisy backgrounds
• Making timeline items feel more consistent
• Preparing images for collection-style display

The app uses browser-side background removal tooling, so the editing flow feels more immediate and personal.

---

Image Cropping and WebP Preparation

The app also supports cropping uploaded drink images and preparing final WebP outputs.

This helps when the original photo has too much empty space, when the drink should be centered better inside the visual timeline item, or when uploaded images need to be made lighter for production use.

Typical image workflow:

Upload drink image
→ Crop the important area
→ Remove background if needed
→ Save image to the drink preset
→ Use the cleaned image in timeline records

Together, cropping, WebP preparation, and background removal make the preset library feel more like a custom drink collection.

---

Monthly View

The timeline includes monthly hover interactions that make each month easier to inspect at a glance.

Monthly details can help surface information such as:

• Monthly favorite drink
• Drink count
• Monthly volume
• Monthly calories
• Monthly caffeine
• Collection progress
• Notable drinking patterns

This makes the timeline more explorable without forcing everything into a static statistics panel.

---

Medal Feature

The app includes a medal system to make drink tracking feel more rewarding.

Medals can represent milestones, achievements, or collection progress, such as:

• Recording consistently
• Drinking a certain category often
• Discovering more drink types
• Reaching monthly milestones
• Building up a drink history over time

The medal system gives the app a light game-like layer without turning it into a serious productivity tool.

The main idea is simple:

Track drinks over time
→ Build history
→ Unlock small achievements
→ Make the timeline feel alive

---

Statistics

The side menu includes a lightweight overview of drink history.

Current statistics include:

• Total recorded days
• Total drinks
• Total calories
• Total volume
• Total caffeine
• Most frequently consumed drink
• Monthly favorite drink
• Coffee days
• Current recording streak
• Drink collection progress
• Medal or achievement progress

The statistics are meant to be simple, readable, and personally useful.

---

Admin Mode

The app uses a simple admin mode for personal use.

• Admin password is configured with an environment variable
• Admin session is stored in an HTTP-only cookie
• Admin login has basic rate limiting
• Visitors can view the timeline in read-only mode
• Admin users can add, edit, and delete records and presets

This keeps the app usable as a personal public-facing tracker while protecting editing features.

---

Tech Stack

• Next.js App Router
• React
• TypeScript
• Prisma
• SQLite-compatible schema
• Turso / libSQL for hosted production database
• Vercel Blob for uploaded drink images
• @imgly/background-removal for background removal
• onnxruntime-web for browser-side image processing support
• Custom CSS
• Vercel deployment

---

Data Model

The app uses three main Prisma models.

DrinkPreset

Stores reusable drink templates.

Main fields:

• name
• category
• defaultVolumeMl
• defaultCaloriesKcal
• defaultCaffeineMg
• color
• imagePath
• active
• createdAt
• updatedAt

---

DrinkLog

Stores actual drink records.

Main fields:

• presetId
• consumedAt
• nameSnapshot
• categorySnapshot
• imagePathSnapshot
• colorSnapshot
• volumeMl
• caloriesKcal
• caffeineMg
• note
• createdAt
• updatedAt

Snapshot fields allow each record to preserve what the drink looked like at the time it was logged.

---

Setting

Reserved for app-level settings.

---

Environment Variables

Create a .env.local file for local development.

DATABASE_URL="file:./dev.db"
ADMIN_PASSWORD="your-admin-password"

TURSO_DATABASE_URL="your-turso-database-url"
TURSO_AUTH_TOKEN="your-turso-auth-token"

BLOB_READ_WRITE_TOKEN="your-vercel-blob-token"

Depending on your local setup, you may use either a local SQLite database or the hosted Turso database during development.

For Vercel deployment, configure the required environment variables in the Vercel project dashboard instead of committing them to GitHub.

---

Local Development

Install dependencies:

npm install

Generate Prisma Client:

npm run db:generate

Initialize or push the local SQLite database:

npm run db:push

Seed sample data, if needed:

npm run db:seed

Start the development server:

npm run dev

Then open:

http://localhost:3000

---

Production Build Test

Before deploying, test the production build locally:

npm run build
npm start

Then open:

http://localhost:3000

This is closer to how the app behaves after deployment.

---

Useful Scripts

{
  "dev": "next dev",
  "build": "prisma generate && next build",
  "start": "next start",
  "lint": "eslint .",
  "db:generate": "prisma generate",
  "db:push": "node scripts/init-sqlite.mjs",
  "db:seed": "tsx prisma/seed.ts",
  "db:reset": "prisma db push --force-reset && npm run db:seed",
  "blob:migrate-uploads": "node scripts/migrate-uploads-to-blob.mjs",
  "check:utf8": "node scripts/check-utf8.mjs"
}

---

Deployment

This project is designed for:

GitHub → Vercel → Turso + Vercel Blob

Recommended deployment setup:

• Push the project to GitHub
• Import the repository into Vercel
• Add Turso environment variables
• Add Vercel Blob environment variable
• Deploy with the default Next.js build settings

The build script already runs Prisma generation before building the Next.js app.

---

Notes on File Uploads

Vercel does not provide a permanent local upload folder for user-generated files.

Uploaded images should not be saved into public/uploads in production because files written during runtime will not persist after deployment.

This project uses Vercel Blob for production image storage. The database stores the public Blob URL, allowing images to load correctly after deployment.

---

Project Status

This is a personal full-stack hobby app and an active learning project.

Current strengths:

• Full-stack Next.js app structure
• Prisma-backed database model
• Turso/libSQL production database support
• Vercel Blob image upload support
• Background removal for drink images
• Image cropping and WebP preparation for cleaner presets
• Timeline thumbnail support for newer drink images
• Admin-only editing flow with login rate limiting
• Public read-only timeline viewing
• Custom visual timeline UI
• Monthly hover interactions
• Medal / achievement system
• Snapshot fields for historical accuracy
• Lightweight statistics panel
• Stronger server-side validation for records, presets, dates, colors, and uploads
• Mobile-oriented performance improvements through lazy-loaded modal islands

---

Possible Future Improvements

• Add README screenshots or a short demo GIF
• Improve mobile timeline interactions
• Add CSV export
• Add charts for caffeine, calories, and volume over time
• Add daily caffeine warning or limit indicator
• Add calendar view
• Add PWA install support
• Add better image management for replacing or deleting old Blob images
• Add a migration or utility script to generate thumbnails for older drink images
• Add richer filtering and search for drink history
• Add yearly or seasonal recap views
• Add a safer timeline shelf scaling system after more layout testing
• Add a user-facing theme setting if the night-mode direction feels worth keeping

---

License

This project is licensed under the MIT License.

See the LICENSE file for details.