Timexoned

Inspiration

I wanted to create a fun and educational game that helps kids understand time zones and how time differs around the world. Many children find time zones confusing, so this game uses colorful visuals, engaging interactions, and a scoring system to make learning about time zones enjoyable and intuitive.

What it does

Timezone Swap is an interactive game where kids match the correct local time to a given city. Each round, a city is highlighted, and players select the correct time from multiple options. The game tracks the player’s score, provides immediate feedback on answers, and presents new challenges to reinforce learning.

How I built it

I built the app using React with functional components and hooks for state management. Tailwind CSS was used for styling to create a vibrant, kid-friendly interface. I leveraged the JavaScript Intl.DateTimeFormat API to accurately fetch current times in various time zones. The app dynamically shuffles cities and times to keep the gameplay fresh.

Challenges I ran into

One challenge was ensuring the times displayed were accurate regardless of the user's own time zone. Handling time zone conversions correctly and refreshing time data without lag was critical. Additionally, designing a UI that was visually appealing and easy to navigate for kids required iterative styling and feedback.

Accomplishments that I'm proud of

I'm proud of delivering a game that is both educational and entertaining, combining complex time zone logic with a simple, colorful user experience. The responsive design and engaging animations make the game accessible and fun for children on different devices.

What I learned

I deepened my understanding of JavaScript’s internationalization APIs and learned how to handle time zones effectively. I also gained experience creating playful, accessible UI designs using Tailwind CSS. Moreover, I learned the importance of iterative design and user feedback, especially when building for younger audiences.

What's next for Timexoned

Next steps include adding sound effects and celebratory animations like confetti to enhance engagement. I plan to introduce levels with increasing difficulty and possibly multiplayer support for friendly competition. I’m also considering integrating more cities and fun facts about them to enrich learning.

Built With

• javascript
• react
• tailwindcss
• vite