Walk The Runway.
The official marketing website for Runway Avenue, a startup by CSES. Built for speed, style, and seamless user tracking.
- Dynamic Content: CMS-driven blog using Google Cloud Storage.
- Advanced Tracking: Custom behavioral analytics (hovers, visibility, page views) with Supabase.
- Responsive Design: Modern, fluid UI built with Tailwind CSS.
- Interactive Inquiries: Engaging contact experience for vendors and media.
- Privacy First: Integrated cookie consent management with session anonymization.
| Page | Path | Description |
|---|---|---|
| Homepage | / |
The hero experience featuring "Walk The Runway" typing effect. |
| About | /about |
Deep dive into Runway Avenue's mission, values, and team. |
| Blog | /blog |
Latest announcements and updates fetched dynamically from GCS. |
| Contact | /contact |
Interactive inquiry section for Support, Press, and Vendors. |
| Learn More | /learn-more |
Detailed breakdown of features and service offerings. |
| Signup | /signup |
User onboarding and mailing list registration. |
Runway Avenue features a sophisticated, custom-built tracking suite designed to understand user engagement deeply.
useTrackPage: Capturespage_viewevents, including URL and session data.useTrackHover: Monitors user interest by capturinghoverevents if a component is hovered for more than 5 seconds.useTimeTracker: Uses the Intersection Observer API to trackcomponent_viewevents. It measures exactly how long a specific section (e.g., hero title) remains visible in the user's viewport.
The application manages a persistent session_id using sessionStorage and a React Context Provider (AnalyticsProvider).
- A unique UUID is generated per session.
- Conditional Tracking: The
session_idis only generated and shared if the user has accepted the cookie policy.
All events are sent to /api/track and stored in Supabase with the following structure:
event_type:page_view|hover|component_viewpayload:sessionId: The unique session UUID (ornull).durationMs: Time spent on a component or hover.sectionId/componentId: Identifiers for the interacted element.userAgent: Anonymized if consent is not granted.
We take user privacy seriously. The tracking system is tightly integrated with our CookieBanner component.
- Consent Storage: User preference is stored in a
runway_cookie_consentcookie. - Dynamic Updates: The system dispatches a custom
runway_consent_changedevent whenever a user updates their preference, allowing the tracking hooks to react instantly. - Anonymization: If a user opts out or hasn't decided:
session_idis removed/set tonull.- Backend tracking anonymizes sensitive data like
userAgent.
Our blog uses Google Cloud Storage as a headless CMS.
blog/
index.json # Manifest containing slugs, titles, and metadata
post-slug/
image.png # Cover image for the post
description.txt # The main content body
- Frontend: Next.js 15 (App Router), React, Tailwind CSS
- Backend/DB: Supabase (PostgreSQL)
- Storage: Google Cloud Storage
- Infrastructure: Vercel (recommended)
- Utilities: Lucide React, UUID, Intersection Observer
- Install Dependencies:
npm install - Run Development:
npm run dev - Environment Setup: Ensure your
.env.localcontains Supabase and GCS credentials (see⚙️ Environment Variablesbelow).
# Supabase (Tracking)
NEXT_PUBLIC_SUPABASE_URL=your_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_key
SUPABASE_SERVICE_ROLE_KEY=your_admin_key
# GCS (Blog)
GCS_KEY_FILEPATH=./gcp-keys.json
GCS_BUCKET=runway-csesBuilt by: Angela Wu, Anthony Hu, Ethan Nguyen-Huu, Katelyn Li, Katherine Charry, Kyla Ma, Lucas Hlaing, Ryan Fordham
Design By: Snigdha Podugu, Tamara Aimufia, Priya Iyer