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 queue of waiting lists for admission.
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" posted a tweet:
It's not hard to see that the tweet content itself (like the attention-grabbing 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 the coding for the project.
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 really 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 used quotes when I said "I" just now.
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'm sure it's 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? Let's 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 directly told me 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.
But 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 made me emotional. 😭😭😭
Stop being moved. I copied it immediately!
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, here’s what I did:
- Wrote a comment to tell Copilot what the next code does (i.e., an animated blinking cursor, the same height as the text).
- Pressed enter to confirm.
- Wrote another line. Copilot suggested how to write this line.
- Pressed enter to confirm.
- Wrote another line. Copilot suggested how to write this line.
- Pressed enter to confirm.
- Wrote another line. Copilot suggested how to write this line.
- Pressed enter to confirm.
- "Wrote" it all...
I must confess: this is really most of my daily work routine, where I just write comments and madly press enter, while Copilot writes the code. And 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 ChatGPT response on the web is too long, it will stop abruptly. 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, I let Copilot help with this little issue—
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 each review and name into the data structure in the code myself, which was too troublesome. So I asked directly:
Using the following data structure, help me mix these data together.
Great, 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 reviews in a Twitter style.
I copied it over and checked 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 Rick Roll#
Some other implementations will be skipped here 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 little click, the code was pushed to GitHub and deployed using Vercel's 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 Remarks#
Except for the time I went out for a meal, the entire process took less than an hour and did not exceed the current GPT-4 web version's limit of 25 messages/3 hours. Most of the answers to my questions were spot on, with no need for extra modifications or follow-ups! And I didn't carefully consider my prompts; I just casually chatted 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 modify, helping to write some small functions/template code
- Saving code, pushing code, deploying code
Did I create anything original in this process? 🤔
What else 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 melancholic.
Just as I was lamenting, I suddenly jolted—
Oh shit！