Note Cracker

Demo.mp4

Problem

We take in a great deal of knowledge every day, yet we forget a significant portion just as fast. What is the value of knowledge if we cannot recall or use it when it matters most? Forgetting is not a flaw; it is simply how our brain functions, as explained by Ebbinghaus’s forgetting curve. This curve illustrates the exponential rate at which information fades from memory unless an active effort is made to retain it.

So, how can you hold onto what you have learned? The key is testing yourself on the information, as this helps solidify it in your memory. But let’s face it, you cannot rely on random internet quizzes for everything you want to remember. While taking notes is helpful, it is not a complete solution. Creating flashcards manually is tedious and time-consuming.

That is where Note Cracker comes in. It is a simple tool designed to help you better retain and test the knowledge you consume.

Solution

Note Cracker is a React JS application that leverages OpenAI and Supabase to support active recall of Notion notes through multiple-choice questions (MCQs). It uses OpenAI's GPT-4o-mini model to generate MCQs tailored to the selected Notion notes, allowing users to choose the number and difficulty level of questions. Supabase manages user authentication with Notion, allowing users to provide access to specific workspaces for revision. The application utilizes Edge Functions to handle interactions with Notion and OpenAI APIs seamlessly.

The project uses JavaScript for the front-end development and TypeScript (Deno) for the back-end.

Tech Stack

• React JS: Front-end framework for building a responsive user interface.
• Supabase Authentication: Manages user authentication with Notion to access Notion pages.
• Supabase Edge Functions: Backend logic to interact with the Notion and OpenAI APIs.

Project setup: Supabase and Notion Integration

• Create a Supabase Project
• Enable Notion Login:
  • Follow the documentation to create a Notion integration.
  • Add your Supabase project URL as the redirect URI in the Notion integration settings.
• Configure Authentication:
  • In your Supabase project, navigate to the Authentication section from the menu.
  • Under the Providers tab, enable Notion as a provider.
  • Enter the OAuth Client ID and OAuth Client Secret from your Notion integration to complete the setup.
  • Enable Notion OAuth after entering all necessary credentials.
  • Go to Authentication -> Configuration -> URL Configuration.
  • Enter your Site URL and Redirect URLs to define where your website should redirect after authenticating with Notion.
  • Under Redirect URLs, you can specify multiple URLs to account for local and production environments.
  • Refer to this guide for further clarification.

Deploying Supabase Edge Function

• You can run the functions locally using Docker or deploy them directly to your Supabase account.

Steps for Local Environment Setup

• Get Docker from here.
• Follow the instructions to install the CLI from this guide.
• Verify that the Docker engine is running on your local machine.
• Run the following commands to start the Supabase server and serve the functions:

  supabase start
  supabase functions serve
  

• Make changes in the front-end to ensure API calls hit the local Edge Functions.
• Specifically, update the following files:
  • /src/hooks/useListPages.js
  • /src/hooks/usePageContent.js
• In both files, update the following line:

  const SUPABASE_URL = import.meta.env.VITE_SUPABASE_URL || supabaseUrl;
  

• Change it to:

  const SUPABASE_URL = "http://127.0.0.1:54321";
  

• Once the changes are made, the API calls from the front end will target the local Edge Functions.

Steps for Deployment Setup

• Navigate to the supabase directory from the root directory of the project.
• Use the following commands to deploy the functions

  supabase login
  supabase functions deploy
  

• There's no need to modify the code if you're deploying to a Supabase project.

Local setup

• Clone the Repository
• Install the dependencies using npm install
• Generate an OpenAI API key
• Create a .env file in the project’s root directory and include the following variables:

VITE_SUPABASE_URL = <supabase_url>
VITE_SUPABASE_KEY = <supabase_anon_key>
VITE_OPENAI_API_KEY = <openai_api_key>

• If the .env file is not created, the application will prompt input fields upon startup to enter all the necessary keys and URLs.
• This feature can be used if you prefer not to create environment variables manually.
• To start the application, npm run dev

Application Walkthrough

• When the application starts, you can either use the configuration page (if the .env file is not available) or proceed directly to the login screen.

  

  

• Click "Login to Notion" and select the workspace you want to grant access to.

  

• After logging in, you'll be redirected to a page where you can configure the workspace, pages, difficulty level, and the number of questions (minimum: 10, maximum: 20).

  

• Click the "Submit" button to navigate to the MCQ revision page.

• The selected number of questions will appear, each with four answer options.

• Choose an answer and proceed to the next question.

• Use the "Previous" button if you need to change any answers.

  

• Once all questions are answered, you'll see a result page displaying your score, correct answers, and explanations.

• To revise again, click the "Revise More" button.

  

• If the selected Notion page contains only subpages and no actual content, you must select the subpages individually for revision.

• Attempting to select a page without any content will result in an error message instructing you to choose a page with content.

  

• If the selected note is unsuitable for generating MCQs (e.g., travel plans, personal information, timetables, shopping lists, etc.), an error message will prompt you to upload a valid note for revision.

  

  

• A "Logout" button is available on every page to end your session securely.