Builders House Hackathon

Goal

Create the digital identity for Builders House, by How to Web to showcase its story, enable event discovery, and streamline bookings.

Features

• User account creation via Supabase auth (check user account creation flow)

• Event feed from Oveit or user-created events(check Oveit API docs)

• User-only access for space booking requests (check booking flow)

• User-only access event proposal requests (event proposal flow)

• Event proposal requests form (all fields are required):

  • event_name
  • event_description
  • event_date (DD-MM-YYYY)
  • event_time (HH:MM)
  • event_banner (1200x600 pixels)
  • organizer_name
  • organizer_email
  • organizer_phone
  • organizer_website_url
  • organizer_linkedin_profile_url

• Admin panel to accept / reject and manage user event requests and booking KPIs

• User panel to manage event requests

• (optional) Builders House members page, showing the registered members (with public profile) with their profile picture, name, company, role, and linkedin profile url

• (optional) Use Supabase email templates + SendGrid for custom marketing emails

• (optional) Use Airtable for event proposal requests

Content guidelines

• Use the following guide for the landing page copy.

Tech Stack Requirements

• Use the following template to kickstart the project

• Make sure the have an account on Vercel and Supabase. Then you can Deploy the project on Vercel and connect it to your Supabase project.

Frontend

• Next.js for landing page.

• UI has to be shadcn/ui and Tailwind CSS compatible.

• Why Tailwind? Because we are going to plugin in our own branding colors made with tweakcn

• You can use any of the following UI kits for your project:

  • 21.dev - A collection of community-driven UI components, where you can get inspired, and also share your creations.
  • Origin UI - A collection of components, layouts and easing classes
  • Aceternity UI - Copy-paste components and templates used by Cursor, Cluely and Better-auth
  • MVP Blocks - Prebuilt and animated components to ship your MVP fast
  • Kibo UI - A registry of composable and accessible components
  • Skiper UI - Beautiful components animated with @mattgperry's motion library

Backend

• Next.js API route handlers (docs)

• Supabase for auth (docs)

• Supabase for database (docs)

• (optional) SendGrid for transactional and marketing emails (docs)

• (optional) Supabase or S3 for asset storage

Integrations

• Pull events from Oveit API (docs)

• Submit booking requests for desks and offices through Thia's booking API (docs)

• Handle any possible errors from the integrations and display them to the user in a friendly way.

• (optional) Submit event proposals via Airtable form

User flows

User account creation flow

Before creating an account, the user should first fill out the following form:

• Required fields: first_name, last_name, email, password, linkedin_profile_url, public_profile (checkbox)
• Optional fields: company_name, company_website_url, company_role, company_description, profile_picture (image), company_logo (image)

Make sure to create a separate users table in Supabase and store the profile data in it.

After filling out the form, the user flow is the following:

graph TD
    A[User creates account via Supabase auth] --> B[Email verification link is sent to user]
    B --> C[User clicks verification link and is redirected to login page]
    C --> D[User is redirected to the landing page and signs in]
    D --> E[User is required to fill out the profile form]
    E --> F[User submits profile form]
    F --> G[User is redirected to the landing page]
    G --> H[User can now book spaces and submit event proposals]
    F --> X[User profile details are saved in a separate users table]
    F --> Y[User registration details are used to create an account in Thia]

Loading

User space booking flow

graph TD
    A[User views Builders House products: desks & meeting rooms] --> B[User selects a product]
    B --> C{Is user logged in?}
    C -->|No| X[Redirect to login/signup page]
    X --> Y[User logs in or signs up]
    Y --> Z[Redirect back to products]
    C -->|Yes| CC[App returns product details and availability]
    CC --> D[User starts booking request via form]
    D -->E[User selects a date]
    E --> F[User selects the time period]
    F --> G[User submits booking request]
    G --> L[User is redirected to wait for approval page]
    G --> N{Admin receives booking request details from Thia}
    N --> |Option 1: Accept| O[Admin accepts booking from Thia]
    N --> |Option 2: Reject| P[Admin rejects booking from Thia]
    O --> Q[Thia sends QR code email to user]
    P --> R[Thia sends rejection email to user]

Loading

User event proposal flow

graph TD
    A[User clicks Submit an event button] --> B{Is user logged in?}
    B -->|No| X[Redirect to login/signup page]
    X --> Y[User logs in or signs up]
    Y --> Z[Redirect back to event feed]
    B -->|Yes| I[Navigate to event creation form]
    I --> J[User fills out event creation form]
    J --> K[User submits event creation form]
    K --> L[User is redirected to wait for approval page]
    K --> R{Event details are sent to Airtable}
    R --> |Option 1: Accept| S[Admin accepts event and creates the event in Oveit]
    R --> |Option 2: Reject| T[Admin rejects event creation]

Loading

Deliverables

• Functional prototype (deployed via Vercel/Netlify)

• GitHub repo with code

• 5-min demo video

Rules

Show respect, no harassment