> For the complete documentation index, see [llms.txt](https://grouple.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://grouple.gitbook.io/docs/frontend/frontend-overview.md).

# Frontend Overview

### 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.

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

### Merchant App (`client/components/merchant/`) <a href="#merchant-app-client-components-merchant" id="merchant-app-client-components-merchant"></a>

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

<table data-header-hidden="false" data-header-sticky><thead><tr><th width="161.59820556640625">Section</th><th>Path</th><th>Description</th></tr></thead><tbody><tr><td><sup>Dashboard</sup></td><td><sup><code>dashboard/</code></sup></td><td><sup>Stats (Active Leads, Total Leads, Avg Lead Value, Avg Group Size), Active Leads table, Top Category, Lead Distribution chart</sup></td></tr><tr><td><sup>Leads</sup></td><td><sup><code>leads/</code></sup></td><td><sup>All leads with tabs: Pending, Accepted, Declined, Connected, Closed Won, Closed Lost, All. Filter by Event Type + Budget</sup></td></tr><tr><td><sup>Add Lead</sup></td><td><sup><code>leads/AddLeads/</code></sup></td><td><sup>Add leads via: Import CSV (from Tripleseat, EventTemple etc.) or Add Manually. Added leads appear in Accepted tab</sup></td></tr><tr><td><sup>RFQ Detail</sup></td><td><sup><code>rfq-details/</code></sup></td><td><sup>Full enquiry detail: event type, group size, date, time, venue, food preference, requirements, budget range, customer details. Accept / Decline actions</sup></td></tr><tr><td><sup>Send Proposal</sup></td><td><sup><code>send proposal/</code></sup></td><td><sup>AI-assisted proposal editor with package selection from Sales Library</sup></td></tr><tr><td><sup>Proposals</sup></td><td><sup><code>e-proposals merchant/</code></sup></td><td><sup>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</sup></td></tr><tr><td><sup>Properties</sup></td><td><sup><code>pages/VenueListingsPage.tsx</code></sup></td><td><sup>Manage venues — view, activate/deactivate, add new venue</sup></td></tr><tr><td><sup>Sales Library</sup></td><td><sup><code>settings/package extract/</code></sup></td><td><sup>Upload PDF brochures → AI-powered extraction of packages, inclusions, pricing. Manage global packages used in proposals</sup></td></tr><tr><td><sup>Analytics</sup></td><td><sup><code>analytics/</code></sup></td><td><sup>Avg Lead Value, Win Rate, Lifetime Value, Avg Group Size. Leads Over Time chart (Month/Quarter/Year). Export Data. Filter by venue</sup></td></tr><tr><td><sup>Settings</sup></td><td><sup><code>settings/</code></sup></td><td><sup>3 tabs: Account (profile info), Plan &#x26; Billing (subscription), Global Settings</sup></td></tr><tr><td><sup>Onboarding</sup></td><td><sup><code>onboarding/</code></sup></td><td><sup>3-step merchant onboarding flow</sup></td></tr></tbody></table>

### Shared Utilities (`client/shared/`)[​](https://grouple.mintlify.app/frontend/overview#shared-utilities-client/shared/) <a href="#shared-utilities-client-shared" id="shared-utilities-client-shared"></a>

<table><thead><tr><th width="217.514892578125">File</th><th>Purpose</th></tr></thead><tbody><tr><td><code>supabaseClient.ts</code></td><td>Supabase JS client initialisation</td></tr><tr><td><code>api.ts</code></td><td>API utility functions for backend calls</td></tr><tr><td><code>currencies.ts</code></td><td>Currency formatting helpers</td></tr><tr><td><code>timeOptions.ts</code></td><td>Time slot options for enquiry forms</td></tr></tbody></table>

### 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>)
```

### [​](https://grouple.mintlify.app/frontend/overview#deployment)Deployment <a href="#deployment" id="deployment"></a>

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