> ## Documentation Index
> Fetch the complete documentation index at: https://help.helloazhenweb.top/llms.txt
> Use this file to discover all available pages before exploring further.

# Get started with Birthday Wall

> Deploy a personalized birthday countdown, wish wall, and music radio in under 10 minutes by forking the repo, configuring Supabase, and deploying to Vercel.

This guide takes you from zero to a live Birthday Wall in under 10 minutes. You'll fork the repository, install dependencies, connect a Supabase database, customize the birthday config, and deploy to Vercel.

<Tip>
  Steps 3–5 (Supabase setup and environment variables) are required only if you want the wish wall to save messages. The countdown timer, music radio, and games work without a database connection — you can skip to step 6 to run the app locally first.
</Tip>

<Steps>
  <Step title="Fork and clone the repository">
    Fork the Birthday Wall repository on GitHub, then clone your fork locally.

    ```bash theme={null}
    git clone https://github.com/your-username/birthday-web.git
    cd birthday-web
    ```

    Replace `your-username` with your GitHub username after forking from [github.com/helloxiaozhen/birthday-web](https://github.com/helloxiaozhen/birthday-web).
  </Step>

  <Step title="Install dependencies">
    Birthday Wall uses Next.js 14 and Supabase. Install all dependencies with npm.

    <CodeGroup>
      ```bash npm theme={null}
      npm install
      ```
    </CodeGroup>
  </Step>

  <Step title="Set up Supabase">
    Create a Supabase project and configure the required database tables for the wish wall and page configuration.

    Follow the full instructions in the [Supabase setup guide](/self-hosting/supabase), which covers:

    * Creating a new Supabase project
    * Running the migration SQL to create all required tables
    * Enabling Row Level Security policies
    * Locating your project URL and API keys
  </Step>

  <Step title="Set environment variables">
    In the project root, create a `.env.local` file and add the following variables. You'll find the values in your Supabase project under **Project Settings → API**.

    ```bash theme={null}
    NEXT_PUBLIC_SUPABASE_URL=https://your-project-id.supabase.co
    NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
    SUPABASE_SERVICE_ROLE_KEY=your-service-role-key
    NEXT_PUBLIC_SITE_URL=http://localhost:3000
    ADMIN_PASSWORD=your-admin-password
    ```

    | Variable                        | Description                                                          |
    | ------------------------------- | -------------------------------------------------------------------- |
    | `NEXT_PUBLIC_SUPABASE_URL`      | Your Supabase project URL                                            |
    | `NEXT_PUBLIC_SUPABASE_ANON_KEY` | Public anon key for client-side queries                              |
    | `SUPABASE_SERVICE_ROLE_KEY`     | Service role key for server-side admin operations — keep this secret |
    | `NEXT_PUBLIC_SITE_URL`          | The URL where the app is running (`http://localhost:3000` locally)   |
    | `ADMIN_PASSWORD`                | Password to access the admin panel                                   |

    <Warning>
      Never expose `SUPABASE_SERVICE_ROLE_KEY` in client-side code or commit it to version control. It grants full database access.
    </Warning>
  </Step>

  <Step title="Customize the birthday config">
    Open `lib/birthday-config.ts` and update the `person` object with the celebrant's details.

    ```typescript theme={null}
    export const birthdayConfig = {
      person: {
        name: "Your Person's Name",
        nickname: "Nickname",
        birthday: {
          month: 6,   // 1–12
          day: 19,    // 1–31
        },
        greeting: "A personal message for them",
      } as BirthdayPerson,

      countdown: {
        title: "Days until birthday",
        expiredTitle: "Today is your birthday",
      },
    };
    ```

    The fields you need to set:

    | Field            | Description                                 |
    | ---------------- | ------------------------------------------- |
    | `name`           | Full name displayed on the countdown page   |
    | `birthday.month` | Birth month as a number (1–12)              |
    | `birthday.day`   | Birth day as a number (1–31)                |
    | `greeting`       | A short message shown beneath the countdown |
  </Step>

  <Step title="Run locally">
    Start the development server and open the app in your browser.

    ```bash theme={null}
    npm run dev
    ```

    Visit `http://localhost:3000` to see the birthday countdown. Navigate to `/radio`, `/write`, `/report`, and `/games` to preview all five pages.
  </Step>

  <Step title="Deploy to Vercel">
    When you're ready to share Birthday Wall, deploy it to Vercel.

    Follow the full instructions in the [Vercel deployment guide](/self-hosting/vercel), which covers:

    * Pushing your code to GitHub
    * Importing the repository in Vercel
    * Adding all environment variables in the Vercel dashboard
    * Configuring a custom domain (optional)

    During the Vercel setup, remember to update `NEXT_PUBLIC_SITE_URL` to your production URL instead of `http://localhost:3000`.
  </Step>
</Steps>

## Next steps

Once Birthday Wall is live, explore the guides below to customize it further.

<CardGroup cols={2}>
  <Card title="Customize the birthday config" icon="calendar-heart" href="/customization/birthday-config">
    Change the celebrant's name, date, greeting, and countdown text.
  </Card>

  <Card title="Add songs to the radio" icon="list-music" href="/customization/music-config">
    Build a curated playlist with song titles, artists, lyrics, and artwork.
  </Card>

  <Card title="Wish wall" icon="heart" href="/features/wish-wall">
    Learn how visitors submit wishes and how to manage them in the admin panel.
  </Card>

  <Card title="Environment variables reference" icon="key" href="/self-hosting/environment">
    Full list of all required and optional environment variables.
  </Card>
</CardGroup>