Locked Out

Main Page
Scheduling lock-out period
Extension
Blocked x.com

Inspiration

We were inspired by the growing need for digital self-discipline and academic accountability. As students ourselves, we often struggled to stay focused while working on assignments due in the near future. This app was built to help lock ourselves out of distracting websites while working on real-time Canvas assignments—turning procrastination into productivity.

What it does

Locked Out integrates with a user's Canvas account to fetch upcoming assignments and lets them assign website block rules to each one. Once an assignment is selected, users are asked to schedule a time to start the block. When confirmed, these rules are activated—helping the student stay focused on their task.

How we built it

React + Next.js for the frontend and routing

Tailwind CSS for UI design and modals

Supabase as our database layer

NextAuth.js for Google login and session handling

Canvas LMS API to fetch real assignment data for UMD students

Challenges we ran into

One of the toughest challenges was syncing authentication between our Next.js web app and a separate Chrome extension, especially when trying to maintain session continuity. Since NextAuth manages the session in a secure, server-only context, we had to find creative ways to securely pass session tokens or identifiers to the extension without compromising user privacy or introducing security flaws.

Another challenge was bridging data between the backend and frontend — specifically determining whether a student had submitted a given assignment (fetched from Canvas) and correctly displaying that status on the frontend. Canvas’s API requires careful pagination and filtering by term, and we had to ensure we only displayed relevant, active assignments that weren’t past due — even allowing a small buffer window for recent due dates.

Accomplishments that we're proud of

Built an actual, functioning integration with Canvas that dynamically pulls real student assignments.
Created a polished UI with modals and stateful logic using Zustand and Supabase.
Enabled per-assignment website blocking rules to help users reduce distractions.
Designed a scalable backend API for managing and updating site blocklists.

What we learned

This was our first time using Next.js, so we learned a ton about how everything fits together — from server components to API routes and auth. Figuring out how to manage state across client and server felt tricky at first, but we got the hang of it by working through real problems like fetching assignments from Canvas and syncing them into our UI.

We also got more comfortable with tools like Supabase, NextAuth, and Zustand, and saw how helpful they are when building a full-stack app quickly. It was also our first time wiring up a Chrome extension with a web app, which definitely came with challenges (especially around keeping auth in sync), but it pushed us to think about the bigger picture of user experience.