Phase 1: D3 Map Exploration
- Set up D3.js with geoConicConformal projection to render a U.S. map.
- Plotted points using GPS metadata extracted from photos.
- Added custom map symbols (circles, triangles) to distinguish campsites and towns.
- Experimented with overlaying trail lines and topographic contours.
Phase 2: React & Next.js Integration
- Migrated map rendering into a Next.js 14 (App Router) + React + TypeScript project.
- Installed and configured TailwindCSS for styling.
- Began shaping the concept into a full-stack trail journal app (not just a map).
Phase 3: Database Setup
- Chose PostgreSQL as the database.
- Defined schema: users, dates, entries, photos.
- Debugged Postgres role/permissions locally until stable.
Phase 4: Backend Data Layer
- Built SQL queries to fetch journal entries with related dates and trail legs.
- Aggregated photos into an array per entry using json_agg.
- Enhanced queries to sort photos by description inside the aggregation.
- Consolidated queries from multi-step fetches into one optimized query.
Phase 5: Frontend Components
- Built JournalList and JournalCard React components.
- Standardized routing on entry_id (fixed inconsistent id usage).
- Fixed typing issues in [entry_id]/page.tsx by correctly extending PageProps.
- Styled with shadcn/ui + Tailwind for clean, consistent UI.
Phase 6: Authentication
- Implemented custom username + password authentication.
- Wired authentication through Next.js server actions for seamless login/signup.
Phase 7: Production & Deployment
- Fixed JSON fetch returning HTML (`<!DOCTYPE>`) during API calls.
- Resolved Vercel build errors by correcting TypeScript typings.
- Disabled ESLint’s react/no-unescaped-entities rule to allow natural apostrophes in text.
Phase 8: Documentation & DX
- Wrote a README.md with project overview, features, and tech stack.
- Clarified where to store static vs dynamic JSON data (/public vs /app/data).
✅ Current Status:
Trail Journal App is a full-stack journaling platform with entries, photos, authentication, PostgreSQL database, and interactive D3 map visualization — deployed and production-ready. 🚀