StudySage

StudySage is an AI-powered note-taking web application built to help students study more effectively. It leverages a PostgreSQL database via Supabase to store user notes and authentication data, uses a Prisma ORM for seamless database interaction, and integrates the OpenAI API to provide intelligent features like note summarization, AI-powered Q&A, and quiz generation. The frontend is built with Next.js 15 using the App Router, and styled with shadcn/ui for a clean, responsive user experience.

Visit the site

Feel free to checkout this project!

Features

• AI-Powered Notes – Summarize your notes, ask questions, and generate quizzes using the OpenAI API

• Authentication with Supabase – Sign up, log in, and manage sessions with secure authentication

• Custom Quizzes – Automatically turn notes into multiple-choice quizzes for active recall

• Clean UI with shadcn – Sleek and responsive interface built with reusable UI components

• Protected Routes – Users must log in to access notes and quizzes, enforced via Next.js middleware

• Modern Stack – Built with Next.js App Router, React, Prisma, Supabase, and OpenAI

Demo

Sign Up:

Create Note:

Ask AI:

Generate Quiz:

Toggle Theme:

Logout:

What I Learned

• How to integrate OpenAI into a real-world Next.js app

• Authentication & session management with Supabase

• How to use Prisma as an ORM for Supabase Postgres

• Creating full CRUD functionality (Create, Read, Update, Delete) for user notes

• Working with API routes and server actions to handle database operations

• Handling client-server communication using fetch, useEffect, and API endpoints

• Building clean UI with Tailwind CSS + shadcn/ui components

• Deploying full-stack apps on Vercel

Prerequisites

Before running this project locally, ensure you have the following installed:

• Node.js and npm (Node Package Manager)

• PostgreSQL database

• Supabase project set up with authentication enabled

• OpenAI API key

• A code editor (VS Code recommended)

Installation

1. Clone this repository.

2. Create a .env.local file in the root directory with the following keys:

 
  env NEXT_PUBLIC_SUPABASE_URL=your_supabase_url 
  NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key 
  OPENAI_API_KEY=your_openai_api_key 
 

3. Run the following command to install all dependencies:

 
  npm install
 

4. Push the Supabase schema using Prisma (optional):

 
  npx prisma db push
 

5. Start the development server:

 
  npn run dev
 

6. Access the app at: http://localhost:3001