AI Note-Taking App

A full-stack note-taking application with AI-powered writing assistance

Create, organize, search, and improve your notes using a rich-text editor and Google Gemini.

Live Demo · Report an Issue

---

Overview

AI Note-Taking App is a full-stack web application for creating and managing personal notes.

Each authenticated user gets a private notes workspace where they can write rich-text content, organize notes with tags, search by title, and use AI tools to summarize content, improve grammar, and generate relevant tags.

Features

• Secure sign-up, sign-in, and sign-out with Clerk
• Private notes workspace for every authenticated user
• Create, read, update, and delete notes
• Rich-text editing with Tiptap
• Search notes by title
• Add and remove custom tags
• Generate tags automatically with Google Gemini
• Summarize note content with AI
• Correct grammar, spelling, and punctuation with AI
• User profile page
• Light and dark theme support
• Responsive toast notifications
• Vercel-compatible deployment

Tech Stack

Category	Technology
Framework	Next.js 14
Language	TypeScript
Frontend	React 18
API	Hono
Authentication	Clerk
Database	PostgreSQL with Neon
ORM	Drizzle ORM
Validation	Zod
AI	Google Gemini
Rich-Text Editor	Tiptap
Styling	Tailwind CSS
UI Components	Radix UI
Icons	Lucide React
Theme Management	next-themes
Deployment	Vercel

Application Architecture

Browser
   |
   v
Next.js App Router
   |
   +---- Clerk Authentication
   |
   +---- /api/notes/*
              |
              v
       Next.js API Handler
              |
              v
          Hono Router
          /         \
         v           v
   Drizzle ORM    Gemini API
         |
         v
  Neon PostgreSQL

Request Flow

1. Clerk authenticates the user.
2. The Next.js API handler retrieves the authenticated user ID.
3. The request is forwarded to the Hono API router.
4. Zod validates the request body.
5. Drizzle ORM performs PostgreSQL operations.
6. Notes are filtered using the authenticated Clerk user ID.
7. AI requests are processed through Google Gemini.

Project Structure

AI-Note-Taking-App/
├── src/
│   ├── app/
│   │   ├── api/
│   │   │   └── [[...route]]/
│   │   │       └── route.ts
│   │   ├── notes/
│   │   │   ├── layout.tsx
│   │   │   └── page.tsx
│   │   ├── profile/
│   │   │   └── page.tsx
│   │   ├── sign-in/
│   │   ├── sign-up/
│   │   ├── globals.css
│   │   ├── layout.tsx
│   │   └── page.tsx
│   │
│   ├── components/
│   │   ├── ui/
│   │   ├── AISidebar.tsx
│   │   ├── LandingHeader.tsx
│   │   ├── NoteCard.tsx
│   │   ├── NoteEditor.tsx
│   │   ├── SearchBar.tsx
│   │   └── ThemeToggle.tsx
│   │
│   ├── db/
│   │   ├── index.ts
│   │   └── schema.ts
│   │
│   ├── lib/
│   │   ├── ai-service.ts
│   │   └── utils.ts
│   │
│   ├── server/
│   │   ├── app.ts
│   │   └── routes/
│   │       └── notes.ts
│   │
│   └── middleware.ts
│
├── .env.local.example
├── drizzle.config.ts
├── next.config.js
├── package.json
├── tailwind.config.ts
└── tsconfig.json

Getting Started

Prerequisites

Before running the project, create accounts or credentials for:

• Clerk
• Neon PostgreSQL
• Google Gemini API

You also need Node.js and npm installed.

Clone the Repository

git clone https://github.com/akash4550/AI-Note-Taking-App.git
cd AI-Note-Taking-App

Install Dependencies

npm install

Configure Environment Variables

Create a .env.local file in the project root.

You can copy the provided example file:

cp .env.local.example .env.local

Add the following variables:

# Clerk Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/

# Neon PostgreSQL
DATABASE_URL=postgresql://user:password@host.neon.tech/dbname?sslmode=require

# Google Gemini
GOOGLE_GEMINI_API_KEY=your_gemini_api_key

Database Setup

The application uses Drizzle ORM with PostgreSQL.

Push the Schema

npm run db:push

Generate Migrations

npm run db:generate

Apply Migrations

npm run db:migrate

Open Drizzle Studio

npm run db:studio

Run the Application

Development Mode

npm run dev

Open:

http://localhost:3000

Production Build

npm run build
npm start

Available Scripts

Command	Description
npm run dev	Start the development server
npm run build	Create a production build
npm start	Start the production server
npm run lint	Run ESLint
npm run db:generate	Generate Drizzle migrations
npm run db:migrate	Apply database migrations
npm run db:push	Push the schema directly to PostgreSQL
npm run db:studio	Open Drizzle Studio

Database Schema

The application currently uses a notes table.

Field	Description
id	Unique CUID2 note identifier
userId	Clerk user ID that owns the note
title	Note title
content	Rich-text note content stored as HTML
tags	Array of tag strings
createdAt	Note creation timestamp
updatedAt	Last update timestamp

Each database query is scoped to the authenticated user ID so users can access only their own notes.

API Endpoints

All note endpoints are available under /api/notes.

Method	Endpoint	Description
GET	/api/notes	Get all notes for the authenticated user
GET	/api/notes/:id	Get a specific note
POST	/api/notes	Create a new note
PATCH	/api/notes/:id	Update an existing note
DELETE	/api/notes/:id	Delete a note
POST	/api/notes/ai/summarize	Summarize note content
POST	/api/notes/ai/fix-grammar	Correct grammar and spelling
POST	/api/notes/ai/auto-tag	Generate relevant tags

Authentication and Data Isolation

Authentication is handled by Clerk.

The API layer retrieves the authenticated Clerk user ID and forwards it to the Hono router. Notes are queried using both the note ID and user ID where ownership validation is required.

This keeps each user’s notes separated within the application.

AI Features

Summarize

Generates a concise summary of the current note.

Fix Grammar

Corrects grammar, spelling, and punctuation, then updates the editor content.

Auto Tag

Analyzes the note title and content and generates relevant tags.

The AI integration is implemented in:

src/lib/ai-service.ts

Deployment

The application can be deployed on Vercel.

Vercel Deployment

1. Push the repository to GitHub.
2. Import the repository into Vercel.
3. Add all environment variables.
4. Configure the production PostgreSQL database.
5. Deploy the application.

The API route uses the Node.js runtime for Hono, PostgreSQL, and request-stream handling.

Contributing

Contributions are welcome.

1. Fork the repository.
2. Create a new branch.

git checkout -b feature/your-feature-name

3. Make your changes.
4. Run the checks.

npm run lint
npm run build

5. Commit your changes.

git commit -m "feat: add your feature"

6. Push the branch.

git push origin feature/your-feature-name

7. Open a pull request.

Author

Akash

GitHub: @akash4550

---

Built with Next.js, Clerk, Neon, Drizzle ORM, Hono, Tiptap, and Google Gemini.

::: ​​