Skip to main content

Overview

Date Calculator is a full-stack web application designed for calculating and tracking days across custom date ranges with configurable anchor periods. This tool is perfect for tracking travel days, residency requirements, or any time-based calculations that need to be measured against custom yearly periods. The frontend is built with Next.js 15 and React 19, featuring an intuitive interface that allows users to add multiple date ranges using a modern date picker, configure custom anchor dates (e.g., September 17 to September 16), and automatically merge overlapping ranges for accurate calculations. The built-in visual heatmap provides a clear visualization of which days fall within each period. The backend is a RESTful API built with Flask (Python) and deployed as a serverless AWS Lambda function using container images. The API handles complex date calculations, overlap merging, heatmap generation, and session management.

Tech Stack

Next.js 15
React 19
TypeScript
Tailwind CSS
Flask
Python
AWS Lambda
AWS API Gateway
Docker
Docker Compose
Vercel
Flatpickr

Key Features

  • Flexible date range management with intuitive range picker interface
  • Custom anchor periods - configure any anchor date (month/day) to define custom yearly periods
  • Smart overlap merging - automatically merge overlapping date ranges for accurate calculations
  • Visual heatmap - see exactly which days fall within each period with an interactive heatmap
  • Threshold validation - set minimum day requirements per period and get pass/fail indicators
  • Quick presets - fast selection of common ranges (today, last 7/30 days, current/last period)
  • Persistent storage - save and load calculation sessions using localStorage
  • Modern dark UI - beautiful, responsive dark theme built with Tailwind CSS
  • Edge case handling - robust handling of leap years, Feb 29, and invalid dates
  • Period boundary calculations - accurate calculations across year transitions

Architecture

System Architecture

The application is split into a statically-deployed Next.js frontend on Vercel and a serverless Flask API on AWS Lambda. The frontend calls the API via API Gateway; Lambda runs the Python calculation engine packaged as a Docker container image.

Date Calculation Pipeline

Each calculation request flows through overlap merging, period boundary splitting, and heatmap generation before results are returned to the client.

Frontend State Management

All UI state is managed with React hooks and persisted to localStorage so sessions survive page reloads. No external state library is used.

Screenshots

Results View with Heatmap

Date Calculator Results