Technical Architecture & Developer Overview
High-level overview of the Work Clock HQ frontend architecture, state management, SWR data fetching, and API integration.
Technical Architecture & Developer Overview
Work Clock HQ is built with high-performance modern web technologies.
Technology Stack
- Framework: Next.js 16 (App Router) with React 19.
- Styling: Tailwind CSS v4 with custom OKLCH color palettes and Radix UI primitives.
- Documentation Framework: Fumadocs v16 (MDX Content Engine).
- Data Fetching: SWR (Stale-While-Revalidate) with Axios HTTP service wrapper.
- State Management: Zustand & React Context.
- Error Tracking: Sentry SDK integration.
Key Hooks & Services
useOrganizations (hooks/https/organizations.ts)
Handles fetching, caching, and updating organization profile data, locations, and member management.
Geolocation Utilities (components/ui/location-map.tsx)
Integrates Google Maps JavaScript API for rendering interactive map markers and radius circle overlays.
The Pricing Page & Plan Selection
Pro-level guide to navigating the Work Clock HQ public and internal pricing page, evaluating subscription plan tiers, understanding dynamic button states, and acquiring capacity add-ons.
System Architecture & Technical Stack
In-depth technical reference for Work Clock HQ frontend architecture, state management, SWR data fetching layers, and API HTTP services.