Architecture

System architecture, tech stack, folder structure, and how frontend and backend connect.

Tech Stack

React 18

UI framework with hooks & functional components

TypeScript

Type safety across the entire codebase

Vite

Fast dev server & build tool with HMR

Tailwind CSS

Utility-first CSS with semantic design tokens

shadcn/ui

Accessible component primitives (Radix UI)

Framer Motion

Page transitions, sheet slides, micro-interactions

Google Maps JS API

Interactive map tiles, geocoding, markers

Lovable Cloud

Auth, database, edge functions, storage

Folder Structure

src/
├── components/          # Feature components
│   ├── ui/              # shadcn/ui primitives
│   ├── HeroSection.tsx
│   ├── LandingHeader.tsx
│   ├── AirbnbSearchBar.tsx          # Desktop header search pill
│   ├── MobileLandingSearchBar.tsx   # Mobile variant
│   ├── PlannerSearchBar.tsx         # Same pill, bound to active trip
│   ├── MapPlanner.tsx
│   ├── GoogleMapView.tsx
│   ├── GoogleSearchBar.tsx
│   ├── ItinerarySidebar.tsx
│   ├── MobileItineraryBottomSheet.tsx
│   ├── AddStopDialog.tsx
│   ├── StopCard.tsx
│   ├── DayCard.tsx
│   ├── DayBuilder.tsx
│   ├── GooglePlacesInput.tsx
│   └── NavLink.tsx
├── hooks/               # Custom React hooks
│   ├── useGoogleMaps.ts
│   └── use-mobile.tsx
├── lib/                 # Utilities
│   ├── tripEngine.ts
│   └── utils.ts
├── pages/               # Route pages
│   ├── Index.tsx
│   ├── NotFound.tsx
│   └── docs/            # Documentation center
├── types/               # TypeScript types
│   └── trip.ts
├── integrations/        # Auto-generated
│   └── supabase/
├── index.css            # Design tokens
├── App.tsx              # Router & providers
└── main.tsx             # Entry point

supabase/
├── config.toml          # Auto-managed config
└── functions/
    └── google-maps-key/ # Edge function

docs/                    # Project PRDs & tracking
├── 00-project-overview.md
├── tasks.md
├── rules.md
└── changelog.md

Frontend ↔ Backend Connection

Supabase Client

Auto-generated at src/integrations/supabase/client.ts. Imported as:

import { supabase } from "@/integrations/supabase/client";

Edge Functions

Called via supabase.functions.invoke('function-name'). Auto-deployed on code push.

Environment Variables

VITE_SUPABASE_URL and VITE_SUPABASE_PUBLISHABLE_KEY are auto-configured in .env.

Database Schema (Planned)

No tables created yet. Phase 2 will add:

Table	Purpose	Key Columns
profiles	User profile data	user_id, display_name, avatar_url
trips	Saved trip configurations	user_id, start/end locations, dates, preferences
trip_days	Individual day data	trip_id, day_number, distance_km, fuel_cost
trip_stops	Stops within days	day_id, trip_id, type, name, lat/lng, cost
trip_shares	Sharing permissions	trip_id, share_token, permission