Our first hackathon back in September was a blast – the community really showed up with some incredible Weather App solutions. We're excited to do it all again! If you missed the first one, here's your chance to join in. And if you participated last time, we'd love to see you back.
Congratulations again to Abere Fejiro, who took first place in our Weather App hackathon! Her winning solution went well beyond the requirements – featuring a full PWA implementation, voice search using the Web Speech API, location comparison, and polished micro-interactions with Framer Motion and sound effects. The attention to detail and thoughtful README made it a standout.
What's the FM30 Hackathon?
It's a 30-day challenge where you build the best solution you can to our brand new Typing Speed Test challenge. There's no pressure to speed-run it – take your time, experiment, and focus on quality.
The challenge will stay on the platform permanently, so you can always build it later at your own pace. But the hackathon adds some extra motivation: a deadline, prizes, and the chance to see how your work stacks up against the community.
Bonus: During the hackathon, everyone gets free access to the Figma design file – no Pro subscription required. Once the hackathon ends, Figma access will require a Pro plan, so now's a great time to jump in.
This time around, you'll build a typing speed test that calculates words per minute (WPM) and accuracy. It's a satisfying project – lots of real-time UI updates, DOM manipulation, and working with timers. You'll end up with something genuinely fun to use and a solid portfolio piece.
How to participate
Getting started
Head to the Typing Speed Test challenge page and download the starter files. The README covers everything you need to know.
From there, spend the next 30 days building your solution. Go beyond the requirements if you can – add features, polish the details, make it something you'd actually want to use. The "Ideas to test yourself" section on the challenge page has some inspiration.
We'd love to see your progress along the way. Share updates on social media using #FM30Hackathon, and we'll reshare standout posts to boost your visibility. We've also set up a dedicated #hackathon-chat channel in Discord – a space to share progress, ask questions, and connect with others taking on the challenge.
Submission guidelines
Post your solution in the #hackathon-submissions Discord channel under the Typing Speed Test thread. Your submission needs one thing: a link to your solution on Frontend Mentor.
One submission per person – duplicates will be removed and may result in disqualification.
Your submission must include:
- A custom README: We provide a template in the starter files. Tell us about your process, the features you added, and what you learned. This is mandatory – no README means no valid submission.
- A meaningful commit history: We want to see how your solution evolved. Multiple commits that show your progress, not a single large dump at the end.
- Public access: Make sure your live demo and GitHub repo are both publicly accessible.
Deadline: Monday, January 19th at 09:00 AM GMT. We'll lock the submission thread at that point.
How we'll choose winners
Stage 1: Shortlisting
Our team reviews all valid submissions and selects five finalists. We're looking at:
- Engagement on your Frontend Mentor solution page (likes and bookmarks) – so share your solution link widely!
- Code quality: clean, readable, well-structured code with accessibility considered
- How well you've met the requirements – and whether you've gone beyond them
- Your README: the effort you put into documenting your process matters
Stage 2: Community vote
The five finalists go to a public vote. The community picks the top three winners.
Prizes
- 🥇 1st place: One-year Frontend Mentor Pro subscription ($96 value)
- 🥈 2nd place: One-month Pro subscription
- 🥉 3rd place: One-month Pro subscription
The challenge
You'll build a typing speed test with passages stored in a local data.json file – no API setup needed.
Core requirements:
- Start a test by clicking Start or just typing
- Choose difficulty (Easy, Medium, Hard) and mode (Timed 60s or Passage)
- See real-time WPM, accuracy, and time while typing
- Get visual feedback: correct characters in green, errors in red/underlined, with a visible cursor
- Backspace to fix mistakes (original errors still count against accuracy)
- View results after each test with WPM, accuracy, and character counts
- Track personal bests with localStorage – celebrate when you beat your high score
- Responsive layout with proper hover and focus states
Ideas to push further:
- Multiple test durations (15s, 30s, 60s, 120s)
- Different text categories: quotes, lyrics, code snippets
- Historical tracking of your WPM and accuracy over time
- A keyboard heatmap showing where you make mistakes
- Shareable result cards for social media
Tips
Write a great README. Seriously. This is where you tell the story of your solution – your approach, the problems you solved, the extras you added. A thoughtful README can be the difference between making the shortlist or not.
Start early. You don't need to finish early, but starting early gives you room to iterate. The best solutions usually go through several rounds of refinement.
Help others. The Discord is full of people working on the same challenge. Answer questions, share what you've learned, and celebrate other people's progress. The hackathon is competitive, but the community spirit is what makes it fun.
Accessibility matters. Keyboard navigation, focus management, screen reader support – these things count. A polished, accessible solution stands out.
FAQs
Can I use frameworks or libraries?
Yes – React, Vue, Svelte, vanilla JS, whatever you prefer. Use what you're comfortable with or what you want to learn.
Can I use AI tools?
Yes, but you should understand every line of code in your solution. Your README should reflect your own learning process and decisions.
I'm a beginner – is this for me?
Absolutely. Focus on completing the core requirements and writing a solid README. Clean, simple, and well-documented beats complex and buggy.
Can I work with a teammate?
This is a solo challenge, but collaborating and helping each other in Discord is encouraged.
Key dates
- Starts: Friday, December 19th
- Submissions close: Monday, January 19th at 09:00 AM GMT
- Winners announced: Thursday, January 22nd
Links
Let's go!
We can't wait to see what you create. Good luck, have fun, and don't forget to share your progress with #FM30Hackathon.
Happy coding! 🎉
Top comments (0)