equinoX — TOPLAP Italia

Event website for equinoX, the live coding unconference in Pisa celebrating 10 years of TOPLAP Italia (March 20–22, 2026). Single-page site with an interactive p5.js hero, unconference concept section, and proposal submission form.

---

Tech Stack

Layer	Technology
Build	Vite 5
Framework	React 18, TypeScript
UI	shadcn/ui (Radix primitives), Tailwind CSS
Routing	React Router DOM v6
Data	TanStack React Query, Supabase
Creative coding	p5.js
Email	Resend (via Supabase Edge Function)

---

Repository Structure

equinox-toplap-it/
├── src/
│   ├── App.tsx                 # App shell, providers, routes
│   ├── main.tsx                # Entry point
│   ├── index.css               # Tailwind + design tokens
│   ├── pages/
│   │   ├── Index.tsx           # Main landing page
│   │   └── NotFound.tsx        # 404
│   ├── components/
│   │   ├── HeroSection.tsx     # Hero wrapper, scroll indicator
│   │   ├── P5HeroCanvas.tsx    # p5.js canvas + live code editor
│   │   ├── ConceptSection.tsx  # Unconference explanation
│   │   ├── ProposalForm.tsx    # Workshop/performance proposal form
│   │   ├── Footer.tsx          # Links, TOPLAP Italia CTA
│   │   ├── CodeDecoration.tsx  # Sidebar code snippets
│   │   └── ui/                 # shadcn/ui components (40+)
│   ├── hooks/
│   │   ├── use-toast.ts
│   │   └── use-mobile.tsx
│   ├── lib/
│   │   └── utils.ts            # clsx, tailwind-merge helpers
│   └── integrations/supabase/
│       ├── client.ts           # Supabase client
│       └── types.ts
├── supabase/
│   ├── config.toml
│   └── functions/
│       └── send-proposal/      # Edge function for proposal emails
├── public/
├── index.html
├── vite.config.ts
├── tailwind.config.ts
├── components.json             # shadcn config
└── package.json

---

Features

• Interactive hero: p5.js canvas with mosaic tiles, wave distortion, scanlines, glitch effects. Click to open a live code editor; edit config vars and see changes in real time.
• Unconference concept: Explains the participant-driven format (no fixed agenda, emergent structure).
• Proposal form: Submits workshop/performance/discussion/installation proposals. Sends notification to organizers and confirmation to the submitter via Resend.
• Terminal/code aesthetic: JetBrains Mono font, green-on-black palette, scanlines, brutalist borders, code snippets in sidebars.

---

Getting Started

Requirements: Node.js 18+ and npm (or nvm).

# Clone and install
git clone <YOUR_GIT_URL>
cd equinox-toplap-it
npm install

# Start dev server (http://localhost:8080)
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Run tests
npm run test

---

Environment Variables

Create a .env file in the project root. The frontend expects:

Variable	Description
VITE_SUPABASE_URL	Supabase project URL
VITE_SUPABASE_PUBLISHABLE_KEY	Supabase anon/public key

For the send-proposal Supabase Edge Function, set in Supabase dashboard (Settings → Edge Functions → Secrets):

Variable	Description
RESEND_API_KEY	Resend API key for sending emails

---

Code Status & Architecture

• Routing: Single route /; NotFound catches all other paths.
• State: Mostly local React state. No global store; TanStack Query is wired but not heavily used for this page.
• Supabase: Client configured for auth/session; used primarily to invoke the send-proposal Edge Function (no database tables for proposals).
• Design system: CSS variables in index.css (primary green, border radius 0, scanlines, etc.). shadcn uses @/components/ui and @/lib/utils.

---

Best Practices for Modifying

Adding or changing UI

• New components: Add under src/components/. Use brutal-border, terminal-input, and text-primary from index.css for consistency.
• shadcn components: Add via npx shadcn@latest add <component>. Config lives in components.json.
• Styles: Prefer Tailwind and existing utilities (grid-pattern, scanlines, noise-overlay) rather than new one-off classes.

Editing the hero canvas

• P5HeroCanvas.tsx: Main sketch logic is in the sketch function. paramsRef holds values parsed from the editor code.
• Live editor: INITIAL_SKETCH_CODE is the default. To add new tweakable params, extend parseSketchCode() and SketchParams, then use paramsRef.current in the sketch.
• Performance: Canvas size is capped; tiles are created once and mutated. Avoid creating new objects every frame.

Proposal form / backend

• ProposalForm.tsx: Calls supabase.functions.invoke('send-proposal', { body: {...} }).
• send-proposal: Deno Edge Function. Validates inputs, limits lengths, escapes HTML, sends via Resend. Recipients are hardcoded; adjust in index.ts if needed.
• Emails: Sent from [email protected]; ensure Resend domain verification.

Code style

• TypeScript strict mode.
• Path alias: @/ → src/.
• Prefer functional components and hooks; avoid class components.

---

Deployment

• Static build: npm run build outputs to dist/. Deploy to any static host (Vercel, Netlify, GitHub Pages, etc.).
• Supabase Edge Functions: Deploy via Supabase CLI: supabase functions deploy send-proposal.
• Environment: Ensure VITE_SUPABASE_URL and VITE_SUPABASE_PUBLISHABLE_KEY are set in the hosting environment.

---

License & Credits

© 2025 equinoX · TOPLAP Italia · Pisa

Hero canvas concept inspired by ICLC 2025 website.