History's Top 10

Interactive website exploring the top 10 most significant events in Canadian and global history.

Comment

Inspiration

History isn't just a list of dates — it's the story of how we got here. We wanted to build something that goes beyond a textbook and actually makes people feel the weight of the events that shaped Canada and the world. Our history class culminating assignment gave us the spark, and we turned it into a full interactive experience.

What it does

History's Top 10 ranks and presents the 10 most significant events in Canadian and global history. Each event gets its own deep-dive: the historical context, root causes, key moments, and lasting consequences. Users can explore events through an interactive, visually rich interface — scrolling through timelines, reading detailed breakdowns, and seeing how each event connects to the modern world.

The events covered include:

  1. Battle of Hong Kong (1941)
  2. Dieppe Raid (1942)
  3. Battle of the Atlantic (1939–1945)
  4. Battle of Vimy Ridge (1917)
  5. ...and six more pivotal moments in history

How we built it

We built the site as a React + TypeScript single-page app, bundled with Vite for fast development and builds. Styling is handled entirely with Tailwind CSS v4 and shadcn/ui components built on Radix UI primitives. We used Framer Motion for animations and transitions that bring the historical narrative to life. All event data is stored in a structured JSON file, making it easy to maintain and expand. The site is deployed via GitHub Pages.

Challenges we ran into

  • Balancing visual storytelling with historical accuracy — we wanted it to look great without trivializing serious events
  • Getting smooth animations to work consistently across all events without hurting performance
  • Writing detailed, researched descriptions for 10 major historical events while keeping the content engaging and accessible
  • Coordinating a three-person team across design, development, and content simultaneously

Accomplishments that we're proud of

  • Built a polished, production-quality site for a school project
  • Wrote genuinely thorough historical analyses for each event
  • Created a cohesive visual design that feels respectful of the subject matter
  • Shipped a fully deployed, publicly accessible website

What we learned

  • How to structure a content-driven React app cleanly using JSON data sources
  • Deeper knowledge of Tailwind CSS v4 and the shadcn/ui component ecosystem
  • How to use Framer Motion for meaningful, non-gimmicky animations
  • A lot about Canadian military history

What's next for History's Top 10

  • Adding interactive maps and timelines for each event
  • Expanding beyond the top 10 to cover more events
  • Adding a quiz or reflection section for educational use
  • Supporting more languages to make the content accessible globally

Built With

Share this project:

Updates