A comprehensive typing speed application built as a solution for a Front End Mentor Hackathon. This project delivers two entirely distinct user experiences: a minimalist, professional environment for adults and a vibrant, "Cartoon Pop" interface for kids.
International Frontend Mentor Hackathon Project
Selected as a Top 5 finalist by the Frontend Mentor founder and team and finished in 2nd place after a community vote.
Why "Bora"?
"Bora" is a common Brazilian expression that roughly means "Let's go!" or "Come on!". It captures the energy and motivation behind this typing game. Encouraging users to jump in, have fun, and improve their typing speed. ;)
The core concept was to create a tool that adapts to the user's personality and age group. I achieved this by leveraging a robust theme-switching architecture, allowing the entire UI, from fonts to button physics, to transform instantly.
Designed for high productivity and concentration.
- Themes: Light, Dark, Sepia, Sakura, and VS Code.
- Modes: Standard, Quotes, Code, and Lyrics.
- Difficulty: Easy, Medium, Hard.
- Time Options: 15s, 30s, 60s, 120s, and Infinite (Progressive counter).
Designed to be playful, using Neo-Brutalism.
- Themes: Candy, Minecraft, Kitty, and Watermelon.
- Modes: Standard, Quotes, Code and Lyrics.
- Difficulty: Easy, Medium, Hard.
- Time Options: 15s, 30s, 45s, 60s.
| Technology | Purpose |
|---|---|
| React 18 + Vite | App setup and UI |
| TypeScript | Logic and type safety |
| SASS (SCSS) | Mixins, loops, tokens, and modular architecture |
| CSS Modules | Scoped styling and BEM methodology |
| BEM Methodology | Organized and maintainable CSS structure |
| Lucide-React | Icons for UI elements |
| Canvas-Confetti | Celebration effects when PB is broken |
| CSS Keyframes | Animations for transitions and interactions |
| Prettier | Code formatting and consistency |
- Advanced Theming & Mode Selector: Deep use of
data-themeattributes to swap global color palettes, border-radii, and shadows without page reloads. Includes a Mode Selector to switch between Type and Kids game modes. - Local Persistence: Personal Best (PB) records are tracked and saved in Local Storage, categorized by game mode (type or kids).
- Gamification: A confetti celebration triggers whenever a user breaks their personal record.
- Responsive Layout: Fully optimized for mobile, tablet, and desktop with custom breakpoints and fluid typography.
- Social Sharing: Built-in Share Button allows users to share their scores with others.
The biggest technical challenge and achievement was the Data Theme Implementation.
“I learned how powerful using data-theme with CSS Variables can be. By structuring my SASS tokens to react to data attributes on the body, I was able to completely change the look and feel of the app, from a minimalist VS Code–inspired style to a more playful Minecraft-like one, while keeping the same component structure and markup. The main challenge was managing state across two very different visual directions.”
- Logical Abstraction: Keeping the typing engine identical while the UI changed drastically.
- Responsive Design: Using complex media queries to ensure the "Split Home" layout worked on small mobile screens.
- WPM Accuracy: Fine-tuning the Words Per Minute calculation and the "Personal Best" logic.
- Clone the repository:
git clone https://github.com/mari-codes/bora-type.git
- Install dependencies:
npm install
- Run the development server:
npm run dev
This project was developed as a custom solution for the Typing Speeding Game challenge, focusing on UI versatility and clean code architecture.
- Mariana Borges (Frontend Mentor Profile) - @mari-codes