> 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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://grouple.gitbook.io/docs/frontend/frontend-overview.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.