Earthstory

• 

  EarthStory's landing page with an interactive 3D globe, timeline, and search interface, allowing users to begin exploring history.

• 

  In 1969, EarthStory reveals the Apollo 11 mission, showing rockets and space exploration only in their correct historical era.

• 

  Red: Search for a country, place, or historical event. Blue: Jump directly to the desired historical year.

• 

  Play the timeline automatically or drag to any year to explore historical events as they unfold across time.

• 

  Journey mode guides users through major historical events, with each numbered step representing a different event in chronological order.

• 

  Users can ask "What happened here?" to receive AI-powered explanations with verified historical context and sources

• 

  Compare historical events side by side to understand similarities, differences, and their impact across civilizations.

Inspiration

Learning history in secondary school often meant reading textbooks and memorizing dates, which made the subject feel boring and difficult to remember. We believed history could be much more engaging if people could explore it visually instead of simply reading about it. This inspired us to create EarthStory, an interactive platform where users can travel through time using a 3D globe, historical timeline, and AI-powered guide. By connecting historical events with real-world locations, we hope to make history easier to understand and more enjoyable for students and anyone interested in learning about the past.

What it does

EarthStory is an interactive platform that helps users explore history through a 3D globe and historical timeline. Users can search for historical places, events, or years, travel through different time periods, and view important events at their actual locations. Each event includes verified historical information and trusted sources, while an AI-powered guide provides additional explanations to make learning history more engaging and accessible.

How we built it

We built EarthStory using Next.js, React, and TypeScript for the frontend, while CesiumJS and Resium power the interactive 3D globe. Supabase manages the backend, database, authentication, and storage. We integrated the OpenAI Responses API to provide an AI guide that answers questions using verified historical information. GSAP was used for animations, Figma for interface design, and Notion for project planning and collaboration. Throughout the project, we also used ChatGPT and Codex to help us solve coding problems, improve our implementation, and speed up development.

Challenges we ran into

One of our biggest challenges was designing the overall system architecture and making sure all the different components worked together smoothly. We spent a lot of time learning how to use CesiumJS, Supabase, OpenAI APIs, and other tools effectively. Another challenge was preparing accurate historical content, as every event needed to be supported by reliable sources. During development, Codex sometimes took a long time to generate results, and the output some time did not always match what we expected, so we often had to review, modify, and debug the generated code ourselves. Managing all these tasks within the hackathon timeline was both challenging and rewarding.

Accomplishments that we're proud of

We are proud that we successfully turned our idea into a working prototype that combines a 3D globe, AI, and historical storytelling in one platform. More importantly, this project helped us better understand how to use ChatGPT, Codex, and AI plugins effectively during software development. We learned when AI could speed up our work and when human judgement was still needed to review and improve the results. Seeing all the components work together made the long hours of development worthwhile.

What we learned

This project taught us much more than technical skills. We learned how to design a full-stack application, integrate AI into a real-world project, and work with modern tools such as React, CesiumJS, and Supabase. We also discovered that AI tools are powerful assistants, but they cannot replace careful testing, debugging, and human decision-making. Good teamwork, communication, and continuous learning were just as important as writing code.

What's next for Earthstory

EarthStory is just the beginning, and we have many ideas for its future. We plan to expand our historical database by adding more countries, cultures, and significant events to provide a richer learning experience. We also want to improve the search system so users can find historical places and events more accurately and efficiently. In addition, we aim to enhance the 3D globe by introducing historically accurate space exploration content, such as rockets and satellites that appear only after their actual historical periods. We also plan to optimize our AI-powered guide by improving data retrieval and expanding verified historical sources, allowing ChatGPT to deliver faster, more accurate, and evidence-based responses. Ultimately, we hope to continue refining EarthStory into a comprehensive, interactive, and reliable platform that makes exploring history more engaging and accessible for everyone.

Built With

• cesiumjs
• docker
• figma
• github
• gsap
• next.js
• node.js
• notion
• openai
• postgresql
• react
• restapi
• sql
• supabase
• typescript
• vercel