Frontend Overview - Grouple

Tech Stack

Framework: React + TypeScript
Build Tool: Vite
Styling: Tailwind CSS + shadcn/ui components
State: React Context (AuthContext, CurrencyContext, OnboardingContext)
Database Client: Supabase JS client (direct CRUD + JWT auth)
Hosting: AWS Amplify (auto-deploys from GitHub main branch)

Application Structure

The frontend is split into two distinct user-facing applications within the same codebase:

Customer App (`client/components/endcustomers/`)

For event planners and customers discovering venues and submitting enquiries.

Section	Path	Description
Hero	`HomePage/HeroSection.tsx`	Main hero banner
Browse All Listings	`HomePage/BrowseAllListings.tsx`	Full venue listing/search
Featured Venues	`HomePage/FeaturedVenues.tsx`	Highlighted/featured venues
Venue Categories	`HomePage/VenueCategories.tsx`	Browse by venue category
Venue Showcase	`HomePage/VenueShowcase.tsx`	Venue spotlight section
Event Types	`HomePage/EventTypes.tsx`	Browse by event type
How It Works	`HomePage/HowItWorks.tsx`	Platform explainer section
Why Choose	`HomePage/WhyChoose.tsx`	Value proposition section
Testimonials	`HomePage/Testimonials.tsx`	Customer testimonials
Logo Scroller	`HomePage/LogoScroller.tsx`	Partner/venue logos
CTA	`HomePage/CTA.tsx`	Call to action section
FAQ	`HomePage/FAQ.tsx`	Frequently asked questions
Footer	`HomePage/MainFooter.tsx`	Site footer
Legal	`HomePage/Legal/`	Terms, privacy policy pages
Enquiry Submission	`Enquiries/steps/`	Multi-step enquiry form
My Enquiries	`Pages/MyEnquiriesPage.tsx`	Customer enquiries dashboard
Venue Detail	`Pages/VenueDetail.tsx`	Individual venue page
Venue Enquiry	`Pages/VenueEnquiryPage.tsx`	Enquiry from venue page
Compare	`Pages/Compare.tsx`	Compare multiple proposals
Proposals	`Proposals/ProposalTemplate.tsx`	View and confirm proposals
Profile	`CostomerProfile/`	Customer profile management
Login	`Pages/Login.tsx`	Customer login
Sign Up	`Pages/SignUp.tsx`	Customer registration

Merchant App (`client/components/merchant/`)

For venue owners and managers managing leads, proposals, and settings.

Section	Path	Description
Dashboard	`dashboard/`	Stats (Active Leads, Total Leads, Avg Lead Value, Avg Group Size), Active Leads table, Top Category, Lead Distribution chart
Leads	`leads/`	All leads with tabs: Pending, Accepted, Declined, Connected, Closed Won, Closed Lost, All. Filter by Event Type + Budget
Add Lead	`leads/AddLeads/`	Add leads via: Import CSV (from Tripleseat, EventTemple etc.) or Add Manually. Added leads appear in Accepted tab
RFQ Detail	`rfq-details/`	Full enquiry detail: event type, group size, date, time, venue, food preference, requirements, budget range, customer details. Accept / Decline actions
Send Proposal	`send proposal/`	AI-assisted proposal editor with package selection from Sales Library
Proposals	`e-proposals merchant/`	All proposals with tabs: Sent, Viewed, Confirmed, Rejected, Expired, All. Shows RFQ ID, recipient, quote amount, venue, event date, sent date, expiry date. List + Calendar view
Properties	`pages/VenueListingsPage.tsx`	Manage venues — view, activate/deactivate, add new venue
Sales Library	`settings/package extract/`	Upload PDF brochures → AI-powered extraction of packages, inclusions, pricing. Manage global packages used in proposals
Analytics	`analytics/`	Avg Lead Value, Win Rate, Lifetime Value, Avg Group Size. Leads Over Time chart (Month/Quarter/Year). Export Data. Filter by venue
Settings	`settings/`	3 tabs: Account (profile info), Plan & Billing (subscription), Global Settings
Onboarding	`onboarding/`	3-step merchant onboarding flow

Shared Utilities (`client/shared/`)

File	Purpose
`supabaseClient.ts`	Supabase JS client initialisation
`api.ts`	API utility functions for backend calls
`currencies.ts`	Currency formatting helpers
`timeOptions.ts`	Time slot options for enquiry forms

Authentication Flow

User visits grouple.pro
        ↓
Supabase Auth (GoTrue) → login/signup
        ↓
JWT token stored in AuthContext
        ↓
Frontend uses JWT for:
  - Direct Supabase CRUD (RLS enforced)
  - API requests to api.grouple.pro (Authorization: Bearer <JWT>)

Deployment

GitHub main branch → auto-deploys to AWS Amplify
Environment variables managed in AWS Amplify console
Custom domain grouple.pro via Route 53