Hallow type

Inspiration Hallow Type was designed to change the mundane process of typing practice into an enjoyable seasonal game with a Halloween theme. Throughout the app, bats, ghosts, pumpkins, and other spooky effects usually associated with the Halloween season accompany the typing tests that enable the users to uplift their typing skills in a nice way.

What I Learned

Web Audio API: Created sound effects using oscillators and frightful vibrato

CSS Animations: Bats, ghosts, and glowing effects floating smoothly without any lag

Real-Time Multiplayer: A live typing contest using Firebase listeners

State Management: Managing the test logic, achievements, and user preferences for various sessions

SVG Design: Halloween icons with personal designs such as skulls and cauldrons

How It Was Built The experience is powered by a component-based structure:

Typing engine determines WPM and precision

Achievement system measures advancement and gives access to themed badges

Decorative Halloween overlay creates an ambiance but does not interrupt the gameplay

real-time audio generated with Web Audio API

Combining Firebase and localStorage to save user data

Challenges Performing full animations while maintaining good performance, proper caret positioning, browser restrictions on audio usage, and creating achievements that users find enjoyable and rewarding.

Built With

• animations
• api
• audio
• css
• firebase
• firestore
• react
• svg
• tailwind
• typescript
• vite
• web