MCE Student Ambassador Team Tracker
A comprehensive Student Ambassador Team Tracking System for the Memorial Centre for Entrepreneurship (MCE) at Memorial University of Newfoundland. It's a modern web application built with React and TypeScript that helps track and manage student ambassador team activities, hours, and progress.
Demo
Admin Dashboard:
Student Dashboard:
🏗️ Architecture Overview
The project is built using modern web technologies:
Frontend: React with TypeScript
Build Tool: Vite
Styling: Tailwind CSS with shadcn/ui components
Backend: Supabase (PostgreSQL database with real-time features)
Authentication: Supabase Auth
State Management: TanStack Query (React Query)
📁 Project Structure
🎯 Core Features
For Students:
Hour Logging: Track time spent on various activities
Task Management: Personal task tracking system
Progress Visualization: Charts showing weekly/monthly progress
Activity Enrollment: View and track enrolled activities
Leaderboard: See ranking among peers
Goal Tracking: Monitor progress toward semester goals (typically 80 hours)
For Administrators:
Analytics Dashboard: Comprehensive overview of all student activity
Student Management: View individual student progress and details
Semester Overview: Track progress across semesters
Weekly Analytics: Monitor current week performance
Top Performers: Identify high-achieving students
Award Management: Track and manage student awards
✨ Key Components
Student Dashboard
Main student interface with navigation tabs
Progress tracking with visual charts
Activity breakdown and goal comparison
Real-time updates and responsive design
Admin Analytics
Comprehensive admin dashboard
Multiple overview sections (semester, weekly, top performers)
Student log viewer for detailed analysis
Task Manager
Personal task management system
Real-time task updates
Session-based task tracking
Hour Logger
Activity hour logging interface
Category-based logging
Integration with enrolled activities
🔧 Technical Highlights
Real-time Features
Live updates using Supabase real-time subscriptions
Automatic data synchronization across components
Real-time progress tracking
Data Visualization
Interactive charts using Recharts library
Weekly progress bars
Activity breakdown pie charts
Goal vs actual progress comparisons
Responsive Design
Mobile-first approach with Tailwind CSS
Custom animations and transitions
Accessible UI components from shadcn/ui
Database Integration
Supabase PostgreSQL backend
Complex queries for analytics
Row-level security for data protection
🚀 Development Setup
The project uses:
Vite for fast development and building
TypeScript for type safety
ESLint for code linting
Tailwind CSS for styling
Custom animations and utility classes
🎯 Business Logic
The system operates on semester-based tracking where:
Students typically aim for 80 hours per semester
Progress is tracked weekly and monthly
Activities are categorized and enrolled
Rankings are calculated based on logged hours
Awards and achievements are tracked
This is a sophisticated student management system that provides both students and administrators with powerful tools for tracking, analyzing, and improving academic and extracurricular engagement.
🔒 Repository Access Notice
Please Note: The complete source code and live demo for MCE Student Ambassador Team Tracker are currently maintained in a private repository due to the sensitive nature of the applications.
For recruiters, hiring managers, or technical evaluators interested in reviewing the complete codebase or scheduling a live demonstration, please contact me directly. I'm happy to provide:
Live demo sessions showcasing full functionality
Detailed code walkthroughs of specific components
Architecture discussions and design decisions
