HolidayGift2024

I like to do cute surprises for friends around the holidays. For 2024, I decided to make a quick-n-dirty customized holiday gift website, which can provide customized message for predefined recipients as well as distribute preconfigured Steam game redeemable codes.

Realistically, this also ended up as a fun testbed example single-page Next.js webapp with a threejs 3D photosphere.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

Environment Variable Setup

This project is designed to use environment variables for assets and game keycode data.

• NEXT_PUBLIC_BACKGROUND - An HDR image used for environment background. Any panorama image can be used for this.
• NEXT_PUBLIC_BACKGROUND_LOW - An basic static image used for page background on low-end devices.
• NEXT_PUBLIC_ENVELOPE - An animated envelope model (I used this one). Any similar model with corresponding animations could be used.
• NEXT_PUBLIC_ENVELOPE_LOW - A basic static image used for the envelope on low-end devices.
• NEXT_PUBLIC_LETTER - A jpg image used to provide texture for the letter.

There's also backend-specific MYSTERY environment variable containing a stringified JSON value containing gift game codes and personalized metadata. This is the expected interface for the object:

interface MysteryObject {
  [userID: string]: {
    name?: string; // recipient name
    message?: string; // customized gift message to override default top message
    footer?: string; // footer message after game codes, right before signature
    games: {
      name: string; // game name, not currently used anywhere
      code: string; // redeemable game code value
    }[]; // array of the game details
  }
}

For example:

{
  "00000000-0000-0000-0000-000000000000":{
    "name":"Mr. Debug",
    "message":"Test debug message.",
    "footer": "Have a great holidays!",
    "games":[
      {"name":"Game 1","code":"00000-00000-00000"},
      {"name":"Game 2","code":"00000-00000-00000"},
      {"name":"Game 3","code":"00000-00000-00000"}
    ]
  },
  "11111111-1111-1111-1111-111111111111":{
    "games":[
      {"name":"Game 1","code":"00000-00000-00000"},
      {"name":"Game 2","code":"00000-00000-00000"},
      {"name":"Game 3","code":"00000-00000-00000"}
    ]
  }
}

Then stringify the JSON and store it as a MYSTERY environment variable.

User gifts can then be accessed via unique special https://webserver/?id=<userID> URLs, while anyone visiting the webserver without the proper ID will just get a basic holiday greeting (no gift).

License

GLB model "falling snow loop", Copyright 2020 Elin Hohler under CC Attribution 4.0 license
Music "Holiday Homecoming" by Steve Oxen
Paper crackle sound effect by https://pixabay.com

Holiday Gift 2024 webapp is Copyright 2024, Jason Robitaille under the Apache-2.0 license.