American Revolution Experience - Interactive Educational Map and Story Platform

The American Revolution Experience is an interactive web platform created for the American Battlefield Trust and the Daughters of the American Revolution. It presents a map based exploration of people, places, and events from the Revolutionary War, supported by dynamic story pages, multimedia content, and a historical timeline. I contributed to this project as part of a collaborative engineering team.

Next.jsReactReduxMapbox GL JSSCSSNode.js
Video
American Revolution Experience  -  Interactive Educational Map and Story Platform screenshot 2
1 / 2 • Video
Media gallery for the American Revolution Experience - Interactive Educational Map and Story Platform project

The American Revolution Experience is an interactive educational website built for the American Battlefield Trust and the Daughters of the American Revolution. The platform combines a large scale map of the Revolutionary era, character driven stories, a chronological timeline, and media rich content to help visitors understand how ordinary people lived through the conflict.


The site is built with Next.js and React, using Redux for global state and Mapbox GL JS for the interactive mapping system. Content is structured through JSON schemas and sourced from external CMS platforms including Craft CMS and Drupal. A custom Express server wraps Next.js to support routing, server side rendering, and API utilities.


Key features include a dynamic map of Patriot and Loyalist sites, story pages for historical figures, multimedia players for audio and video, a modal system for deep dive content, and a structured timeline view. The design follows an atomic component architecture with SCSS styling, ensuring consistency across the entire interface.


The project demonstrates experience in large scale React applications, schema driven content integrations, map based storytelling, accessible media components, and full stack JavaScript development.

Tech Stack

Next.jsReactReduxMapbox GL JSSCSSNode.jsExpressJSON Schema content layerCraft CMSDrupalGulp / PostCSSSentry

Attribution

Interested in working together? I'm always open to discussing new projects and opportunities.

Related Projects

✉️ Let's Connect

Get in Touch

Have an AI project in mind or need a secure, reliable system built? Let's talk.