EBHCS Advisor Bulletin Board
Centralized bulletin board serving 12 advisors and 350+ students across 4 programs
The Problem
Advisors were duplicating announcements across multiple Google Classrooms, fragmenting communication and increasing workload. Students lacked a single, reliable place to find up-to-date opportunities and announcements.
Key Pain Points
- Duplicate posting: Advisors posted the same announcement in 5+ different Google Classrooms
- Fragmented communication: Students had to check multiple places to find all opportunities
- Poor content discovery: No filtering by category, deadline, or keyword
- Content lifecycle issues: Old posts mixed with new, making it hard to see what was still relevant
- No access control: No role-based posting led to spam and off-topic content
The Solution
A live, web-based bulletin with an Advisor Portal (post/manage) and a Student View (gallery and calendar), backed by Firebase for secure auth, real-time updates, and durable storage.
Student View
- Gallery grid with category badges, images, links, contact, and deadline cues
- Calendar view to visualize time-bound items with per-day modal lists
- Multi-select filters: Category, Deadlines, Posted Date, Class Type, Posted By
- Search functionality for keyword-based discovery
- Expired logic: Automatic "EXPIRED" banners with toggle to include/hide archived posts
Advisor Portal
- Guided posting form with required/recommended sections and preview
- PDF upload (up to 10MB) and image upload with size validation
- Manage Posts tab: Search, sort (newest/oldest/category/deadline), filter (active/expired), edit/update
- Authentication: @ebhcs.org email accounts with first-login password change flow
- Role-based access: Advisors can edit only their own posts; admin/director can manage all
Notable Features
Multi-Select Filtering
Color-coordinated filter chips for categories, deadlines, class types, and authors
Immigration Category
Dedicated category with custom styling for DACA, citizenship, and legal resources
Real-Time Updates
Firestore snapshot subscriptions for instant UI updates across all users
Deep Linking
URL hash navigation allows direct sharing of specific bulletin posts
Screenshots & Walkthrough
Main board homepage showing all current opportunities with category filters and search
Calendar view displaying deadlines and important dates for scholarships and events
Advisor portal interface for managing posts and viewing analytics
Post management interface where advisors create, edit, and archive opportunities
Technical Implementation
Tech Stack
- Frontend: Vanilla HTML/CSS/JS (responsive, static), deep-linking via URL hash
- Backend: Firebase Auth (email/password restricted to @ebhcs.org), Firestore (real-time DB with validated schema), Firebase Storage (images/PDFs)
- Security: Custom Firestore rules with ownership validation, role-based access control
- Key files: index.html (student view), admin.html (advisor portal), firebase-config.js, firebase-admin.js, enhanced-auth.js, style.css
Architecture
Static frontend with Firebase backend enables real-time collaboration without server infrastructure. Firestore snapshot subscriptions push updates instantly to all connected clients. Security rules enforce @ebhcs.org email requirement, ownership validation (advisors edit only their own posts), and admin override capabilities.
Security & Governance
Implemented
- Firestore Rules: Public read for active bulletins; write restricted to authenticated @ebhcs.org advisors
- Ownership enforcement: Advisors can edit/delete only their own posts; admin/director can manage all
- Data validation: Required fields, category whitelist, size limits, immutable author/timestamp
- First-login flow: Password change requirement + password reset support
Recommended Hardening
HTML sanitization for XSS protection, CSP headers, rate limiting, file signature checks/virus scanning for uploads, and 2FA for privileged accounts. (See Security Analysis.md in repo)
Key Challenges & Solutions
Fragmented Channels → Single Source of Truth
Replaced 5+ Google Classrooms with one public bulletin + deep-linking for easy sharing per post.
Posting Friction → Guided Workflow
Simplified Advisor Portal with form preview, required/recommended guidance, and progress indicators.
Content Lifecycle → Deadline & Expiration Logic
Automatic "EXPIRED" banners with grayscale styling; toggle to show/hide archived posts prevents clutter while preserving visibility when needed.
Development Process
Discovery & MVP
Advisors identified the pain of posting the same item to multiple Google Classrooms while students missed content across silos. I built an MVP with a public bulletin + simple Advisor Portal using local storage for quick iteration.
Production & Iteration
- Firebase migration: Integrated Auth/Firestore/Storage for secure multi-user posting and real-time updates
- Advisor-requested features: PDF uploads, Immigration category, expired post system, multi-select filter overhaul, manage-posts redesign
- Enablement: Created Advisor Guide (step-by-step posting, best practices, troubleshooting) and Director Handover Guide (maintenance, user management)
What's Next
- Analytics: Lightweight metrics for adoption and content effectiveness (views per post, filter usage)
- Advisor QoL: Drafts, scheduled posts, bulk edit/archiving, optional notifications
- Student UX: Saved filters, multilingual labels, accessibility refinements
Results & Impact
Impact
- Single source of truth for all students across programs and classes
- Reduced duplication and advisor workload by posting once centrally
- Better discovery via filters and calendar; easy mobile sharing per post
- Cleaner lifecycle management: Deadlines, expiration, and manage-posts tooling reduce stale content
Lessons Learned
User-driven features drive adoption
The Immigration category, PDF uploads, and manage-posts redesign all came directly from advisor requests. Building what users need (not what's "cool") led to high adoption and daily usage.
Firebase enabled rapid iteration
Real-time updates, built-in auth, and no server infrastructure meant I could ship features quickly and respond to feedback within days.
Security is a feature, not an afterthought
Firestore rules with ownership validation and role-based access prevented spam and maintained content quality. Good security design builds trust with stakeholders.