Harshitshukla0208/NotesAI

★ 0Forks 0TypeScriptGitHub ↗Compare

Project website ↗

README

NotesAI - AI-Powered Note Taking

Next.js TypeScript Supabase Tailwind CSS License

A powerful fullstack note-taking application with AI-powered summarization. Create, edit, and manage your notes with intelligent summaries generated by Groq's LLM API.

Table of Contents

Features

  • AI-Powered Summarization — Generate concise summaries of your notes using Groq's LLM API
  • Rich Note Management — Create, edit, delete, and organize notes with titles and content
  • Code Snippet Support — Toggle between text and code editor modes with syntax highlighting
  • User Authentication — Sign up, sign in, and manage sessions with Supabase Auth (email, Google, GitHub)
  • Public/Private Notes — Control visibility of your notes with a simple toggle
  • Dark Mode Support — Automatic and manual theme switching with next-themes
  • Responsive Design — Fully responsive UI built with Tailwind CSS and shadcn/ui components

Tech Stack

Technology Purpose
Next.js 15.3 React framework with App Router
TypeScript 5 Type safety and developer experience
Supabase Authentication and PostgreSQL database
Groq API AI-powered text summarization
TanStack Query Server state management and caching
Tailwind CSS 4 Utility-first CSS framework
shadcn/ui Accessible UI component library
Framer Motion Animation library
Sonner Toast notifications

Project Structure

src/
├── app/
│   ├── api/
│   │   └── groq/
│   │       └── summarize/route.ts    # AI summarization API endpoint
│   ├── auth/
│   │   ├── signin/page.tsx
│   │   └── signup/page.tsx
│   ├── dashboard/page.tsx            # Main dashboard
│   ├── notes/
│   │   ├── [id]/page.tsx             # Note editor page
│   │   └── new/page.tsx
│   ├── layout.tsx                    # Root layout with providers
│   └── page.tsx                      # Landing page
├── components/
│   ├── auth/
│   │   └── auth-form.tsx             # Sign in / sign up form
│   ├── notes/
│   │   ├── note-editor.tsx           # Note editing interface
│   │   ├── note-list.tsx             # Note listing component
│   │   └── note-summary.tsx          # AI summary display
│   └── ui/                           # shadcn/ui primitives
├── hooks/
│   ├── use-notes.ts                  # Note CRUD operations
│   └── use-summarize.ts              # Summarization hook
├── lib/
│   ├── groq/client.ts                # Groq API client
│   └── supabase/client.ts            # Supabase client setup
└── providers/
    ├── auth-provider.tsx             # Authentication context
    ├── query-provider.tsx            # TanStack Query provider
    └── theme-provider.tsx            # Theme provider

Screenshots

Screenshots coming soon

Prerequisites

  • Node.js 18+ (recommended: 20 LTS)
  • npm (comes with Node.js)
  • A Supabase account and project
  • A Groq API key

Installation and Setup

  1. Clone the repository:
git clone https://github.com/Harshitshukla0208/NotesAI.git
cd NotesAI
  1. Install dependencies:
npm install
  1. Set up environment variables (see Environment Variables section).

Environment Variables

⚠️ Note: No .env.example file was found in this repository. The following variables were inferred from the source code and may be incomplete or inaccurate. Please verify against the actual codebase.

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

# Supabase Configuration
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

# Groq API Configuration
GROQ_API_KEY=your_groq_api_key

Where to get these values:

  • Supabase: Go to your Supabase project dashboard → Settings → API. Copy the "Project URL" and "anon public" key.
  • Groq API: Sign up at console.groq.com and create an API key.

Running the Project

Development

npm run dev

The application will be available at http://localhost:3000.

Production Build

npm run build
npm start

Other Commands

Command Description
npm run lint Run ESLint
npm run build Build for production (disables ESLint and type checks)

Database Setup

This project uses Supabase as its database backend. You need to create the following table in your Supabase project's SQL editor:

CREATE TABLE notes (
    id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
    title TEXT NOT NULL,
    content TEXT,
    is_code BOOLEAN DEFAULT false,
    language TEXT,
    created_at TIMESTAMPTZ DEFAULT NOW(),
    updated_at TIMESTAMPTZ DEFAULT NOW(),
    user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
    is_public BOOLEAN DEFAULT false,
    summary TEXT,
    tags TEXT[]
);

-- Enable Row Level Security
ALTER TABLE notes ENABLE ROW LEVEL SECURITY;

-- Create policies
CREATE POLICY "Users can view their own notes"
    ON notes FOR SELECT
    USING (auth.uid() = user_id);

CREATE POLICY "Users can insert their own notes"
    ON notes FOR INSERT
    WITH CHECK (auth.uid() = user_id);

CREATE POLICY "Users can update their own notes"
    ON notes FOR UPDATE
    USING (auth.uid() = user_id);

CREATE POLICY "Users can delete their own notes"
    ON notes FOR DELETE
    USING (auth.uid() = user_id);

API Routes

POST /api/groq/summarize

Generates an AI summary of provided text using Groq's LLM.

Request Body:

{
  "text": "Your note content here..."
}

Response (200):

{
  "summary": "Generated summary of the text..."
}

Error Responses:

  • 400 — Text is required and must be a string
  • 500 — Failed to generate summary

Contributing

Contributions are welcome! Please follow these steps:

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

License

This project is licensed under the MIT License. See the LICENSE file for details.

Contributors

Harshitshukla0208

Issues