ScottyValentines

This was a class project for 70415, Introduction To Entrepreneurship. The goal was to make as much money as possible over a few weeks. My group decided to sell Valentine's Day gift baskets (since it was coming up a few days after the end of the project). I built out this website to handle sales (which came in clutch because of how many random hours we got sales at).

It was built using

• Astro.js for the main app
• Pico.css for styling
• Node.js as a backend
• Stripe for payment processing
• Resend for emails
• Cloudflare for hosting
  • Domain was purchased via the Cloudflare Registrar
  • Hosted on Cloudflare Pages/Cloudflare Workers
  • Backed by a D1 database

This is an archive meant to serve as a reference for how the project worked and what technologies were used. It comes with no guarantees that it will work.

Structure

The project is split into two parts, the main site (in /scottyvalentines) and the email sender worker (in /svemailreminders).

The email reminder worker was created late in the project, and originally the project had the entire site in the root directory, rather than nested. When viewing old commits (pre 9061789c), you may run into issues because of this, such as having to run npm install again in the root directory. I recommend creating .env in the root directory (based on .env.example), and then symlinking it into both places where it's needed in later versions.

ln -s ../.env scottyvalentines/.env && ln -s ../.env svemailreminders/.env

Just be careful while jumping around, especially in post-moving commits, because your root .env may get accidentally tracked by Git.

The main page is where people can make purchases, where they can click to an individual product purchase page (e.g. /order/medium), fill out their details, and then be redirected through Stripe to pay (redirect link generated by checkout.ts). The Stripe checkout page will redirect to /order_success after a successful payment, while also firing off a webhook handled by webhook.ts.

Each recipient would recieve an email with a QR code that links to /organizer/deliver?orderID=<long-id>. This page is, like all organizer routes, only available to logged-in organizer users. From there, the organizer can view item details and mark the order as delivered. They can also manually enter order ids (which are shown below the QR code in the confirmation email as a backup) on the dashboard at /organizer/.

Recipients also get a link to be able to edit their dietary restrictions at edit?id=<long-id>. And they get a custom link which can let them send a gift back to whoever sent them theirs while keeping the sender's information secret. A scottyvalentines.com?returntheloveto=<order-id> link carries the information needed to identify who to send to through the pages.

svemailreminders was a quick and dirty Cloudflare Worker that sent email reminders to organizer users. I just set a CRON trigger schedule in the Cloudflare dashboard to run the worker the day before delivery (2/12 -> 0 20 12 2 *), so I didn't have to do anything manually. One note is that you can't set it run once, so I had to manually disable it so it wouldn't run again the next year on February 12th. But that gave me plenty of time to get around to it.

Viewing

Online Demo

The final version of the project, without any backing databases or other services, is deployed on GitHub Pages from this repo. View it at https://brucemcrooster.github.io/scottyvalentines/.

Viewing Locally

First, you'll need to get some environment variables. I'd recommend duplicating /.env.example into /scottyvalentines/.env and /svemailreminders/.env and then editing them as needed, or creating a root .env file and symlinking it into both places if you plan to bounce around the repo (such as to older versions where things weren't blocked).

Run npm install in the /scottyvalentines/ directory to install dependencies, then run npm run dev to start the development server. If you want to get a full working version, run npx wrangler dev. You may have to do some setup, and potentially play with the wrangler.jsonc file. Not really sure on this one.

The email reminder sender isn't much to look at locally. You can pop around the code, though.

Learning More

This repo is Apache 2.0 licensed, so you are free to explore the code and take pieces from it, with no guarantees. It's fairly well structured, and I threw in a few comments where I thought someone might be helped coming back later. AI also might be able to help you get an understanding. If you're trying to build something similar, you are required to switch up the branding, including the names, logo, and scottyvalentines.com domain, under the terms of the Apache 2.0 license.

I also don't guarantee any support, but if there is something you're interested in knowing more about, I might remember how I worked through it while developing this thing (at the time of writing this README, it's been 3 months since I looked at this codebase and I already forgot what build tool it used, so no promises). Shoot me an email at evan@brucemcrooster.dev.