Zane St. John
I'm Zane, and I live to cultivate joy.
I'm Zane, and I'm a software engineer and creative technologist looking to, well, make you smile!
If you're short on time, or if you're just trying to get in touch, here are a few quick links:
Ever since I was young, I loved making people smile. When I was small, I had a stack of blank CDs on my desk, and I'd record myself at every chance I got: singing improvised songs, reading made-up stories, and just talking.
Soon, I upgraded to DVDs. I recorded myself, my brothers, my parents, and even my dog, stitching clips together and adding effects in iMovie.
My desire to cultivate happiness was insatiable. Around the time I turned five, my dad introduced me to BASIC, and I started writing programs on a Tandy CoCo2 emulator. These programs were simple but designed to engage: choose-your-own-adventure stories, jokes, and other simple games.
Over time, I transitioned from BASIC to Small Basic to JavaScript. In the summer after eighth grade, a fateful summer of work experience exposed me to a plethora of new languages, technologies, and paradigms (thanks Jai). When high school started in the fall, I knew I wanted to seriously pursue computer programming and software development.
Even as I grew, and as I continue to grow, the goal of my programs has remained the same: to make people smile, no matter who they are.
I'm a Stanford undergrad (originally class of 2026) currently on leave to work and to learn. While I have not yet declared a major, I am leaning toward computer science or symbolic systems.
When not busy with class or coding something up for fun, I performed in Fleet Street, Stanford's all-original comedy a cappella group. I served as Business Manager during the 2023-2024 school year.
During this gap year, I am working as a software engineer for Infinity Marketing Team, an experiential marketing company in the greater LA area. We specialize in building innovative apps, games, and immersive physical experiences for clients including State Farm and HP.
Previously, I have done software and creative work in:
- AI for government, leading the engineering of a startup using LLMs/RAG to bring vast amounts of data to the fingertips of city governments.
- Experiential marketing, in which I helped design, code, and run a booth at the 2023 Anime Expo for OMEN by HP
- Web3/Crypto, developing software/dApps for a number of companies and DAOs
For the most up-to-date information on my work, please see my LinkedIn.
Here are some projects of mine from the past few years, ranging from serious and elaborate to downright silly.
Popup experiential promo at Stanford
- Experiential Marketing
- TypeScript
- Image Processing
- Fabric.js
- React
In spring quarter of my sophomore year, I designed a candy-filled experience to promote Fleet Street's 2024 Spring Show, FLEETHEARTS.
Passersby could stop by to create a custom box of candy with their face on it. Optionally, using my custom-coded photo booth and editor, users could add text and drawings to their design to further personalize. We then printed their design out and stuck it to a delicious box of conversation hearts.
In under three days, we distributed five pounds of candy to members of the community, driving hundreds of additional impressions on our website and Eventbrite.
Viral clothing brand at Stanford
- WordPress
- eCommerce
- Print-on-Demand
- Marketing
- Product Design
In April 2023, Stanford ResEd changed the names of the University's controversial residential neighborhoods, using names chosen by the student body.
As many of us noticed, putting together the respective first letters of the new names spell out “SHAGWORM.” So the very next day, I set up an online storefront to sell SHAGWORM merchandise parodying official Stanford neighborhood merchandise: T-shirts, hats, backpacks, and even underwear.
I announced the store on Fizz (student social media), and within weeks, the site reached 4-figure revenue and made it onto the front page of the Stanford Daily.
Auto-generated lecture notes
- AWS CDK
- ECS
- PostgreSQL
- TypeScript
- Node.js
- Prisma ORM
- React
In winter of my sophomore year, I took SYMSYS 1: Minds and Machines, a “flipped classroom”-style course, in which lectures are watched before section meetings and guest lectures. While I found the course interesting overall, I realized I didn't usually need to watch the entire lecture video (~40-60 minutes each) to glean relevant insights.
So, for my final project in CS 40: Cloud Infrastructure and Scalable Application Deployment, I decided to build LectureHero, a scalable and elastic tool to generate concise, informative lecture notes for Panopto course videos.
I deployed LectureHero using AWS CDK Infrastructure-as-Code (written in Python), using Fargate and Aurora (among other technologies) to ensure elasticity and scalability across the stack. I wrote the backend in TypeScript/Node.js, and the frontend was also TypeScript + React.
Learn more about the infrastrucutre and tech stack in the README!
Official site for Stanford a cappella
- TypeScript
- React
- Next.js
- Chakra UI
In partnership with Stanford's A Cappella Council, I built acappella.stanford.edu (formerly StanfordACappella.com), an online portal for a cappella auditions and shows.
Using the site, prospective auditionees could find information about each a cappella, including genre, voice parts, and theme. Using each group's audition link, auditionees can seamlessly sign up to audition for the groups of their choice.
Thanks to the the collective marketing and publicity efforts of all ten of Stanford's a cappella groups, the site processed thousands of pageviews in less than a week, keeping the Stanford community in the know about a cappella auditions and performances.
Scheduling for the COVID era
- Node.js
- JavaScript
- MySQL
- Mailgun
- DevOps
In March 2020, students at Windward School transitioned to remote learning to slow the spread of COVID-19. While students and teachers adapted impressively to the sudden change, many found it difficult to keep track of their schedules in this entirely different learning experience.
In response, I created Schoop, an open-source schedule app designed for the remote-learning era. Windward students could enter their classes and Zoom links, and each day they would see a personalized schedule.
Shoutout to Elliot for creating an awesome Google Calendar integration!
Interactive AI-generated comedy
- OpenAI
- GPT-4
- Node.js
- React
I made FleetGPT for Fleet Street's 2023 Spring Show. The idea was that the audience would suggest topics for a skit (in this case, person, place, and thing), and the program would use OpenAI to brainstorm and then generate an original skit. A few of us then performed the skit before the audience, never having read it before.
Given the topical nature of ChatGPT at the time, the skit was a hit! Fun fact for my Stanford folks: I wrote most of the UI code for this over a two-hour breakfast at Lakeside!
Barbershop tags on your flip phone
- JavaScript
- Vercel
- Serverless
- Mobile Development
In my freshman year, the amazing Fleet Street community introduced me to barbershop tags. They're so fun to sing with a group of friends! The best part is that many of the best barbershop tags are accessible through the free goodtags app.
Trouble is, I briefly switched to a flip phone mid-year. Though it was great for my mental health and time management, the flip phone annoyed the hell out of anyone who wanted to get ahold of me. Worse yet, I couldn't access my beloved barbershop tags!
Eventually, the awkwardness of attempting to singing tags without sheet music was simply too much. Half an hour and a bottle of Dunkin' Iced Coffee later, tinytags was born!
tinytags is a shiny frontend for BarbershopTags.com, designed for flip phones. Assuming your dinky phone's web browser knows what a KeyboardEvent is, you're all set to pan, zoom, and sing!
If you want to reach me about anything, please feel free to email me at hey [at] zanestjohn [dot] com.
If that doesn't work, feel free to go looking for me on campus — I'm not great at hide-and-seek!
P.S. Thanks for helping me contribute to the website obesity crisis!
Don't believe me? Open your DevTools and go to the Network tab, then refresh this page… it's a doozy.
Wow! So this is what it feels like to be printed on paper. :)