June Bug Scheduler

Inspiration

Volunteer organizations often rely on group chats, spreadsheets, or word of mouth to coordinate shifts, systems that break down fast. We wanted to build something that felt as polished and intentional as the volunteers themselves: a clean, purpose-built scheduling tool that respects people's time and actually gets them to show up.

What it does

June Bug Scheduler is a volunteer scheduling and reminder web app for June Bug Center. Staff can post open shifts with time slots and volunteer capacity. Volunteers log in, browse available shifts, and sign up in one click. When they sign up, a Google Calendar event is automatically created in their personal calendar, complete with a 24-hour email reminder and a 1-hour popup, so no one forgets.

The app enforces real constraints: slots decrement when filled, duplicate signups are blocked at the database level, and a full/empty state is reflected immediately in the UI.

How we built it

React + TypeScript + Vite for the frontend, with CSS-in-JS for a fully custom dark UI (no component library)
Supabase for authentication (email/password), a hosted Postgres database, row-level security, and Postgres triggers
Google Calendar API via direct REST calls, with Google Identity Services handling OAuth 2.0 token flow in the browser
Role-based routing: staff and volunteers get separate dashboards with protected routes
Database triggers handle shift slot decrementing automatically on every signup

Challenges we ran into

Coordinating a shared codebase in real time. We hit merge conflicts mid-build and had to resolve them without losing either side's work
Getting Google Identity Services to play nicely with our signup flow. The OAuth popup had to be woven in as a non-fatal step so a calendar failure never breaks the core signup
Supabase RLS blocking our slot-decrement trigger, which took some digging to fully understand and resolve

Accomplishments that we're proud of

The UI. Every screen (login, signup, staff dashboard, volunteer dashboard, loading states) was built by us with a consistent dark theme (#0a0a0f background, #63dcb4 accent, Syne + DM Sans typography) that looks and feels cohesive
A functional end-to-end flow: staff posts a shift, volunteer signs up, Google Calendar event lands in their calendar with reminders set
Solid data integrity: unique constraints at the database level, slot guards in both the UI and DB, and meaningful error messages instead of generic failures

What we learned

This project pushed all of us into territory we hadn't fully navigated before. On the backend, we learned how Postgres triggers interact with Supabase's row-level security, something that isn't obvious until your trigger silently fails and you have to dig into why. We got hands-on with OAuth 2.0 through Google Identity Services and learned how token flows work in a browser-only environment without a backend intermediary. On the frontend, we learned how to manage shared state across role-based dashboards and handle async flows gracefully, like making sure a Google Calendar error never breaks the core signup experience. And as a team, we learned that merge conflicts under a deadline are as much a communication problem as a technical one. Coordinating in real time, dividing features cleanly, and integrating each other's work taught us just as much as any individual technical challenge did.

What's next for June Bug Scheduler

Staff view of who signed up for each shift, including attendance tracking (the attended column already exists in the schema)
Volunteer profile page showing upcoming shifts pulled from Supabase
SMS reminders as a fallback for volunteers without Google accounts
A shared org-wide Google Calendar that staff can post to when creating shifts