Note that this article requires joining the waitlist to read.
Cause#
Some say 2023 is the year of the waitlist, as various projects (mainly AI) present themselves to users with one request: join the waitlist.
A waitlist is a common strategy used to manage user access and usage. It is typically employed during the launch of new products or services to control user traffic and ensure system stability. This concept was seen earlier in university applications, where students submit their admission applications to universities, and the schools select students from a long queue of waitlisted applicants.
The benefits of a waitlist include:
But I really can't stand so many products rushing to launch before they are ready, all asking everyone to join the waitlist. This is understandable but very ridiculous.
So "I" casually created a satirical website: JoinTheWaitlist.
That's right, the entire website has just one button: JOIN THE WAITLIST. This is a "waitlist" website, and by joining the waitlist, you can queue to join the waitlist.
Then "I" tweeted:
It’s not hard to see that the content of the tweet itself (like the eye-catching emojis and writing style) is also very classic and satirical. This is thanks to GPT-4:
Writing this tweet was the last thing GPT-4 did for my project. Before that, it spent just an hour helping me complete almost all of the project’s code.
What!? Almost all of it was written by GPT-4? Yes. Because the idea popped into my head after I filled out yet another waitlist, but I was too lazy to spend time writing code. At that moment, I suddenly remembered that people on Twitter always say GPT-4 is so powerful that it can write projects for you. I wondered if it was really that magical? So, with an experimental purpose, I decided to try GPT with this project.
The result was very successful.
That's why I just put "I" in quotes.
So how was all this accomplished?
Step Zero: Create the Project#
I used Next.js (React) to develop the project, directly using a scaffold. It took ten seconds. This part is skipped.
If you have no programming background, you can ask GPT how to create a front-end project; I believe it will be a piece of cake.
Step One: Typing Slogans#
Think of Some Slogans#
Facing a blank project, I thought about the layout in my mind. At the top, I needed a large slogan area to keep typing, saying "Waitlist can help you....".
What slogans are there? Ask GPT:
Great, very ironic. I copied it directly into my project without changing a word.
Typing Effect#
Next, I asked how to implement a typing effect in React:
It even told me directly that I could use typeit-react and provided the usage code. I didn’t need to look up what libraries could be used or how to use this one.
However, the instance statement in the middle was a bit cumbersome, so I asked if it could be simplified:
I gave a light instruction, and it not only wrote it but also explained it. It really did, I cried. 😭😭😭
Stop being moved. I immediately copied it!
Blinking Cursor#
Next, I wanted to add a blinking typing cursor at the end. For this small task, I chose to let Copilot help me write it:
As shown in the picture, what I did was:
- Wrote a comment telling Copilot what the following code does (i.e., an animated blinking cursor that matches the text height).
- Pressed enter to confirm.
- Pressed enter to confirm.
- Pressed enter to confirm.
- "Wrote" it all...
I must confess: this is really most of my work routine; I just write comments and madly press enter, while Copilot writes the code. Also, remember to delete the comments at the end, leaving no trace to destroy the crime scene.
The result:
Step Two: Cool Button#
Since it's a waitlist, of course, I need a big button to click to join. I want this button to be very cool. Let me ask GPT:
Now please write me a very shiny button with ultimate animation effects, such as hover, click, glow, animation, transition, gradient, etc. Make everyone want to click it! Show me the CSS code.
I admit I’m not a good prompt engineer, but it still helped me write it.
It’s important to note that if the response from ChatGPT on the web is too long, it will be cut off. Don’t panic; just type "continue" or "继续".
After two rounds of continue, I got the button, and the effect was outstanding!
But I found the button had no click effect. No problem, let Copilot help with this small matter—
Let’s see the effect:
Alright, that should be about it!
Step Three: User Review Cards#
Next, I wanted to display a set of user reviews on the page.
Now write some Twitter users' reviews praising "JoinTheWaitlist" as great.
Generate some interesting fake usernames.
At this point, I suddenly realized that I had to copy the comments and names one by one and write them into the data structure in the code, which was too troublesome. So I directly asked:
Using the following data structure, help me mix these data together.
Alright, now I can copy it directly.
Oh right, I forgot to directly ask for the UI component code:
Help me write a Tailwind React component called UserReviews to display these comments in a Twitter style.
Copy it over and check the effect:
The final effect was also aided by some of Copilot's power. The avatars used a random generation service from Pravatar.
It was simply perfect.
Step Four: Add a Rick Roll#
Other implementations here will be skipped because they are quite different—ask it, it gives you, you copy and paste.
Here I want to mention something interesting: I wanted to implement an effect where clicking the JOIN THE WAITLIST button would redirect to the YouTube Rick Roll video.
With a trial-and-error mindset, I typed https://yout, and then:
Copilot suggested a video link.
I thought, no way...
Then I opened the video link— https://youtu.be/dQw4w9WgXcQ.
This moment made me very happy.
Step Five: Deploy Online#
Finally, with a small click, the code was pushed to GitHub and deployed using Vercel automatic deployment service. JoinTheWaitlist was deployed in a minute.
Step Six: Post a Tweet#
As mentioned at the beginning, I also had GPT help me with marketing.
Closing Words#
Aside from the time I went out for a meal, the entire process took less than an hour, without exceeding the current GPT-4 web version's limit of 25 messages/3 hours. Most of the answers to my questions were spot on, requiring no extra modifications or follow-ups! Moreover, I didn’t carefully consider my prompts; I simply had casual conversations with it.
After finishing, I reflected on the whole thing, and my participation mainly included the following parts:
- Proposing the idea
- Writing prompts for GPT
- Copying and pasting
- Letting Copilot help polish and write some small features/template code
- Saving, pushing, and deploying the code
Did I create anything original in this process? 🤔
What has my years of coding experience brought me besides experience? 🤔
What will future product development look like? 🤔
……
Closing my laptop, I was lost in thought, feeling a mix of emotions.
Just as I was lamenting, I suddenly jolted—
Oh shit！