The Bridge Hack

A modern, bilingual hackathon website for CommunityOS, connecting builders from Chile and San Francisco.

Features

• Bilingual: Full English and Spanish support via next-intl
• Modern UI: Built with Radix UI primitives and Tailwind CSS v4
• Accessible: WCAG 2.1 AA compliant
• Responsive: Mobile-first design
• Internationalized: Automatic locale-based routing

Tech Stack

• Framework: Next.js 16.0.10 (App Router)
• UI: React 19.2.0, Radix UI, Tailwind CSS v4
• Language: TypeScript 5
• i18n: next-intl
• Animations: Framer Motion
• Deployment: Cloudflare Workers (via open-next)

Prerequisites

• Node.js 22+
• pnpm 10.9.0+

Installation

# Clone the repository
git clone <your-repo-url>
cd the-bridge-hack

# Install dependencies
pnpm install

Development

# Start development server
pnpm dev

Open http://localhost:3000 in your browser.

Build & Test

# Build for production
pnpm build

# Run linter
pnpm lint

# Run accessibility tests (WCAG 2.1 AA)
pnpm a11y

Deployment

Cloudflare Workers

This project is configured for Cloudflare Workers deployment using open-next.

# Preview deployment locally
pnpm preview

# Deploy to Cloudflare Workers
pnpm deploy

Serverless Functions Location: Open the wrangler.toml file to configure your Cloudflare account details and deployment settings.

Environment Variables

If needed, add environment variables to wrangler.toml under the [vars] section.

Project Structure

the-bridge-hack/
├── app/                      # Next.js App Router
│   ├── [locale]/            # Locale-based routes
│   ├── AGENTS.md            # App architecture guidelines
│   └── globals.css          # Global styles
├── components/              # React components
│   ├── atoms/               # Small, presentational components
│   ├── molecules/           # Component compositions
│   ├── organisms/           # Page-level sections
│   ├── ui/                  # Radix UI primitives
│   └── AGENTS.md            # Component guidelines
├── hooks/                   # Custom React hooks
├── i18n/                    # Internationalization config
├── lib/                     # Utilities and helpers
│   ├── accessibility.ts     # Accessibility utilities
│   ├── feature-flags.ts     # Application configuration
│   └── utils.ts             # General utilities
├── messages/                # Translation files
│   ├── en.json              # English translations
│   └── es.json              # Spanish translations
├── public/                  # Static assets
├── scripts/                 # Build and test scripts
│   └── test-a11y.js         # Accessibility testing
├── styles/                  # Additional styles
├── next.config.mjs          # Next.js configuration
├── open-next.config.ts      # Cloudflare deployment config
└── wrangler.toml            # Cloudflare Worker configuration

Component Architecture

Components follow atomic design principles:

• Atoms: Small, reusable UI primitives (buttons, links, visual effects)
• Molecules: Combinations of atoms (language switcher, action buttons)
• Organisms: Page-level sections (nav, hero, tracks, sponsors)
• UI Components: Reusable Radix UI primitives

See individual AGENTS.md files in each directory for detailed guidelines.

Accessibility

This project complies with WCAG 2.1 AA standards.

• Skip link available on Tab key
• Reduced motion support
• Semantic HTML structure
• Keyboard-accessible navigation
• Screen reader-friendly ARIA attributes

Run accessibility tests:

pnpm a11y

Internationalization

• Supported Locales: English (en), Spanish (es)
• Translation Files: messages/en.json, messages/es.json
• Routing: Automatic locale-based routing (e.g., /en, /es)

When adding new text:

1. Add keys to both en.json and es.json
2. Use the hook in components: const t = useTranslations('namespace')

Analytics

The project uses Vercel Analytics for basic deployment metrics.

License

Private project.

Support

For questions or issues, please refer to the project maintainers.