Jokes, Votes, Launch

devarno
post-background
How I shipped a joke-rating app in just 24 hours
<-return_to_blog/>
$_jokes
$_humour
$_nextjs
$_webdev
$_public
$_mvp

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!

Goal

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.

Requirements

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.

Design

API Endpoints

The endpoints provide the core functionality of PunPal.net, enabling users to fetch random jokes, cast votes, view popular jokes, and receive feedback.

#EndpointPurposeResponse
1GET /api/jokesUsed to fetch 4 random jokes upon startup/refresh{ jokeId: ObjectId, jokeText: string }[]
2POST /api/voteUsed to cast an anonymous vote for a specific joke{ message: string }
3GET /api/most-votedUsed to fetch the 10 most popular jokes{ jokeId: ObjectId; jokeText: string; voteCount: number; lastVotedAt: number; }[]
4GET /api/count-todayUsed as feedback for user following successful vote{ count: number }
UI Components

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 NamePurposeEndpoint(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-

Journey

Building this app was both exciting and stressful. Here are the milestones and hurdles I faced during the 24-hour process:

1. Public debugging

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.

2. Deployment disasters

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.

3. Lessons
  • 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.
4. Milestones

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.

Result

Fin

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 šŸ‘€šŸ”„