Instant Replay Application

Challenge

One of my favorite memories from grade school was free period in the computer lab. (FIX THIS IT SOUNDS DUMB) Everyone would rush to log into some sketchy website and play those free JavaScript-based video games (back when you had to manually enable JavaScript in your browser). That memory stuck with me — the energy, the chaos, the fun.

With this project, I wanted to recapture that nostalgia using modern tools: React, TypeScript, Node.js, Tailwind, and GSAP for animation. My main goal was to deepen my understanding of animation on the web, especially using GSAP within a React environment.

Surprisingly, the first major challenge I faced in this project wasn’t technical  — it was the data. The game data I was working with was incomplete and inconsistent — missing correct dates, team names, and other vital metrics that my application needed to run on. For the solution to that problem, please see my Data Normalization Project. 

Learn More
Github
Live App

Solution

To bring the Instant Replay app to life, I engineered a system that dynamically recreates animated highlights from any NFL game (2016–present) in under a minute. Each scoring play is brought to life using GSAP-powered stick-figure animations, enriched with real player headshots sourced from RapidAPI’s football collection.

One of the biggest challenges was API inefficiency: retrieving a single game required three separate requests — for the team, season, and game. Since the data provider charges per request, this approach was unsustainable.

To solve this, I built a custom REST API using Node.js and MongoDB, deployed on DigitalOcean. This middleware aggregates and normalizes full-season data ahead of time, allowing my app to make a single optimized request for any game. By offloading the heavy lifting to my own API, I eliminated redundant external calls, reduced cost, and gained full control over the data structure and flow.

MongoDB Screenshot

Tech Stack

Full Stack Development | React 18 | TypeScript | GSAP (GreenSock) | TailwindCSS | Custom API Development | Axios | Vite | SVG Animation | MongoDB | React Router | ESLint | DigitalOcean | dotenv

  • Frontend: Built with React and TypeScript, styled using TailwindCSS, and animated using GSAP with support for SVG frame-by-frame animations.

  • Backend: Custom Node.js + Express service (external repo) to manage API normalization, hosted on DigitalOcean, storing pre-scraped game data in MongoDB.

  • Tooling: Powered by Vite for fast bundling, with ESLint and TypeScript for code quality and static typing.

  • Data Flow: Real-time communication with custom REST API, consuming normalized data using Axios.

  • Deployment-ready: Modular architecture for easy expansion and lightweight performance.

Would you like to start a project with us?

Your website should be an investment, not an expense. Contact us today to see how we can help your business thrive!

Free Consultation