April Fools Disrupted: Announcing April Fools Challenge Winners!
This year, we turned the tables on April Fools’ Day. Instead of pranks, we launched the April Fools Challenge — a week-long coding competition where developers built playful, creative, and intentionally broken web apps that "break in style" but still teach real skills.
Today, we’re announcing the winners — and walking you through how to build your own "Fool-Proof Voting App" using Node.js, Express, and a dash of humor.
🏆 Meet the Winners
@jenny_codes – “404 Love Not Found”
A dating app that only shows error messages. Built with React and Express.
Prize: $500 + a rubber chicken signed by the Dev.to team.@dev_meme_lord – “Infinite Loading Spinner”
A productivity app that loads… forever. Bonus: it plays elevator music.
Prize: Lifetime Pro membership + a custom “I Survived April Fools 2024” T-shirt.@code_wizard99 – “Reverse UX Calculator”
Every time you press “=”, it deletes your browser history.
Prize: $250 + a mystery box of developer swag.
🛠️ Build Your Own Voting App (With a Twist)
Let’s build a simple April Fools Voting App where users can vote for their favorite prank — but every 3rd vote triggers a fake system crash.
We’ll use:
- Node.js + Express for the backend
- EJS for templating
- Vanilla JS for client-side pranks
Step 1: Setup the Project
mkdir april-fools-vote
cd april-fools-vote
npm init -y
npm install express ejs
Create the basic folder structure:
mkdir views public
touch app.js views/index.ejs public/script.js
Step 2: Create the Server (app.js)
const express = require('express');
const app = express();
const PORT = 3000;
// Middleware
app.set('view engine', 'ejs');
app.use(express.static('public'));
app.use(express.urlencoded({ extended: true }));
// Mock vote data
let votes = {
'404 Love Not Found': 0,
'Infinite Loading Spinner': 0,
'Reverse UX Calculator': 0
};
let totalVotes = 0; // Track total votes for the prank
// Routes
app.get('/', (req, res) => {
res.render('index', { votes, totalVotes });
});
app.post('/vote', (req, res) => {
const { entry } = req.body;
if (votes[entry] !== undefined) {
votes[entry]++;
totalVotes++;
// Trigger prank every 3rd vote
if (totalVotes % 3 === 0) {
return res.render('prank');
}
}
res.redirect('/');
});
app.listen(PORT, () => {
console.log(`🎉 April Fools Voting App running on http://localhost:${PORT}`);
});
Step 3: Create the Voting Page (views/index.ejs)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>April Fools Challenge - Vote!</title>
<style>
body { font-family: 'Comic Sans MS', cursive; text-align: center; padding: 50px; }
h1 { color: #ff4081; }
button { font-size: 1.2em; margin: 10px; padding: 10px 20px; }
.entry { background: #f0f0f0; padding: 20px; margin: 10px; border-radius: 10px; }
</style>
</head>
<body>
<h1>🎉 Vote for Your Favorite April Fools Entry!</h1>
<% Object.keys(votes).forEach(entry => { %>
<div class="entry">
<h2><%= entry %></h2>
<p>Votes: <%= votes[entry] %></p>
<form action="/vote" method="POST">
<input type="hidden" name="entry" value="<%= entry %>" />
<button type="submit">Vote!</button>
</form>
</div>
<% }); %>
<script src="/script.js"></script>
</body>
</html>
Step 4: Add the Prank Page (views/prank.ejs)
Create views/prank.ejs:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>System Crash</title>
<style>
body {
background: #000;
color: #0f0;
font-family: 'Courier New', monospace;
text-align: center;
padding: 100px;
}
#terminal { white-space: pre; font-size: 1.2em; }
</style>
</head>
<body>
<div id="terminal"></div>
<script>
const msg = "CRITICAL ERROR: VOTE SYSTEM OVERLOADED\\nINITIATING
---
☕ **Playful**
Top comments (0)