# Phases

> A mobile-first PWA for tracking face, body, and skincare progress through daily photos, with an automatic face-aligned timelapse rendered entirely in the browser.

Canonical page: https://www.ishannaik.com/projects/phases

_Face-aligned progress timelapse, built in the browser_

- Category: Web Development & Design, AI/ML Development
- Client: Self-initiated project
- Role: Fullstack Developer
- Year: 2025
- Live: https://phasesapp.vercel.app
- Source: https://github.com/Ishannaik/facelapse

## Overview

Phases turns a daily photo habit into a smooth timelapse. You take one photo a day through an in-app camera guide, and the app automatically centres and levels your eyes across every frame so the final video holds perfectly steady — no tripod, no manual alignment.

The alignment runs on TensorFlow.js MediaPipe FaceMesh directly in the browser: it locates the eyes in each photo and stores the anchor points. Frames it can't align automatically get flagged for a quick two-point manual adjustment. The timelapse itself is rendered live on a canvas and encoded to MP4 or GIF with ffmpeg.wasm — everything happens on-device, with no upload or server-side processing.

Photos are stored locally in IndexedDB by default; connecting Google Drive adds backup and cross-device sync. Phases is built on Next.js 15 and React 19, ships as an installable PWA, and packages into an Android app via Capacitor, with iOS on the way.

## Features

- **Automatic Face Alignment**: TF.js MediaPipe FaceMesh finds your eyes and levels every photo on-device
- **In-Browser Timelapse**: Renders and encodes to MP4/GIF with ffmpeg.wasm — no server, no upload
- **On-Device Storage**: Photos live in IndexedDB by default; nothing leaves your device unless you opt in
- **Google Drive Sync**: Optional backup and pick-up-anywhere library across devices
- **Guided Daily Camera**: A face-oval overlay keeps framing consistent shot to shot
- **Cross-Platform**: Installable PWA plus a native Android build via Capacitor, iOS coming

## Technologies

Next.js 15, React 19, TypeScript, Tailwind CSS v4, TensorFlow.js, ffmpeg.wasm, Supabase, Better Auth, Capacitor

## Process

- **Design** (1 week): Created wireframes and high-fidelity mockups for all pages and responsive breakpoints
- **Development** (2 weeks): Implemented the design using modern front-end technologies and best practices
- **Testing & Optimization** (1 week): Performed cross-browser testing and optimized for performance and accessibility

## Related projects

- [WARP](https://www.ishannaik.com/projects/warp.md)