BuildRTP Landing Page Context
This skill provides context and guidance for working with the BuildRTP landing page codebase, a Next.js 15 application built for a student-driven organization in the Research Triangle Park area.
Project Overview
BuildRTP is a Next.js landing page that promotes the LaunchUP pitch competition and provides information about the organization. The site features an integrated Airtable-backed check-in system for events and team members.
Technology Stack
**Framework**: Next.js 15 with App Router**Language**: TypeScript**Styling**: Tailwind CSS with custom design tokens**UI Components**: shadcn/ui component library**Icons**: Lucide React**Analytics**: Vercel Analytics**Font**: Montserrat (Google Fonts)**Database**: Airtable (for check-in system)Development Commands
When working with this project, use these commands:
```bash
Start development server with Turbopack
npm run dev
Build for production
npm run build
Start production server
npm start
Run ESLint
npm run lint
```
Project Structure
The codebase follows Next.js App Router conventions:
`src/app/` - Pages and API routes - `api/` - API endpoints for check-in system (auth, checkins, team-members)
- `layout.tsx` - Root layout with Montserrat font
- `page.tsx` - Home page with main components
- `launchup/page.tsx` - LaunchUP event detail page
`src/components/` - React components - `ui/` - shadcn/ui base components
- Main components: header, hero-section, event-card, about-section, sponsors-section, footer
`src/lib/` - Utility libraries - `airtable-store.ts` - Airtable data operations
- `checkin-store.ts` - Check-in state management
- `checkin-client.ts` - Check-in API client
`src/types/` - TypeScript definitions`public/` - Static assets (logos, images)Design System
Colors
**mainblue**: `#00a8cc` (primary brand color)**secondaryblue**: `#006699` (secondary brand color)**orange**: `#ff6600` (accent color for CTAs)Typography
**Primary font**: Montserrat (weights: 400, 700)**Font variable**: `--font-montserrat`Key Features
Event Management
Event details are hardcoded in `src/app/page.tsx` (EventCard component)Dedicated LaunchUP page at `/launchup` with full event informationExternal registration links (Tally forms)Check-in System
The site includes a complete check-in/checkout system:
Airtable-backed storage for visitors and team membersAPI routes for CRUD operations and authenticationSupport for visitor, team member, and event-based check-insReal-time status trackingNavigation
Static header navigationRedirect from `/eventproposal` to Google Docs form (configured in `next.config.ts`)Analytics
Vercel Analytics integrated in root layoutComponent Architecture
**Modular Design**: Each section is a separate component for maintainability**shadcn/ui Integration**: Consistent base components (Button, Card, Badge)**Responsive**: Mobile-first design using Tailwind utility classes**Type Safety**: Full TypeScript coverage across the codebaseAPI Architecture
The check-in system uses RESTful API routes:
`GET/POST /api/checkins` - Manage check-in records`POST /api/checkins/[id]/checkout` - Handle checkout operations`GET /api/team-members` - Retrieve team member data`POST /api/auth` - Authentication endpointsData flow: **Airtable → API routes → Client stores → React components**
Development Guidelines
When working with this codebase:
1. **Use App Router patterns** - This project uses Next.js App Router, not Pages Router
2. **Follow TypeScript** - Maintain full type coverage for all new code
3. **Respect the design system** - Use the defined color palette and Montserrat font
4. **Keep components modular** - Each section should be a separate, reusable component
5. **Use shadcn/ui** - Leverage existing shadcn/ui components for consistency
6. **Update content files** - Event info in page components, logos in `public/logos/`
7. **Environment variables** - Airtable integration requires environment variables (not committed)
8. **Path aliases** - Use `@/*` to import from `./src/*`
Common Tasks
Updating Event Information
Edit `src/app/page.tsx` for homepage event cardEdit `src/app/launchup/page.tsx` for detailed event pageAdding Sponsors
Add logo images to `public/logos/`Update sponsors array in `src/components/sponsors-section.tsx`Modifying Check-in System
Data models: `src/types/checkin.ts`Airtable config: `src/lib/airtable-store.ts`API routes: `src/app/api/`Client state: `src/lib/checkin-store.ts` and `src/lib/checkin-client.ts`Styling Changes
Global styles and theme: `src/app/globals.css`Tailwind config: `tailwind.config.ts`Component-level: Use Tailwind utility classesDesign tokens: Defined in color constants (mainblue, secondaryblue, orange)Important Notes
**No testing framework** is currently configured**ESLint** is configured with Next.js and TypeScript rules**Images** are stored in the `public/` directory**Site metadata** is defined in `src/app/layout.tsx`**Environment variables** are required for Airtable integration (obtain from project maintainers)