PackForge

Craft your perfect pack — Full-featured gear list management for ultralight backpackers and hikers.

Built with React 19, TypeScript, Supabase, and MapLibre GL. Features interactive topo maps, GPX activity tracking, weather forecasts, content moderation, and full PWA support.

Features

Gear Management

• Gear Closet — Track all gear with weight, price, category, description, and links. Inline editing, multi-view (table/card), drag-and-drop reorder, and bulk operations (delete, category change, consumable toggle).
• Gear Bins — Organize gear into named bins (e.g., "Basecamp Kit", "Day Hike Essentials") with add/remove and expand/collapse.
• Gear Wishlist — Track gear you want to buy with table/card views, search, sort, priority levels, price tracking, and one-click purchase-to-closet flow.
• Duplicate Detection — Warns when adding gear with the same name as existing items.

Pack Lists

• Pack Builder — Create packs from your gear closet with category sections, custom categories, weight summaries, and cost breakdowns.
• Pack Templates — Save and apply reusable pack templates for common trip types.
• Pack Comparison — Side-by-side comparison of two packs across all categories with weight/price diffs.
• Pack Sharing — Generate shareable links with QR codes for public pack views.
• Pack Checklist — Toggle items as packed/unpacked with progress tracking per category.
• Consumable Planner — Calculate food, water, and fuel needs based on trip duration.
• CSV Import/Export — LighterPack-compatible CSV import and export.
• Bulk Edit Mode — Edit weight and quantity across all items simultaneously.

Trip Journal

• Interactive Topo Map — Full-screen topographic map with OpenTopoMap tiles, waypoint markers, and POI overlay (campsites, water sources, shelters via Overpass API).
• GPX/KML Upload — Parse and display GPS tracks with Garmin extension enrichment (heart rate, cadence, temperature).
• Activity Stats — Moving time, pace splits, elevation gain/loss, HR zones, and distance calculations.
• Weather Forecasts — 16-day weather forecasts with rule-based gear recommendations.
• Elevation Profiles — Interactive elevation charts for uploaded tracks.
• Waypoint Management — Add, reorder, and categorize waypoints with day assignments.

Explore & Community

• Public Pack Gallery — Browse shared packs with filters (weight range, price, location, season, duration, creator).
• Trending Packs — Top 8 trending packs based on 7-day activity scoring.
• Pack Voting — Upvote/downvote with optimistic UI updates.
• Public Profiles — User profiles with username, bio, avatar, and social links.
• Content Moderation — Flag system (5 reasons), admin dashboard, user bans, auto-hide on 3+ flags.

Account & Settings

• Multi-Currency — 34 ISO 4217 currencies with live exchange rate conversion (12hr cache).
• Weight Units — g, oz, lbs, or kg with persistent preference.
• Theme System — Light, Dark, and System modes with instant toggle and no flash on load.
• Two-Factor Auth — TOTP-based 2FA with QR enrollment, backup codes (40-bit entropy), and AAL2 gating.
• Password Security — 12-char minimum, breached password check via HaveIBeenPwned k-anonymity, brute-force lockout with exponential backoff.
• Data Export — Full GDPR-compliant data export (gear, packs, trips, votes, flags).
• Account Deletion — Cascade delete with storage cleanup.
• Onboarding Tour — 19-step guided spotlight tour for new users.

Technical Quality

• PWA — Installable with service worker (cache-first assets, network-first API), offline indicator, update notifications.
• Offline Support — IndexedDB caching for gear/packs with cache-first-then-network pattern. Offline mutation blocking with toast warnings.
• Error Boundary — React ErrorBoundary prevents white-screen crashes with user-friendly recovery UI.
• Accessibility — WCAG 2.1 AA: focus traps, ARIA attributes, heading hierarchy, keyboard navigation, screen reader announcements, prefers-reduced-motion support.
• Performance — React.memo on list components, useMemo for expensive computations, module-level constants, AbortController for search cancellation.
• Security — CSP meta tag + HTTP security headers (HSTS, X-Frame-Options, Referrer-Policy, Permissions-Policy, X-Content-Type-Options, COOP, CORP via vercel.json), XSS-safe markdown rendering, input sanitization, RLS on all tables, client-side rate limiting, SECURITY DEFINER RPCs for sensitive operations, ESLint security plugin.

Tech Stack

• Frontend: React 19 + TypeScript 5.9 (strict mode)
• Build: Vite 7 with route-based lazy loading + vendor chunk splitting
• Backend: Supabase (Auth + Postgres + RLS + Storage + SECURITY DEFINER RPCs)
• Maps: react-map-gl + MapLibre GL + OpenTopoMap tiles
• GPX: @tmcw/togeojson for GPX/KML parsing
• Styling: Plain CSS with BEM naming
• Hosting: Vercel (frontend) + Supabase (backend)
• Testing: Vitest (413 tests across 25 files)

Architecture

src/
  components/       # 31 reusable UI components
  features/
    auth/           # Auth (email/password, OAuth, MFA, backup codes)
    gear/           # Gear closet (CRUD, bins, mass ops, duplicate detection)
    packs/          # Packs (items, templates, sharing, compare, CSV, checklist)
    explore/        # Public gallery (filters, voting, trending)
    admin/          # Moderation dashboard (flags, bans, users)
    trips/          # Trip journal (map, waypoints, GPX, weather, activity)
    wishlist/       # Wishlist (table/cards, search, sort, purchase flow)
    landing/        # Landing page (features, FAQ, testimonials)
    profile/        # Profile (avatar, 2FA, export, deletion)
    static/         # Contact, Terms, Privacy, Tips, Changelog, About, 404
  hooks/            # 42 custom hooks
  types/            # 8 type definition files
  utils/            # 15 utility modules
  router.tsx        # 23 lazy-loaded routes
  App.tsx           # Root layout with ErrorBoundary
  main.tsx          # Entry point + SW registration
public/             # Brand assets, PWA manifest, service worker
supabase/           # 44 SQL migrations

Getting Started

Prerequisites

• Node.js 22 or later
• npm (included with Node.js)

Local Development

1. Clone the repository:

   git clone https://github.com/defconxt/packforge.git
   cd packforge

2. Install dependencies:

   npm install

3. Set up environment variables:

   cp .env.example .env

   Fill in your Supabase project URL and anon key. See Supabase Setup Guide for full instructions.

4. Start the development server:

   npm run dev

   Open http://localhost:5173 in your browser.

Running Tests

npm run ci    # Full pipeline: TypeScript + build + lint + tests
npm run test  # Tests only
npm run lint  # Lint only

Contributing

We welcome bug fixes, documentation improvements, and accessibility enhancements. See CONTRIBUTING.md for setup instructions, code style, and PR guidelines.

All contributors must sign a Contributor License Agreement on their first PR.

Database

• 17 tables with Row-Level Security on all
• 23 SECURITY DEFINER RPCs for admin, auth, and sensitive operations
• 44 migrations (run in order)

License

This project is licensed under the GNU Affero General Public License v3.0 (AGPL-3.0-only).

If you modify PackForge and make it available over a network, you must release your modifications under the same license. See the LICENSE file for details.