Social Media Engagement Tracker

social-media-engagement-tracker interactive activity

The Social Media Engagement Tracker is an interactive, tool built for students in a digital marketing course. It is based off an idea I had while working on course .I designed and built this tool to sit directly inside a Moodle course page, with the goal of helping learners explore and understand key social media metrics through a clean, simple, and hands-on interface.

The application uses a mobile-first design, meaning it looks great and works perfectly on smartphones, tablets, and computers.

Tools Used

  • HTML5
  • CSS3
  • Bootstrap
  • JavaScript
  • Moodle LMS

The Problem

A good number of digital marketing students find it hard to understand social media analytics just by reading about them . Traditional online courses often lack hands-on tools that let students interact with data in a practical way before exposing them to real-world tools.

The goal was to create a simple learning tool that turns seemingly dry marketing metrics into an easy-to-use visual experience for every learner.

The Process & Challenges

The project started by planning a clean dashboard layout that fits naturally into a Moodle course page without cluttering the screen. The focus was on keeping the design minimal to avoid overwhelming the students.

  • Simulating Real Data: Because this is a frontend-only project, I had to create realistic, simulated engagement data. in a JSON file. The challenge was making the data feel real while keeping the code lightweight and fast.
  • Designing for Everyone: A major focus was accessibility. I made sure the tool features high color contrast, easy keyboard navigation, and a clear layout so all learners can use it easily.

The Solution

The final product is a fully responsive social media engagement tracking dashboard that helps students learn about engagement metrics by actually clicking around and seeing the results.

Key Features:

  • Interactive Post cards: Students can click on a post to view its engagement stats
  • Mobile-First Layout: Works smoothly on phones and mobile devices.
  • Accessible Design: Built with clear text, high contrast, and screen-reader friendly code.
  • Easy Moodle Embedding: Drops directly into standard Moodle content areas.

This project aims to improves the digital marketing course by making data practical, visual, and much easier to understand.