Job Application Tracker

A full-stack job application tracking system with multiple technology stack implementations.

• Overview
  • Sample Editing screen
• Implementations
  • 1. Vue + Nuxt + Drizzle
  • 2. Next.js + Express + Prisma
  • 3. React + Koa + PostgreSQL
  • 4. Svelte + Hono + Drizzle
  • 5. React + TanStack + NestJS + Drizzle
  • 6. React SSR + TanStack Start + FastAPI
• Core Features
• Database Architecture
• Type Diagrams
• Repository Structure
• Getting Started
  • Prerequisites
  • Installation
  • Running Applications
  • Schema Documentation
• Testing
  • Unit Tests
  • End-to-End Tests
  • Build Verification
• Development Tools
• License

Overview

This repository contains a complete job application tracker built with six different full-stack implementations. Each provides the same core functionality and user experience, allowing you to compare technology stacks side by side.

Sample Editing screen

Implementations

1. Vue + Nuxt + Drizzle

Directories: vue-ui/ + nuxt-api/ Stack:

• Frontend: Vue 3 + Pinia + TypeScript + Vite + Tailwind CSS
• Backend: Nuxt server routes
• Database: Drizzle ORM + PostgreSQL
• Event sourcing with Immer patches, undo/redo, history panel with diff view, patch-based restores, and checkpoint snapshots — see sequence diagram

2. Next.js + Express + Prisma

Directories: ui/ + api/ Stack:

• Frontend: Next.js + React 19 + TypeScript + Tailwind CSS
• Backend: Express.js + Prisma ORM
• Database: PostgreSQL

3. React + Koa + PostgreSQL

Directories: react-ui/ + koa-api/ Stack:

• Frontend: React 19 + TypeScript + Vite + Tailwind CSS
• Backend: Koa.js + raw PostgreSQL (no ORM)
• Database: PostgreSQL with SQL migrations

4. Svelte + Hono + Drizzle

Directories: svelte-ui/ + hono-api/ Stack:

• Frontend: Svelte 5 + SvelteKit + Tailwind CSS
• Backend: Hono (lightweight framework)
• Database: Drizzle ORM + PostgreSQL

5. React + TanStack + NestJS + Drizzle

Directories: tanstack-ui/ + nest-api/ Stack:

• Frontend: React 19 + TanStack Query v5 + TanStack Router + TypeScript + Vite + Tailwind CSS
• Backend: NestJS with Fastify adapter
• Database: Drizzle ORM + PostgreSQL
• Snapshot-based history with field diffs and restore

6. React SSR + TanStack Start + FastAPI

Directories: tanstack-start-ui/ + fastapi/ Stack:

• Frontend: React 19 + TanStack Start (SSR) + TanStack Query v5 + TanStack Router + Tailwind CSS
• Backend: Python 3.14 + FastAPI + Pydantic v2
• Database: asyncpg (raw SQL, no ORM) via python_fastapi schema
• Server-side rendering with route loaders and createServerFn server functions
• Snapshot-based history with field diffs and restore

Core Features

All implementations provide:

• Full CRUD operations for job applications
• Interview stage tracking
• Filtering by status, category, source, skills rating
• Sorting and pagination
• Archive/restore functionality
• Dark mode support
• Responsive design (desktop + mobile)
• Input validation and error handling

Database Architecture

All implementations share a single PostgreSQL database (app_tracker) with separate schemas for isolation:

Schema	Apps	ERD
vue_nuxt	Vue + Nuxt + Drizzle	schema docs
express_prisma	Next.js + Express + Prisma	schema docs
react_koa	React + Koa + PostgreSQL	schema docs
svelte_hono	Svelte + Hono + Drizzle	schema docs
react_nestjs	React + TanStack + NestJS + Drizzle	schema docs
python_fastapi	React SSR + TanStack Start + FastAPI	schema docs

See docs/DATABASE_ARCHITECTURE.md for ORM setup and connection string patterns.

Type Diagrams

Mermaid class diagrams generated from TypeScript type definitions:

• nuxt-api - Vue + Nuxt (includes event sourcing types)
• ui - Next.js + Express
• react-ui - React + Koa
• koa-api - Koa API (partial - Zod-inferred types unresolved)
• svelte-ui - Svelte + Hono
• tanstack-ui - React + TanStack + NestJS
• nest-api - NestJS API
• tanstack-start-ui - React SSR + TanStack Start

Regenerate with npm run docs:types.

Repository Structure

/
├── ui/                           # Next.js + React UI
├── api/                          # Express + Prisma API
├── react-ui/                     # React + Vite UI
├── koa-api/                      # Koa + PostgreSQL API
├── svelte-ui/                    # SvelteKit UI
├── hono-api/                     # Hono API
├── vue-ui/                       # Vue + Vite UI
├── tanstack-ui/                  # React + TanStack Query/Router UI
├── tanstack-start-ui/            # React SSR + TanStack Start UI
├── nest-api/                     # NestJS + Fastify API
├── nuxt-api/                     # Nuxt server API
├── fastapi/                      # Python FastAPI API
├── specs/                        # Feature specifications
├── docs/                         # Documentation
├── .claude/                      # Claude Code skills and commands
├── CLAUDE.md                     # Repository instructions for Claude Code
└── docker-compose.yml            # Docker + PostgreSQL setup

Getting Started

Prerequisites

• Node.js (v18+)
• Python 3.12+ and uv (for the FastAPI implementation)
• Docker and Docker Compose (for PostgreSQL)
• tbls (optional, for regenerating schema docs): brew install tbls

Installation

1. Clone the repository:

   git clone https://github.com/WhatIfWeDigDeeper/application-tracker.git
   cd application-tracker

2. Install dependencies for all implementations:

   npm run ci:all

3. Start PostgreSQL:

   docker-compose up -d postgres

4. Run database migrations for each implementation you intend to use:

   npm run migrate:express        # Express + Prisma
   npm run migrate:koa-api        # Koa (raw SQL)
   npm run migrate:hono-api       # Hono + Drizzle
   npm run migrate:nuxt-api       # Nuxt + Drizzle
   npm run migrate:nest-api       # NestJS + Drizzle
   npm run migrate:fastapi        # FastAPI (asyncpg)
   
   # or all at once:
   npm run migrate:all

Running Applications

Each implementation can be run independently:

# Next.js + Express (UI 3000 + API 3001)
npm run dev:react-next
npm run dev:express-api

# React + Koa (UI 3010 + API 5010)
npm run dev:react-ui
npm run dev:koa-api

# Vue + Nuxt (UI 3020 + API 5040)
npm run dev:vue-ui
npm run dev:nuxt-api

# Svelte + Hono (UI 3030 + API 5030)
npm run dev:svelte-ui
npm run dev:hono-api

# React + TanStack + NestJS (UI 3050 + API 5050)
npm run dev:tanstack-ui
npm run dev:nest-api

# React SSR + TanStack Start + FastAPI (UI 3040 + API 5160)
npm run dev:tanstack-start-ui
npm run dev:fastapi

Schema Documentation

Regenerate database ERD docs after schema changes (requires tbls and a running PostgreSQL instance):

npm run docs:schema

This generates Mermaid ERDs and per-table documentation under docs/schema/ for each implementation schema.

Testing

Unit Tests

Run tests for individual implementations:

npm run test:express-api  # Express + Prisma API tests
npm run test:react-next   # Next.js UI tests
npm run test:koa-api      # Koa API tests
npm run test:react-ui     # React UI tests
npm run test:svelte-ui    # Svelte UI tests
npm run test:vue-ui       # Vue UI tests
npm run test:nest-api     # NestJS API tests
npm run test:tanstack-ui  # TanStack UI tests
npm run test:tanstack-start-ui  # TanStack Start UI tests
npm run test:fastapi      # FastAPI pytest unit tests

Run all unit tests:

npm run test:all          # Run all implementation tests

End-to-End Tests

E2E tests use Playwright and run against each implementation:

npm run test:e2e:express  # Next.js + Express (port 3000)
npm run test:e2e:vue      # Vue + Vite (port 3020)
npm run test:e2e:svelte   # Svelte + Hono (port 3030)
npm run test:e2e:react-koa # React + Koa (port 3010)
npm run test:e2e:tanstack  # React + TanStack + NestJS (port 3050)
npm run test:e2e:tanstack-start  # React SSR + TanStack Start + FastAPI (port 3040)
npm run test:e2e:all      # Run all e2e tests

To clean up leftover test data from interrupted runs, see Test Data Cleanup.

Build Verification

Build all implementations:

npm run build:all         # Build all implementations

Development Tools

This repository includes Claude Code commands and skills for common development tasks:

• /commit - Generate commit messages
• /pr - Create pull requests
• /fix-build - Fix build errors

Skills installed from WhatIfWeDigDeeper/agent-skills:

Skill	Description
learn	Extract lessons from conversations
js-deps	Update npm dependencies and/or fix audit errors
uv-deps	Audit and update Python dependencies
ship-it	Branch, commit, push, and open a PR

Since npx skills check and npx skills update apparently do not work with the above repo at this time, you may force update all skills:

npx skills add -y whatifwedigdeeper/agent-skills

See .claude/ for all available commands and skills.

Notifications (Optional)

Claude Code hooks in .claude/settings.json send macOS notifications when Claude needs input (permission prompts, questions, idle). This requires terminal-notifier:

brew install terminal-notifier

No configuration needed — the hooks are already in .claude/settings.json. If you don't install it, hooks fail silently with no impact.

License

MIT