-
-
Immersive landing screen with rotating Earth and a clear start to explore Earth’s history.
-
Interactive dashboard showing real-time stats and key milestones of the Modern Era.
-
Visual chart displaying the evolution of temperature, population, and technology across eras.
-
Interactive milestones, era comparison, and future simulation in one unified dashboard.
-
Future era dashboard showcasing projected stats and upcoming global milestones.
Inspiration
☆ The inspiration came from the idea that learning history should feel like an experience, not just reading static content. I wanted to turn Earth’s evolution into an interactive journey where users can explore, visualize, and make decisions.
What it does
☆ Journey Through Eras is an interactive web experience that lets users explore Earth’s history across five eras. It visualizes key data like temperature, population, and technology, allows users to compare eras, make decisions, and simulate future outcomes in real time.
How we built it
☆ We built Journey Through Eras using HTML, CSS, and vanilla JavaScript with a modular, state driven architecture. Dynamic content is rendered from JSON data, while Canvas API powers custom animations like particles and the rotating globe. The Web Speech API enables voice narration, and LocalStorage is used for tracking progress and achievements.
Challenges we ran into
☆ One of the biggest challenges was managing complex UI interactions and state across multiple features like the timeline, simulator, and comparison tool. Optimizing Canvas animations for smooth performance while maintaining responsiveness was also difficult. Integrating voice narration seamlessly without affecting user experience required careful control handling.
Accomplishments that we're proud of
☆ We’re proud of building a complete product like experience using only frontend technologies. From interactive storytelling and real time simulations to voice narration and custom animations, we successfully combined design, logic, and user experience into one seamless platform.
What we learned
☆ We learned how to design and build a fully interactive, state driven application using only frontend technologies. This project strengthened our skills in UI/UX design, performance optimization, and integrating advanced features like Canvas animations and voice narration.
What's next for Journey Through Era
☆ Next, we plan to enhance Journey Through Eras by integrating real time APIs for live climate and population data, adding backend support for user accounts and progress tracking, and introducing AI powered future predictions for more realistic simulations.
Log in or sign up for Devpost to join the conversation.