Timeless: A Global Myth Explorer

A web-based interactive map application Lets users explore cultures, myths, and traditions from around the world Each country includes cultural summaries, myths, and festivals Users test their knowledge through quizzes Completing all content unlocks a final reflection experience (“Last Word”)

I built this because learning about world cultures through textbooks and lectures often yields unhelpful results to most people and doesn’t keep them engaged. So I wanted to create something that was interactive, engaging, and educational I want other people to really learn how to appreciate cultures from all across the world, especially ones they aren’t familiar with.

I built the app using React to create a component-based interface and manage state like data and user progress. I used Vite as the development and build tool because it’s fast and efficient. For styling, I used Tailwind CSS to quickly design a clean and consistent UI. The interactive map is powered by Leaflet with React-Leaflet, which lets me display markers and popups. All the content is stored in a JSON file, and I used Python to help generate and organize that data. When the app loads, it fetches data from a static data.json file. This file contains information like country names, coordinates, cultural summaries, myths, festivals, and quiz questions. React stores this data in state and uses it to render the map, markers, and popups dynamically. As users interact with the app, like filtering or answering questions, the state updates and the UI automatically changes. Overall, the app is fully frontend-based, with data flowing from the JSON file into React state and then into the user interface. I used AI to help me understand how to integrate Leaflet with React, especially things like markers and popups, and to debug issues with map behavior. It also helped me structure and format the JSON data correctly and connect it to my app. For tools like Vite and Tailwind, I mostly used it for setup guidance and small fixes. I also used it to help me gather and create the information and questions that were used for the country informations. I also used other websites below to help me with my understanding of the different Technologies I used.

Add more countries and deeper cultural content Improve UI with animations and better design Add accounts for users and save their progress if they exit Multiplayer or competitive quiz modes

Built With

• css
• json
• leaflet.js
• python
• react
• tailwind