Next.js Wedding Website with Supabase

A comprehensive wedding website built with Next.js 15, TypeScript, Supabase, and Tailwind CSS featuring real-time guestbook, RSVP system, song requests, and admin seating chart management.

Tech Stack

**Framework**: Next.js 15 with App Router and Turbopack

**Language**: TypeScript (strict mode)

**Styling**: Styled Components + Tailwind CSS

**UI Components**: ShadCN UI

**Database**: Supabase (PostgreSQL with real-time subscriptions)

**Authentication**: Supabase Auth

**State Management**: React hooks and context

Project Structure

```

/app # Next.js app directory

/(auth-pages) # Protected routes requiring authentication

/admin # Admin seating chart management

/protected # Protected info for guests

/(public-pages) # Public routes

/ # Home page with wedding details

/gallery # Photo gallery

/guestbook # Real-time guestbook

/rsvp # RSVP form

/songs # Song request form

/success # Success confirmation pages

/api # API routes for form submissions

/components # React components

/admin # Admin-specific components (seating chart)

/gallery # Gallery components

/guestbook # Guestbook components

/ui # ShadCN UI components

/lib # Utilities and configurations

/supabase # Supabase client and types

/public # Static assets and images

/styles # Global styles

```

Development Workflow

Setup Environment

1. Create `.env.local` with required Supabase credentials:

- `NEXT_PUBLIC_SUPABASE_URL`

- `NEXT_PUBLIC_SUPABASE_ANON_KEY`

- `SUPABASE_SERVICE_ROLE_KEY`

2. Install dependencies:

```bash

npm install

```

Common Commands

**Development**:

```bash

npm run dev # Start development server with Turbopack

npm run build # Build for production

npm run start # Start production server

npm run preview # Preview production build locally

```

**Code Quality**:

```bash

npm run lint # Check for linting issues

npm run lint:fix # Auto-fix linting issues

npm run type-check # Check TypeScript types

npm run format # Format code with Prettier

```

**Testing**:

```bash

npm test # Run Jest tests

npm run test:watch # Run tests in watch mode

```

Key Features Implementation

Authentication Flow

Protected routes under `/(auth-pages)` require Supabase authentication

Auth middleware in `/middleware.ts` handles route protection

Admin features restricted to authenticated users

Real-time Features

The guestbook uses Supabase real-time subscriptions:

Subscribe to database changes on component mount

Updates pushed instantly to all connected clients

Optimistic UI updates for better UX

Form Handling Pattern

All forms (RSVP, songs, guestbook) follow this pattern:

1. Client-side form validation

2. API route handles submission (`/app/api/...`)

3. Server-side validation before database insertion

4. Redirect to success page with confirmation

Admin Seating Chart

Drag-and-drop interface for table arrangements

Real-time updates when seating changes

Protected by authentication middleware

Persists to `seats` and `tables` Supabase tables

Database Schema

Key Supabase tables:

`rsvp` - Guest RSVP responses

`songs` - Song requests from guests

`guestbook` - Real-time guestbook entries

`seats` - Individual seat assignments

`tables` - Table configuration and layout

Styling Strategy

**Tailwind CSS**: Utility classes for layout and spacing

**Styled Components**: Complex component-specific styles

**ShadCN UI**: Accessible, consistent UI primitives

Pre-commit hooks enforce consistent formatting

Development Best Practices

TypeScript strict mode enabled - fix type errors before committing

Pre-commit hooks run linting and type checking automatically

Turbopack provides fast HMR in development

ESLint configured with Next.js recommended rules

All API routes should validate input server-side

Use Supabase Row Level Security (RLS) policies for data protection

Troubleshooting

**Environment variables not loading**: Ensure `.env.local` exists and Next.js dev server is restarted

**Real-time subscriptions not working**: Check Supabase project settings and confirm real-time is enabled

**Type errors**: Run `npm run type-check` to identify all TypeScript issues

**Build fails**: Check `npm run lint` and fix any ESLint errors first

Next.js Wedding Website with Supabase

Next.js Wedding Website with Supabase

Tech Stack

Project Structure

Development Workflow

Setup Environment

Common Commands

Key Features Implementation

Authentication Flow

Real-time Features

Form Handling Pattern

Admin Seating Chart

Database Schema

Styling Strategy

Development Best Practices

Troubleshooting

Reviews (0)