Feed Escape Guide: Digital Wellness Education Platform

Interactive web application teaching digital literacy to Toronto high school students

Role: Frontend Development & UX Designer

Timeline: May–July 2025 (13 weeks)

Tools: React, TypeScript, Tailwind CSS, Vite, shadcn/ui

React
TypeScript
Tailwind CSS
UX Design
Course Project

Course: CEID100 Capstone Project, Toronto Metropolitan University

As the technical lead on this collaborative project, I was responsible for:

  • Web application architecture and development
  • UI/UX implementation and responsive design
  • Integration of content provided by the research team
  • Deployment and hosting on Vercel
  • Leveraging AI tools to accelerate development workflow

Collaboration: Worked with team members who conducted content research, academic source curation, and educational material development aligned with CEID100 course requirements.

The Challenge

Create educational media teaching digital literacy to Toronto high school students who use social media daily but lack understanding of its underlying mechanisms and risks. The deliverable needed to be engaging, research-backed, and actionable.

Key constraints:

  • Target audience: 15–18 year olds accustomed to polished digital experiences
  • Must address multiple digital wellness topics comprehensively
  • Required academic rigor with proper citations
  • Needed to work in classroom and self-study contexts

The Solution

Built an interactive web application with five core learning modules covering algorithms, mental health, misinformation, privacy, and digital balance. Each module combines educational content with hands-on activities.

Core Features:

  • Interactive Quiz: Scenario-based decision-making with scoring and instant feedback
  • Tracking Simulator: Step-by-step visualization of how online tracking works
  • Animated Flowchart: Shows how recommendation algorithms create filter bubbles
  • Tip Rating System: Hands-on checklist for trying wellness strategies

Design Process

Research & Content Development

  • Synthesized peer-reviewed research from digital media scholars
  • Identified key pain points: sleep disruption, attention fragmentation, privacy erosion, misinformation
  • Structured content around actionable takeaways students could implement immediately
  • Created comprehensive sources page with proper academic attribution

Information Architecture

  • Designed modular structure allowing independent or sequential learning
  • Built progressive disclosure: concepts build on each other
  • Kept sections scannable with clear visual hierarchy
  • Added navigation that works for both linear and exploratory learners

Visual & Interaction Design

  • Chose calming color palette to reduce cognitive load (students already overwhelmed by screens)
  • Selected unique photography for each module creating distinct visual identity
  • Designed interactive components as "learning by doing" experiences
  • Ensured mobile-responsive layouts for on-the-go access

Technical Implementation

Stack: React + TypeScript, Vite, Tailwind CSS, shadcn/ui

Development Approach:

Heavy use of GitHub Copilot throughout the build process. Rather than hand-coding every component, I focused on design direction, content structure, and UX decisions while leveraging AI pair programming to accelerate development. This "vibe coding" approach let me iterate quickly on interactive features and polish the user experience.

Key Decisions:

  • Modern component-based architecture with React Router for navigation
  • shadcn/ui (Radix primitives) for accessible, production-ready components
  • Tailwind for rapid styling iteration
  • Static site generation for simple deployment

Accessibility:

  • Semantic HTML with proper heading hierarchy
  • ARIA labels for screen readers
  • Keyboard navigation fully supported
  • High contrast ratios meeting WCAG standards
  • Mobile-optimized touch targets

Results & Impact

Academic Performance: Achieved 92% grade on capstone project

Learning Outcomes Delivered:

  • Students can identify engagement hooks and algorithmic manipulation
  • Understand practical privacy protection techniques
  • Apply verification strategies before sharing content
  • Build sustainable digital wellness routines
  • Make informed decisions about app permissions and data sharing

Technical Achievements:

  • Production-ready application deployable to any static host
  • Fully responsive across mobile, tablet, desktop
  • Meets accessibility standards for inclusive education
  • Clean, maintainable codebase following React best practices