TMECHS Behavior Monitor

• 

  Personal XP stats via individual access tokens

• 

  Had to build a schedule maker to get the daily attendance with XP rewards.

• 

  Violation scan page - easy to scan with bar code scanner to work with IDs.

• 

  Login Screen with student access to XP rewards via access token.

• 

  Volunteer sign up to monitor the detention location.

• 

  Home Page with Links via cards

About the Project

Inspiration

I built the TMechs Behavior Monitor to give teachers and behavior specialists a lightweight, mobile-friendly way to log and track student behavior in real time. Watching paper forms pile up in my own classroom, I knew there had to be a better solution: something that worked offline, auto-saved drafts, and let me capture quick notes (and even snapshots) on the go.

What I Learned

• Offline-First Design: Using the browser’s navigator.onLine events and localStorage backups taught me how to build resilient apps that survive flaky connections.
  
• Custom Hooks & Context: I deepened my understanding of React Context for global state (user, network status, live sessions) and wrote reusable hooks for keyboard shortcuts, mobile camera access, and draft autosave.
  
• Working with Supabase: I mastered Supabase’s Auth, Realtime, Storage, and REST clients—handling CORS, session persistence, token refresh, and object storage for check-photo uploads.
  
• Transactional Email: Integrating the Resend API gave me hands-on experience with sending templated, secure emails from a static frontend.
  

How I Built It

1. Scaffolding & Tooling:

   • Vite + React + TypeScript for a snappy dev experience.
     
   • Tailwind CSS and lucide-react for rapid, accessible UI patterns.
     
   • react-hot-toast for unobtrusive feedback.
     

2. Core Features:

   • Step-by-Step Walkthrough: A multi-step mobile form (loose cash, envelopes, checks, review) orchestrated with custom ProgressIndicator and MobileFormLayout components.
     
   • Image Capture & Compression: A MobileCameraModal that captures, compresses, and previews check photos before upload.
     
   • Autosave & Draft Manager: A useFormBackup hook that auto-saves form data to localStorage and restores drafts on demand.
     

3. Data & Notifications:

   • Supabase Postgres: Tables for sessions, envelopes, checks, counters, and donors.
     
   • Resend API: Sends behavior alerts and session summaries via email.
     
   • Chart.js: Renders attendance and behavior trends with react-chartjs-2 and chartjs-plugin-datalabels.
     

4. Deployment:

   • Hosted as a static SPA on Vercel/Netlify, with CI/CD via GitHub Actions.
     
   • Environment-protected keys for Supabase and Resend in Vercel/Netlify settings.
     

Challenges Faced

• CORS & Preview Environments: I spent a lot of time wrestling with Supabase’s CORS settings and disabling auto-refresh in preview iframes so that “Failed to fetch” errors didn’t crash the UI.
  
• Session Management Quirks: Turning off persistSession broke getUser() calls, so I had to decide between full session persistence or manual error-handling stubs.
  
• Offline UX: Managing a clean “no internet” fallback UI without blocking the user, while still auto-retrying uploads and data sync in the background.
  
• Image Upload Reliability: Ensuring compressed images stayed under size limits, generating consistent storage paths, and surfacing friendly errors when uploads failed.
  

Built With

• chart.js
• chartjs-plugin-datalabels
• context-api
• custom
• custom-hooks
• dev
• formvalidator
• git
• github
• hosted
• imageutils
• javascript
• localstorage
• lucide-react
• react
• react-hot-toast
• react-router-v6
• realtime
• resend
• resend-api
• storage)
• supabase
• supabase-(auth
• tailwind-css
• typescript
• uuid
• vercel/netlify
• vite