Typo Defence

Inspiration

Typo Defence is inspired by the common frustration of making typing mistakes, but with a creative twist. Instead of seeing typos as errors, we wondered: What if we could turn this common annoyance into an engaging game mechanic? The idea came from observing how certain misspellings are so common that they've become almost universal, like "definately" or "seperate”

What it does

Typo Defence is a unique typing game where players must intentionally match common typing mistakes. Players face waves of misspelled words floating across the screen, and must type them exactly as shown. The twist comes with special golden words that require correct spelling for bonus points. As players progress, they face increasingly challenging waves with faster words and more complex misspellings.

How we built it

Frontend: Built with Next.js 14 and React for a smooth, responsive user interface
Authentication: Implemented Clerk for secure user management
Database: Used DynamoDB for leaderboard and user data storage
Styling: Crafted with Tailwind CSS and Shadcn/UI for a modern, neubrutalism design
State Management: Utilized Zustand for efficient game state management
Animations: Incorporated Framer Motion for fluid animations and transitions

Challenges we ran into

Balancing game difficulty - making it challenging but not frustrating
Implementing accurate typing detection for both correct and intentionally incorrect spellings
Managing state across different game phases while maintaining performance
Creating a responsive design that works well on desktop while gracefully handling mobile limitations
Synchronizing the leaderboard system with real-time score updates