Are you tired of focus apps that you can easily disable? Are you tired of procrastinating and not being disciplined? Are you tired of not being able to get anthing done? Well, it's time to LOCK OUT so that you can LOCK IN. This is a fun project built by friends for people like us who struggle to focus and complete that one assignment "you will do tommorow". There is no time like the present and so we made an app that blocks your set websites until you finish a selected assignment. We look at your outstanding assignments in canvas and gradescope and allow you to schedule a time where you have no choice but to lock in.
|
Component |
Details |
| ⚙️ |
Architecture |
- Monolithic architecture with multiple layers
- Uses TypeScript for type safety and JavaScript for client-side logic
|
| 🔩 |
Code Quality |
- High code quality with a focus on maintainability and scalability
- Utilizes ESLint and Prettier for code formatting and linting
|
| 🔌 |
Integrations |
- Integrated with various libraries and frameworks, including React, Next.js, Express, and Supabase
- Uses Webpack for bundling and Babel for transpiling
|
| ⚡️ |
Performance |
- Uses caching and memoization to improve performance
|
| 🛡️ |
Security |
- Uses HTTPS and SSL/TLS encryption for secure data transmission
|
| 📦 |
Dependencies |
- Depends on a wide range of libraries and frameworks, including React, Next.js, Express, and Supabase
|
└── lockedout/
├── README.md
├── biome.jsonc
├── components.json
├── extension
│ ├── _metadata
│ ├── background.js
│ ├── blocked.css
│ ├── blocked.html
│ ├── blocked.js
│ ├── icon.png
│ ├── lib
│ ├── manifest.json
│ ├── popup.html
│ ├── popup.js
│ ├── rules.json
│ └── test-assignments.js
├── next.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
│ ├── favicon.ico
│ ├── icon.ico
│ ├── icon.png
│ └── images
├── src
│ ├── app
│ ├── components
│ ├── env.js
│ ├── lib
│ ├── pages
│ ├── server
│ ├── styles
│ └── trpc
├── stores
│ └── assignmentStore.ts
├── supabase
│ └── migrations
├── tsconfig.json
├── types
│ └── assignments.ts
└── yarn.lock
LOCKEDOUT/
__root__
⦿ __root__
| File Name |
Summary |
| postcss.config.js |
- Configures PostCSS plugins for the project, enabling Tailwind CSS integration through the @tailwindcss/postcss plugin
- This setup allows for seamless styling and utility-first development across the codebase. |
| next.config.js |
- Configure Next.js settings for the project, allowing for flexible builds with Docker
- The file imports environment configuration and sets up page extensions and output directory
- This enables efficient development and deployment of web applications. |
| components.json |
- Configures the projects UI components, styles, and libraries, defining aliases for reusable code, icon library, and CSS variables
- This file sets the tone for the entire codebase architecture, establishing a consistent look and feel across the application. |
| tsconfig.json |
- Configures the TypeScript compiler settings for the project, enabling features such as ES2022 target, strict mode, and module resolution
- It also sets up path aliases, excludes unnecessary directories, and specifies include patterns for type checking
- This configuration enables efficient development and bundling of the projects codebase. |
| biome.jsonc |
- Configures the Biome JavaScript projects settings, enabling version control with Git, ignoring unknown files, and formatting code according to specified rules
- The linter is enabled, applying recommended and nursery-level rules to ensure consistent coding standards
- This configuration file defines the projects organization, import management, and linting preferences for effective development and maintenance. |
| package-lock.json |
Manages the projects dependencies, including popular libraries such as Supabase, Radix UI, and Tanstack. Provides a version-controlled record of the project's dependency tree, ensuring reproducibility and consistency. Facilitates efficient installation and management of dependencies for developers working on the project.By understanding the contents of this file, developers can quickly grasp the projects technical landscape, identify potential issues, and make informed decisions about dependency updates or changes. |
| package.json |
- Configures the chicken_jockey project's build, development, and deployment processes through scripts, leveraging dependencies such as Next.js, Supabase, and Trpc
- The package.json file defines various commands to streamline tasks like building, checking, and starting the application
- It also specifies dependencies and devDependencies required for the project's execution. |
extension
⦿ extension
| File Name |
Summary |
| popup.js |
- Authenticates User and Fetches Block List**This code initializes the popup by checking the users authentication status, fetching their block list, and updating the UI accordingly
- It also handles login and logout button clicks, refreshing the UI after successful sign-in or sign-out
- Additionally, it listens for tab updates to detect successful sign-ins and applies new configuration settings when saved. |
| background.js |
- This background script initializes a Supabase client and sets up an authentication state change listener to manage user sessions
- It also checks for active assignments, which determines whether to block certain domains or not
- The script periodically updates the blocked domains list from Supabase and applies immediate blocking rules when necessary. |
| popup.html |
- Provides the user interface for the LockedOut Extension, displaying status updates and allowing users to sign in or out
- The HTML file defines a popup window with a title, styles for various elements, and placeholders for dynamic content
- It also includes JavaScript references and hidden buttons for signing in and out. |
| blocked.css |
- Establishes a visually appealing and responsive layout for the projects core components, including the block screen, icon, quote container, title, and subtitle
- This code defines a unique gradient background animation, font styles, and text shadow effects to create an immersive user experience. |
| blocked.html |
- Provides a visual representation of the site being blocked due to pending assignments, featuring a loading animation and a message prompting users to complete their assignments to regain access
- The file serves as a gateway, redirecting users to take necessary actions before accessing the site. |
| test-assignments.js |
- Enable, Disable, and Manage Test Assignments**This script provides functions to create, remove, and list test assignments for debugging blocking functionality in a Chrome extension
- The createTestAssignment function adds a test assignment to enable blocking, while removeTestAssignment removes it to disable blocking
- The listAssignments function displays the current assignments. |
| blocked.js |
- The blocked.js file is a key component of the project's architecture, responsible for managing and providing access to inspirational quotes
- This code achieves a simple yet powerful functionality by storing an array of quote objects, each containing a title, quote text, and icon
- The quotes are thoughtfully curated to promote mindfulness, self-reflection, and personal growth.Key Takeaways: The file provides a centralized repository for inspirational quotes. Each quote is represented as an object with three properties: title, quote text, and icon.* This code serves as a foundation for integrating these quotes into the project's overall design.By understanding the purpose and functionality of this code file, developers can better appreciate how it contributes to the larger architecture of the project. |
| rules.json |
- Configures rules for the projects extension processing pipeline.This file defines a set of rules that govern how files are processed and transformed within the projects extension framework
- By specifying these rules, developers can customize the behavior of their extensions to suit specific use cases or requirements. |
| manifest.json |
- Configures the Assignment Blocker extensions core settings, defining its name, version, permissions, and interactions with the browser
- It specifies the background service worker, popup, icon, and content security policy, as well as rules for declarative network requests and web accessible resources
- This file serves as a central hub for the extensions functionality and dependencies. |
lib
⦿ extension.lib
| File Name |
Summary |
| supabase.js |
- README Summary**The supabase.js file is a core component of the Supabase project, providing a JavaScript client for interacting with the Supabase API
- This file enables developers to easily integrate Supabase into their applications, allowing them to perform various operations such as querying data, creating and updating records, and more.In summary, this code file provides a crucial piece of functionality that enables seamless communication between your application and the Supabase database, making it an essential part of the overall project architecture. |
| supabase-client.js |
- Establishes a connection to Supabase, enabling interaction with the projects data storage and management system
- The initSupabaseClient function initializes the client instance by loading the Supabase JavaScript library from a CDN, then creates a client instance using the provided URL and key
- This allows for subsequent API calls to manipulate data within the Supabase project. |
_metadata
⦿ extension._metadata
generated_indexed_rulesets
⦿ extension._metadata.generated_indexed_rulesets
| File Name |
Summary |
| _ruleset1 |
- Generates and stores metadata for ruleset1, a critical component of the projects decision-making framework
- This file contains essential information about the ruleset, including its version number, which enables efficient management and integration with other components
- Its presence ensures seamless data processing and analysis within the system. |
stores
⦿ stores
| File Name |
Summary |
| assignmentStore.ts |
- Manages assignment data storage and retrieval.This file provides a centralized store for assignments, allowing components to access and update the data seamlessly
- It utilizes Zustands create function to establish a global state management system, enabling efficient handling of loading states, errors, and assignment updates. |
types
⦿ types
| File Name |
Summary |
| assignments.ts |
- Defines the Assignment type, encapsulating essential properties such as name, due date, course, and IDs
- This type serves as a blueprint for representing assignments within the projects data model, facilitating structured storage and retrieval of assignment-related information. |
src
⦿ src
| File Name |
Summary |
| env.js |
- Configures environment variables for the project, providing a centralized management of settings across different environments (development, test, production)
- It utilizes Zod schema validation to ensure correct data types and default values are set when necessary
- This file enables consistent configuration and reduces errors by validating environment variables at runtime. |
app
⦿ src.app
| File Name |
Summary |
| providers.tsx |
- Establishes the foundation for authentication management within the application by providing a centralized session provider
- This file enables the integration of NextAuths session management capabilities throughout the codebase, ensuring secure and controlled access to protected routes and features. |
| page.tsx |
- Provides a personalized learning dashboard**This code defines the Home page of the Locked Out application, offering users a customized experience based on their session status
- If authenticated, it displays a users name and provides tools for managing blocked websites, linking classes, and tracking assignments
- For unauthenticated users, it presents a welcome message and invites them to sign in or get started with the application. |
| layout.tsx |
- Establishes the foundation of the applications layout, providing a wrapper for child components to render within
- This file sets up essential metadata, font styles, and providers for the React application, enabling seamless integration with TRPC and other dependencies
- It serves as a central hub for rendering the applications UI, incorporating features like toast notifications and font customization. |
_components
⦿ src.app._components
| File Name |
Summary |
| email-template.tsx |
- Defines the EmailTemplate component, rendering a personalized welcome message based on the provided firstName
- This reusable component enables dynamic email templates, allowing for tailored communications with users. |
| post.tsx |
- Provides the latest post information and allows users to create new posts.This component fetches the most recent post using an API query and displays it if available
- It also enables users to submit a new post by providing a title, which triggers a mutation that updates the post list and clears the input field once successful. |
blocklist
⦿ src.app.blocklist
| File Name |
Summary |
| page.tsx |
- Provides a user interface for managing a block list of websites
- The page displays a list of blocked sites and allows users to add new sites by entering their URLs and removing existing ones with the click of a button. |
extension-success
⦿ src.app.extension-success
| File Name |
Summary |
| page.tsx |
- Signs users out of the application after a successful sign-in, prompting them to close the tab
- This functionality ensures a seamless user experience by automatically terminating the extensions presence once authentication is complete
- The code plays a crucial role in maintaining the integrity of the projects overall architecture and user flow. |
api
⦿ src.app.api
check-session
⦿ src.app.api.check-session
| File Name |
Summary |
| route.ts |
- Verifies user session status by checking if a valid authentication exists.This route checks the current users session and returns a JSON response indicating whether the user is signed in (true) or not (false)
- The response also includes the authenticated user's details
- This functionality is crucial for ensuring secure access to protected routes within the application. |
blocklist
⦿ src.app.api.blocklist
| File Name |
Summary |
| route.ts |
- Handles API requests for managing blocklists, allowing users to retrieve their current blocklist, add or remove sites from the list, and authenticate with NextAuth
- The code provides a secure interface for updating user blocklists while ensuring proper authorization and error handling. |
check-assignments
⦿ src.app.api.check-assignments
| File Name |
Summary |
| route.ts |
- Authenticates users and checks if they have active, unsubmitted assignments
- If the user has pending assignments, it returns a JSON response indicating that they should be blocked
- Otherwise, it indicates that all assignments are submitted and no blocking is necessary
- This API endpoint ensures that users with outstanding tasks are prevented from performing certain actions. |
trpc
⦿ src.app.api.trpc
[trpc]
⦿ src.app.api.trpc.[trpc]
| File Name |
Summary |
| route.ts |
- Establishes the foundation for handling HTTP requests in a Next.js API by providing a context for tRPC API routes
- This file creates a wrapper around the createTRPCContext helper, injecting the required context for each request
- The resulting handler is used to fetch and process API requests from client components. |
auth
⦿ src.app.api.auth
[...nextauth]
⦿ src.app.api.auth.[...nextauth]
| File Name |
Summary |
| route.ts |
- Authenticates users through NextAuth, utilizing configuration settings from the servers auth module
- This route handler enables secure API endpoints for user authentication, facilitating seamless login and registration processes within the application. |
| options.ts |
- Configure authentication options for NextAuth using Google provider.This file sets up the authentication mechanism for the application, allowing users to sign in with their Google accounts
- It defines the client ID and secret, which are environment variables that need to be set
- This configuration enables seamless integration of Google authentication into the overall project architecture. |
auth
⦿ src.app.auth
error
⦿ src.app.auth.error
| File Name |
Summary |
| page.tsx |
- Handles error pages in the application, providing a visually appealing and informative experience for users encountering errors
- This component renders an error message, if available, or a default message if not, within a stylized container that adapts to various screen sizes. |
verify
⦿ src.app.auth.verify
| File Name |
Summary |
| page.tsx |
- Authenticates user identity by verifying email address.This component serves as a crucial step in the authentication process, providing users with a clear understanding of the sign-in link sent to their registered email address
- It offers helpful guidance on where to find the verification link if its not immediately visible. |
signin
⦿ src.app.auth.signin
| File Name |
Summary |
| page.tsx |
- Authenticates users through Google sign-in, allowing them to access the application with their existing Google account credentials
- This feature provides a seamless and secure way for users to log in and start using the app. |
signout
⦿ src.app.auth.signout
| File Name |
Summary |
| page.tsx |
- Handles the sign-out process by verifying user authentication and prompting a confirmation before logging out
- If the user is not signed in, redirects to the home page
- The component renders a form with a submit button to initiate the sign-out action, which updates the session state and redirects to the specified URL (in this case, the home page). |
components
⦿ src.components
| File Name |
Summary |
| CanvasWalkthrough.tsx |
- Provides an interactive walkthrough of the Canvas Access Key generation process, guiding users through a series of steps with accompanying images and descriptions
- The component allows users to navigate through the steps using previous and next buttons, making it easy to follow along and obtain their access key. |
| CanvasKeyForm.tsx |
Ive followed the instructions to avoid using phrases like This file" and kept the response concise within the 50-70 word limit.) |
| AssignmentList.tsx |
- Summary:** The AssignmentList component manages a list of assignments, allowing users to lock in their schedules by selecting dates and times
- It fetches current assignments, block rules, and user information from Supabase, and enables users to create new assignments or update existing ones. |
| BlockListForm.tsx |
- Manages and updates a block list of websites**This React component enables users to manage a list of blocked websites, allowing them to add or remove sites from the list
- It fetches the initial block list data when the user is authenticated and displays the list with options to add new sites or remove existing ones. |
| LinkClasses.tsx |
- Establishs Canvas access key management functionality within the application
- This component enables users to save, replace, and manage their Canvas keys, ensuring seamless integration with the assignment store
- The code handles key storage, validation, and updating, providing a user-friendly interface for managing Canvas connections. |
| SignOutButton.tsx |
- Provides the Sign Out Button component, enabling users to log out from the application with a single click
- This component utilizes NextAuths signOut function to securely handle the logout process, redirecting the user to the specified callback URL (in this case, the root path /'). |
ui
⦿ src.components.ui
| File Name |
Summary |
| input.tsx |
- Provides a reusable React component for creating input fields with customizable styles and behaviors.This file defines an Input component that can be used to render HTML input elements with various attributes, such as type, class name, and reference
- The component also supports customization of its appearance through the use of utility functions from the projects lib/utils module. |
| select.tsx |
- Provides a customizable select component with various features such as trigger, content, label, item, and separator
- This component enables users to create interactive dropdown menus with options, allowing for easy selection and manipulation of data within the project structure. |
| time-picker.tsx |
- MM AM/PM
- The component updates its state based on the selected date and provides an interface for users to manually input hours, minutes, and AM/PM
- It also includes a toggle button to switch between AM and PM modes. |
| label.tsx |
- Provides a customizable label component that renders a styled text element with optional peer-to-peer disabled state
- This reusable UI component is designed to be easily integrated into various parts of the application, offering a flexible and accessible way to display text-based content. |
| button.tsx |
- Provides a customizable button component that can be used across the application
- This component allows developers to easily create buttons with various styles, sizes, and behaviors, enhancing the overall user experience. |
| calendar.tsx |
- Provides a customizable calendar component that enables users to navigate through dates, with features such as showing outside days, customizing appearance, and selecting specific dates
- This reusable UI component is designed to be easily integrated into various applications, offering a flexible and user-friendly date-picking experience. |
| sonner.tsx |
- Provides the Toaster component, a reusable UI element that integrates with the Sonner library to display toast notifications
- This component utilizes the Next Themes system to adapt its appearance based on the current theme, ensuring a consistent visual experience across different environments
- The Toaster component can be easily customized and styled through its props and CSS variables. |
| dialog.tsx |
- Provides a set of reusable React components for creating modal dialogs with customizable overlay, content, header, footer, title, description, and close functionality
- The Dialog component serves as a wrapper for these individual components, allowing developers to easily create and customize their own dialog UIs within their applications. |
email
⦿ src.components.email
| File Name |
Summary |
| auth-template.tsx |
Defines the authentication email template component, rendering a personalized welcome message with the users first name.This component is part of the projects email handling system, enabling dynamic and user-specific communication within the application. |
trpc
⦿ src.trpc
| File Name |
Summary |
| server.ts |
Ive followed the instructions to avoid using phrases like This file" and kept the response concise, within the 50-70 word limit.) |
| react.tsx |
- Establishes the foundation for React-based applications by providing a TRPCReactProvider component that integrates with the Trpc client and query client, enabling seamless API calls and caching
- This file sets up the necessary infrastructure for handling requests and responses between the client-side application and the server-side API. |
| query-client.ts |
- Establishes the foundation for query management within the project by creating a QueryClient instance with custom configurations
- This includes setting default stale time and de/hydration options to optimize performance and data handling, ensuring seamless integration with server-side rendering (SSR) and React Query. |
styles
⦿ src.styles
| File Name |
Summary |
| globals.css |
- Establishes the visual foundation of the application by defining a set of customizable colors and typography styles
- The file imports Tailwind CSS and customizes its variants to create a unique color scheme, allowing developers to easily switch between light and dark modes
- It also defines various design elements, such as borders, input fields, and charts, providing a consistent visual identity for the application. |
lib
⦿ src.lib
| File Name |
Summary |
| utils.ts |
Merges class values into a single string using clsx and tailwind-merge.This utility function enables the combination of multiple class values into a single string, facilitating efficient styling in CSS-based projects that utilize clsx and Tailwind. |
| supabaseClient.ts |
- Establishes a connection to Supabase instance.This file configures the supabaseClient, enabling interaction with the Supabase database
- It retrieves environment variables for URL and anonymous key, then uses these credentials to create a client instance via the @supabase/supabase-js library
- This setup enables seamless integration of Supabase services within the project. |
pages
⦿ src.pages
| File Name |
Summary |
| test-db.tsx |
- Provides test data for block list functionality by simulating a user session and retrieving the corresponding block list from the database
- This component serves as an integration point between the frontend and backend, allowing developers to verify the correctness of their block list implementation. |
api
⦿ src.pages.api
auth
⦿ src.pages.api.auth
| File Name |
Summary |
| extension.ts |
- Authenticates users through Google OAuth and retrieves their Supabase session.This file serves as a gateway to the extensions functionality, ensuring that only authenticated users can access the API
- It leverages Next.js, Next-auth, and Supabase to handle user sessions and provide seamless integration with the extension. |
server
⦿ src.server
actions
⦿ src.server.actions
| File Name |
Summary |
| canvas.ts |
- Retrieve unsubmitted assignments for a users courses by authenticating with Canvas API and parsing Link headers to handle pagination
- The getUserInfo function retrieves user information, including courses and their assignments, then filters and categorizes assignments into submitted and unsubmitted based on due dates and submission status. |
| check_assignments.ts |
- This code checks if all assignments are submitted for a user, ensuring no pending tasks remain
- It fetches the users current assignments, verifies submission status for each, and removes completed assignments from the database
- If any assignment remains unsubmitted, it returns false to indicate blocking is necessary. |
db
⦿ src.server.db
| File Name |
Summary |
| blocklist.ts |
Getting a users current blocklist, adding or updating a site to their blocklist, and removing a site from their blocklist. |
| schema.ts |
- Defines the schema for the userSettings table within the database, establishing relationships between columns such as id, userId, and createdAt
- This file provides a blueprint for storing and retrieving user settings data, ensuring consistency and integrity across the entire project. |
| index.ts |
- Configures Supabase client instance for the entire project, ensuring seamless integration with the database
- This file sets up a singleton instance of the Supabase client using environment variables, providing a centralized access point to the database throughout the application. |
api
⦿ src.server.api
| File Name |
Summary |
| root.ts |
- Establishes the primary API router for the server, aggregating routers from various modules into a single instance
- This centralizes API routing and enables easy management of endpoints
- The file also exports a type definition for the API and provides a factory function to create a server-side caller for the tRPC API. |
| trpc.ts |
- Establishes the foundation for a tRPC server by initializing the API context, creating a caller factory, and defining routers and procedures
- The code sets up middleware for timing procedure execution and adds artificial delay in development
- It also defines public and protected procedures, allowing for authenticated and unauthorized access to API endpoints.Note: Ive avoided using words like This file and kept the response concise within the 50-70 word limit. |
routers
⦿ src.server.api.routers
| File Name |
Summary |
| canvas.ts |
- Establishes a router for canvas-related API endpoints, enabling secure interactions with the server
- The canvasRouter provides a single mutation procedure, saveKey, which accepts a canvas key as input and saves it to storage, returning associated assignments
- This module integrates with the TRPC framework and utilizes Zod schema validation for robust data processing. |
| post.ts |
Hello, which generates greetings based on user input; create, which creates new posts with unique IDs and names; getLatest, which retrieves the latest post; and getSecretMessage`, which reveals a secret message to authorized users. |
auth
⦿ src.server.auth
| File Name |
Summary |
| index.ts |
- Authenticates users by managing sessions and redirects for sign-in and sign-out operations within the Next.js application.This file serves as a central hub for authentication-related logic, providing functions to retrieve session data, trigger sign-in and sign-out redirects, and cache auth calls
- It integrates with NextAuth to handle API routes and provides a unified interface for handling user authentication. |
| config.ts |
- Configures NextAuth.js authentication options, enabling Google sign-in and custom session handling
- The file defines a set of providers, including Google, and specifies the secret key, session strategy, and callback functions to handle sign-in and session management
- This module provides a foundation for secure user authentication within the project. |
supabase
⦿ supabase
migrations
⦿ supabase.migrations
| File Name |
Summary |
| 20240320000000_add_scheduled_time.sql |
- Adds scheduled time column to the current_assignments table.This migration enhances the projects scheduling capabilities by introducing a timestamp field to track assignments' scheduled times
- The change enables more accurate and organized tracking of assignment deadlines, streamlining workflows within the system. |
This project requires the following dependencies:
- Programming Language: TypeScript
- Package Manager: Yarn
Build lockedout from the source and intsall dependencies:
-
Clone the repository:
❯ git clone https://github.com/davidshukhin/lockedout
-
Navigate to the project directory:
-
Install the dependencies:
Run the project with:
Using npm:
Also, you need to go to extentions, go into developer mode, and select the "Load Unpacked" button in the top left. Then select the extention folder and you should now be able to use the extention
