Mesozoic Era

Explore the World of Dinosaurs🦕

Comment

Inspiration

We’ve all opened Google Earth just to zoom around, right? Now imagine doing that — but instead of streets and buildings, you’re discovering dinosaurs! Mesozoic Era was inspired by the idea of combining learning and exploration. We wanted to bring together the excitement of ancient creatures with modern 3D maps and storytelling. Dinosaurs were awesome, so why not make an app that makes learning about them just as awesome?

What it does

Mesozoic Era is a web app that lets you:

Explore dinosaurs from the Triassic, Jurassic, and Cretaceous periods

Use a 3D interactive globe powered by Cesium

Learn fun facts, scientific info, and compare dinosaurs with humans

Find which dinosaurs were discovered near your location

Simulate dinosaur battles with stats like speed, bite force, and strength

All packed into a smooth, Google-style UI with mobile support

How we built it

Frontend: React + Next.js with TypeScript

Styling: Tailwind CSS + ShadCN for clean UI, and Framer Motion for animations

3D Earth: CesiumJS with Google Photorealistic 3D Tiles

APIs Used:

Google Maps API for geolocation

Cesium Ion access token for 3D Tiles

We designed everything to be mobile-friendly, fast, and fun to use.

Challenges we ran into

Cesium initialization errors were tricky — especially dealing with WebGL issues and viewer rendering on slower devices

Integrating Google Maps APIs cleanly with Cesium took time and trial

Getting location-based features like “Dinos Near You” to work accurately

Making the UI feel interactive yet educational (not just cards with facts)

Accomplishments that we're proud of

We created a real-time 3D experience inside a browser — no installs or downloads needed

Designed a clean, Google-style interface that feels intuitive and educational

Made a working “Battle Mode” where dinosaurs can fight each other (and it’s kinda fun!)

Built a cool use case for Google Maps Platform that’s not about travel

What we learned

How to work with CesiumJS, vertical exaggeration, and Google’s 3D Tiles

The power of combining geolocation with educational content

That even simple design decisions can greatly affect usability and engagement

And of course — way more about dinosaurs than we expected 😄

What's next for Mesozoic Era

Add voice search like “Tell me about T-Rex”

Build a quiz or trivia mode to test dinosaur knowledge

Bring in AR features to visualize dinosaurs in your room

Allow users to create custom dinosaur battle tournaments

Maybe even release it as a fun learning app for schools

Share this project:

Updates