This week, I was thrilled to gain an amazing following on Bluesky, and as a token of appreciation for the incredible support, I decided to dive into a quick and fun #buildinpublic project.
Less than 24 hours later, I launched PunPal.net - a humour hub to pick your favourite puns, vote anonymously, and see which jokes top the charts!
My mission was simple: inspire others to create fun, creative apps and bring energy to the #buildinpublic community.
I wanted to show that even small projects could have a big impact when you share the process openly.
I aimed to build the MVP quickly but with key interactive features. The main priority was building a system where users could vote anonymously on jokes and see how their choices contributed to the leaderboard.
The key features that this project required:
Random joke fetcher
- fetches a random set of 4 jokes from the PunPal database.Voting system
- users cast votes on jokes, which then influence the leaderboard.Leaderboard
- tracks the most popular jokes based on existing votes.With the top-level requirements defined, I set the stage by running a simple create-next-app command. This provided a clean slate and the perfect foundation for building a fresh Next.js application, ready to bring my vision to life.
The endpoints provide the core functionality of PunPal.net, enabling users to fetch random jokes, cast votes, view popular jokes, and receive feedback.
# | Endpoint | Purpose | Response |
---|---|---|---|
1 | GET /api/jokes | Used to fetch 4 random jokes upon startup/refresh | { jokeId: ObjectId, jokeText: string }[] |
2 | POST /api/vote | Used to cast an anonymous vote for a specific joke | { message: string } |
3 | GET /api/most-voted | Used to fetch the 10 most popular jokes | { jokeId: ObjectId; jokeText: string; voteCount: number; lastVotedAt: number; }[] |
4 | GET /api/count-today | Used as feedback for user following successful vote | { count: number } |
The UI components are designed for simplicity and engagement. They enable users to vote on jokes, view the most popular ones, and interact with the app seamlessly, while additional components like the banner and footer enhance overall usability and branding.
Component Name | Purpose | Endpoint(s) Used |
---|---|---|
<JokeVoter/> | Displays a random set of jokes for users to interact with. | 1 - 2 - 4 |
<MostPopular/> | Displays the top-voted jokes in descending order. | 3 |
<Banner/> | Displays main site header and logo | - |
<Footer/> | Displays portfolio/social links for completeness | - |
Building this app was both exciting and stressful. Here are the milestones and hurdles I faced during the 24-hour process:
Debugging a #buildinpublic project with a 'time restriction' is no joke. I ran into several issues with the random joke fetcher and voting system, and debugging them with users watching was intense. But every issue was a learning experience.
Getting everything live came with its own set of deployment challenges. There were issues with loading times and voting system feedback, and a whole build log 'pre-rendering error' headache that kept me occupied unitl I went to bed.
But through persistence and a bit of stress, I managed to resolve everything.
Pressure ā growth
- debugging and deployment under public scrutiny introduced challenges, but overcoming them made the release even more rewarding.Simplicity works
- the faster I kept things, the quicker I was able to deploy and get feedback.Community is key
- I had amazing support from people following along, which kept me motivated through the challenging chapters.Despite the hurdles, PunPal ended up with a fully functional MVP, including:
Action feedback
ā
- each vote now shows an immediate feedback with updated vote count.Optimised loading
ā
- improved handling of data fetches and default states.Responsive UI
ā
- the app looks great and works smoothly across different devices.PunPal.net was an exciting project to work on publicly. The whole experience was both a challenge and a reward, and Iām excited to continue building, improving, and sharing these projects with you to keep the #buildinpublic spirit alive.
Stay tuned, more public builds coming soon šš„