EngageIU

Inspiration

Indiana University has hundreds of events every week across 9 campuses, from career fairs and hackathons to cultural showcases and wellness workshops. But student attendance is low and participation feels invisible. Nobody knows who's showing up, and students have no real reason to
prioritize events over just staying in.

We kept thinking about how fitness apps like Strava or streaks in Duolingo make you actually want to show up. So we asked: why can't campus life feel like that? That was the spark for EngageIU. Make
attendance visible, make it competitive, and give students a reason to care.

## What it does

EngageIU is a real-time campus engagement platform built for IU students. You check into events
using a unique event code, earn points, and climb a live leaderboard against other Hoosiers.

Browse events across all IU campuses, filtered by category, campus, or date
Check in with a code tied to the event you attended and earn points instantly
Watch the leaderboard update live without refreshing the page
See the top 3 students on an animated podium on the homepage, with tie handling built in
Admins can create events, set point values, and manage check-in codes from a dashboard
Export leaderboard data to CSV or HTML for reporting

## How we built it

Backend is Python with FastAPI and PostgreSQL. We used SQLAlchemy for the ORM and JWT tokens for
admin auth. The live leaderboard streams over SSE (Server-Sent Events) so rankings update in real
time.

The frontend is pure HTML, CSS, and vanilla JavaScript with no frameworks. We built a custom
IU-branded design system with CSS variables, animations, and a responsive layout. The Sample Gates
hero background fades top to bottom into the card section.

Everything runs in Docker with docker-compose and is deployed on mooo.com. The frontend is baked
into the Docker image as static files at build time.

## Challenges we ran into

The leaderboard tie problem was annoying to get right. SQL ROW_NUMBER() breaks ties randomly, so
students with the same points would get different ranks. We switched to DENSE_RANK() so tied
students share a rank and the table correctly shows everyone through rank 10, not just the first 10 rows regardless of ties.

The "+N more" popover on the podium was the biggest frontend headache. CSS animations that use
transform permanently make that element the containing block for position fixed children. So our
popover kept flying off to the far right of the screen no matter what coordinates we set. The fix
was moving the popover element outside the animated container entirely so it respects the viewport
correctly.

## Accomplishments that we're proud of

Getting a fully working deployed app with real-time data is the big one. This is not a prototype or a mock, it actually works end to end on mooo.com.

The tie handling on the podium is something we are genuinely proud of. If multiple students share a rank, one shows on the podium and the rest appear in a popover when you click "+N more". That works for all three positions.

The UI actually looks like an IU product. Consistent crimson branding, smooth animations, the Sample Gates background. It does not look like a hackathon project.

The admin side is complete enough to be useful: create events, edit point values, manage codes,
export data.

What we learned

CSS stacking contexts are full of traps. An animation property with fill-mode both permanently
applies a transform even after the animation ends, which silently breaks position fixed in children. It took us a while to figure out why the popover kept going off screen.

SSE is a really clean way to do one-way real-time updates. Way simpler than WebSockets for something like a leaderboard where the server just pushes data and the client listens.

Dense ranking matters for fairness. It is a small detail but it changes how the leaderboard feels
completely.

Seeding realistic data is more important than it sounds. An app with 47 real IU events, varied point values, and 25 students with different attendance patterns tells a much more convincing story than placeholder data.