A modern, AI-powered note-taking application that helps you create, organize, and understand your notes better.
Your digital notebook, enhanced with intelligence.
Goat Notes is a full-stack note-taking application built with Next.js 16, TypeScript, and Supabase. It combines a beautiful, responsive UI with powerful AI capabilities to help you manage your notes more effectively.
The standout feature is the AI-powered chat assistant that can answer questions about your notes, helping you quickly find information and gain insights from your stored content.
- Create Notes – Instantly create new notes with a single click
- Auto-Save – Notes are automatically saved as you type (debounced updates)
- Delete Notes – Remove notes with a confirmation dialog to prevent accidents
- Note Organization – All notes are organized in a collapsible sidebar
- Ask AI About Your Notes – Chat with an AI that has context of all your notes
- Conversational Interface – Multi-turn conversations with memory
- Smart Responses – Get formatted HTML responses with proper structure
- Powered by GPT-4o-mini – Fast and intelligent responses
- Secure Sign-Up/Login – Email and password authentication via Supabase
- Protected Routes – Middleware protection for authenticated routes
- Session Management – Persistent sessions with automatic refresh
- Dark/Light Mode – Toggle between themes or follow system preference
- Responsive Design – Works seamlessly on desktop, tablet, and mobile
- Radix UI Components – Accessible, high-quality UI primitives
- Tailwind CSS – Utility-first styling with custom design system
- Toast Notifications – User-friendly feedback for all actions
- Next.js App Router – Latest Next.js features with server components
- Turbopack – Lightning-fast development builds
- Optimistic Updates – Instant UI feedback
- Edge-Ready Middleware – Fast authentication checks
| Category | Technology |
|---|---|
| Framework | Next.js 16 (App Router) |
| Language | TypeScript |
| Styling | Tailwind CSS v4 |
| UI Components | Radix UI, shadcn/ui |
| Database | PostgreSQL (Supabase) |
| ORM | Prisma |
| Authentication | Supabase Auth |
| AI | OpenAI GPT-4o-mini |
| State Management | React Context + Hooks |
| Deployment | Vercel |
Get started in 3 simple steps:
# Clone the repository
git clone https://github.com/ksamrat224/Note-Taker.git
cd Note-Taker
# Install dependencies
npm install
# Start development server
npm run dev- Node.js 18+ and npm
- Git
- Supabase account (free tier works)
- OpenAI API key
-
Clone the repository
git clone https://github.com/ksamrat224/Note-Taker.git cd Note-Taker -
Install dependencies
npm install
-
Set up environment variables
Create a
.env.localfile in the root directory:# Database (Supabase PostgreSQL) DATABASE_URL=postgresql://postgres.[project-ref]:[password]@aws-0-[region].pooler.supabase.com:6543/postgres?pgbouncer=true # Supabase Auth SUPABASE_URL=https://[project-ref].supabase.co SUPABASE_ANON_KEY=your_supabase_anon_key # OpenAI OPENAI_API_KEY=sk-your_openai_api_key # App URL NEXT_PUBLIC_BASE_URL=http://localhost:3000
-
Set up the database
npx prisma generate npx prisma migrate dev
-
Start the development server
npm run dev
-
Open your browser
Visit http://localhost:3000
Create a new note by filling out the form and clicking "Save". View the details of a note by clicking on it in the list.
The AI will automatically generate a description for each note after it is saved. This description will be displayed in the note detail view.
Create a .env file in the root directory:
NODE_ENV=development
PORT=3000
# Add your AI API key here (if applicable)
AI_API_KEY=your_api_key_hereNote-Taker/
├── 📁 src/
│ ├── 📁 actions/ # Server actions (notes, user)
│ ├── 📁 app/ # Next.js App Router pages
│ │ ├── 📁 api/ # API routes
│ │ ├── 📁 login/ # Login page
│ │ └── 📁 sign-up/ # Sign-up page
│ ├── 📁 auth/ # Supabase auth utilities
│ ├── 📁 components/ # React components
│ │ └── 📁 ui/ # shadcn/ui components
│ ├── 📁 db/ # Prisma schema & client
│ ├── 📁 hooks/ # Custom React hooks
│ ├── 📁 lib/ # Utility functions
│ ├── 📁 openai/ # OpenAI client setup
│ ├── 📁 providers/ # React context providers
│ ├── 📁 styles/ # Global CSS styles
│ └── 📄 middleware.ts # Auth middleware
├── 📁 public/ # Static assets & images
├── 📄 .env.example # Example environment variables
├── 📄 package.json # Project dependencies
├── 📄 tailwind.config.ts # Tailwind configuration
└── 📄 README.md # Project documentation
| Command | Description |
|---|---|
npm run dev |
Start development server with Turbopack |
npm run build |
Build for production |
npm run start |
Start production server |
npm run lint |
Run ESLint |
npm run migrate |
Generate Prisma client and run migrations |
Contributions are welcome! Here's how you can help:
- Fork the repository
- Create a feature branch
git checkout -b feature/amazing-feature
- Commit your changes
git commit -m "Add amazing feature" - Push to your branch
git push origin feature/amazing-feature
- Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Next.js – The React framework for production
- Supabase – Open source Firebase alternative
- Prisma – Next-generation ORM
- OpenAI – AI that powers our assistant
- shadcn/ui – Beautiful UI components
- Radix UI – Accessible component primitives
- Tailwind CSS – Utility-first CSS framework
Made with ❤️ by Samrat Karki
⭐ Star this repo if you find it helpful!