I like to do cute surprises for friends around the holidays. For 2023, 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.

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.

This project is designed to use 2 environment variables, NEXT_PUBLIC_PARCHMENT_SVG and MYSTERY.

NEXT_PUBLIC_PARCHMENT_SVG is simply a string containing an SVG to be used as the parchment background for the gift messages. It can be tailored to anything, though in my personal deployment I've use a papyrus scroll clipart SVG from EmilTimplaru's Etsy shop as I liked that style.

Secondly, there's a backend-only 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
    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.",
    "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).

Based on code originally by Codrops
Copyright 2013, Codrops http://www.codrops.com
Licensed under the MIT license.

Nextjs Typescript ES6 port by Jason Robitaille with alterations to suit game gifting purpose
Copyright 2023, Jason Robitaille
Updates licensed under the Apache-2.0 license.

Music "Festive Fireside" by Steve Oxen
Sound effects by https://pixabay.com