A collection of production-grade, interactive components built for HubSpot CMS using React, demonstrating advanced concepts including islands architecture, progressive hydration, CRM integration, and performance optimization.
- Events Grid Template - Full page template demo
- Module Component Demo - Interactive module showcase
Upcoming events display with countdown timers, event type filtering, and registration links. Fetches data from HubSpot CRM custom objects.
- Event Type Filtering: Filter by webinar, workshop, conference, meetup
- Fully Responsive: Adaptive grid layouts for mobile, tablet, and desktop
- Countdown Timers: Live countdown to event start times
- Registration Links: Direct links to event registration
- Date Formatting: Automatic past/future event handling
- Custom Accent Colors: Configurable theme colors
- React 18: Modern React with hooks
- TypeScript: Type-safe component development
- CSS Modules: Scoped, maintainable styling
- HubSpot CMS Components: Islands architecture, field definitions
- GraphQL: CRM data fetching
This project uses HubSpot's islands architecture for optimal performance. The EventsGrid component hydrates on load for immediate interactivity.
src/theme/challenge-theme/
├── components/
│ ├── islands/ # Client-side interactive components
│ │ └── EventsGrid.tsx
│ └── modules/
│ └── EventsGrid/
│ └── index.tsx
├── data-queries/
│ └── EventsGrid.graphql # GraphQL query for CRM data
├── styles/
│ ├── common.module.css
│ └── EventsGrid.module.css
└── utils/
└── colorUtils.ts
- Node.js >= 20.0.0
- HubSpot Developer Account
- HubSpot CLI installed (
npm install -g @hubspot/cli)
You can use bun, yarn, pnpm or bun to run and install the dependencies.
-
Clone and install
git clone https://github.com/swarmnyc/hubspot-react-challenge cd hubspot-react-challenge npm install cd src/theme/challenge-theme npm install
-
Authenticate with HubSpot
hs auth
-
Start development server
cd src/theme/challenge-theme npm start -- --generateFieldTypes open localhost:3000 -
Deploy to HubSpot
hs project upload
This project fetches data from HubSpot CRM. See docs/HUBSPOT_DATA_INTEGRATION.md for detailed setup instructions.
Events: Create a custom "Event" object with properties:
- Event Title, Description, Event Date, Event Time, Event Type
- Location, Is Virtual, Registration URL, Speakers, Capacity
SWARM - HubSpot Front-End Developer Challenge
This project is created as part of a technical assessment for HubSpot.