Your Notes, Tasks & Ideas — All in One Place
A modern, full-featured note-taking web application inspired by Evernote.
Built with Next.js 16 · Neon PostgreSQL · Google OAuth · Vercel
Features • Tech Stack • Getting Started • Deployment • Structure • Contributing
NoteFlow brings the power of professional note-taking to the web. Organize your thoughts with rich-text notes, manage tasks with due dates, categorize with notebooks and tags, and search instantly — all behind secure Google authentication.
| Feature | Description |
|---|---|
| 🔤 Text Formatting | Bold, Italic, Underline, Strikethrough, Highlight |
| 📏 Headings | H1, H2, H3 support |
| 📋 Lists | Bullet, Numbered, and Task/Checkbox lists |
| 💻 Code Blocks | Syntax-highlighted code snippets |
| 💬 Blockquotes | Styled quote blocks |
| 🔗 Links | Insert and edit hyperlinks |
| 📐 Alignment | Left, Center, Right text alignment |
| ↩️ Undo/Redo | Full history support |
| Feature | Description |
|---|---|
| 📌 Pin Notes | Keep important notes at the top |
| ⭐ Favorites | Mark notes as favorites for quick access |
| 🗂️ Notebooks | Organize notes into color-coded notebooks |
| 🏷️ Tags | Flexible tagging system with multi-tag support |
| 🔍 Search | Full-text search across titles and content |
| 🗑️ Trash | Soft delete with restore and permanent delete |
| Feature | Description |
|---|---|
| ➕ Create Tasks | Standalone task management |
| 📅 Due Dates | Set deadlines for your tasks |
| ✔️ Completion | Toggle complete/incomplete status |
| Feature | Description |
|---|---|
| ✏️ Quick Notes | Instant note area on the home dashboard |
| 💾 Auto-Save | Saves automatically as you type |
| Feature | Description |
|---|---|
| 🔑 Google OAuth | Secure sign-in with Google account |
| 🛡️ Session Management | Server-side sessions via NextAuth.js |
| 🔒 Data Isolation | Each user can only access their own data |
| Feature | Description |
|---|---|
| 🖥️ Desktop | Full sidebar with all navigation |
| 📱 Mobile | Collapsible hamburger menu sidebar |
 Framework |
 Language |
 Styling |
 Database |
 DB Provider |
 ORM |
 Auth |
 Deployment |
 Editor |
 Icons |
 Dates |
 Linting |
| Requirement | Purpose |
|---|---|
| 📦 Node.js 18+ | Runtime environment |
| 🗄️ Neon account | PostgreSQL database |
| 🔑 Google Cloud project | OAuth authentication |
| ▲ Vercel account | Deployment (optional) |
git clone https://github.com/romizone/noteflow.git
cd noteflow
npm installcp .env.example .env.localEdit .env.local with your credentials:
# 🗄️ Neon Database
DATABASE_URL=postgresql://user:password@ep-xxx.region.aws.neon.tech/neondb?sslmode=require
# 🔑 Google OAuth
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
# 🔐 NextAuth
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=generate_with_openssl_rand_base64_32- Go to Google Cloud Console
- Create or select a project
- Navigate to APIs & Services > Credentials
- Click Create Credentials > OAuth 2.0 Client ID
- Select Web application
- Add Authorized redirect URIs:
http://localhost:3000/api/auth/callback/google(development)https://your-app.vercel.app/api/auth/callback/google(production)
- Copy the Client ID and Client Secret to
.env.local
npm run db:pushnpm run dev🌐 Open http://localhost:3000 in your browser.
- Push your repository to GitHub
- Visit vercel.com/new and import your repo
- Configure the following Environment Variables:
| Variable | Value | Description |
|---|---|---|
DATABASE_URL |
postgresql://... |
Neon connection string |
GOOGLE_CLIENT_ID |
xxx.apps.googleusercontent.com |
Google OAuth Client ID |
GOOGLE_CLIENT_SECRET |
GOCSPX-xxx |
Google OAuth Client Secret |
NEXTAUTH_URL |
https://your-app.vercel.app |
Production URL |
NEXTAUTH_SECRET |
(generated) | Run openssl rand -base64 32 |
- Click Deploy 🚀
| Command | Description |
|---|---|
npm run db:push |
📤 Push schema changes to Neon |
npm run db:generate |
📄 Generate migration files |
npm run db:migrate |
|
npm run db:studio |
🖥️ Open Drizzle Studio (database GUI) |
noteflow/
├── 📂 src/
│ ├── 📂 app/
│ │ ├── 📂 api/
│ │ │ ├── 📂 auth/[...nextauth]/ # 🔑 NextAuth API
│ │ │ ├── 📂 notes/ # 📝 Notes CRUD
│ │ │ ├── 📂 notebooks/ # 📒 Notebooks CRUD
│ │ │ ├── 📂 tags/ # 🏷️ Tags CRUD
│ │ │ ├── 📂 tasks/ # ✅ Tasks CRUD
│ │ │ ├── 📂 scratch-pad/ # 📋 Scratch Pad
│ │ │ └── 📂 search/ # 🔍 Search API
│ │ ├── 📂 login/ # 🔐 Login page
│ │ ├── 📂 notes/[id]/ # ✏️ Note editor
│ │ ├── 📂 notebooks/ # 📒 Notebooks pages
│ │ ├── 📂 tags/ # 🏷️ Tags pages
│ │ ├── 📂 tasks/ # ✅ Tasks page
│ │ ├── 📂 trash/ # 🗑️ Trash page
│ │ ├── 📄 layout.tsx # 🖼️ Root layout
│ │ └── 📄 page.tsx # 🏠 Home page
│ ├── 📂 components/
│ │ ├── 📄 AuthGuard.tsx # 🛡️ Auth wrapper
│ │ ├── 📄 CreateNotebookModal.tsx # 📒 Notebook modal
│ │ ├── 📄 NoteCard.tsx # 🃏 Note card
│ │ ├── 📄 NoteEditor.tsx # ✏️ TipTap editor
│ │ ├── 📄 ScratchPad.tsx # 📋 Scratch pad
│ │ ├── 📄 SessionProvider.tsx # 🔑 Session provider
│ │ ├── 📄 Sidebar.tsx # 📱 Navigation sidebar
│ │ └── 📄 TagManager.tsx # 🏷️ Tag selector
│ └── 📂 lib/
│ ├── 📄 auth.ts # 🔐 NextAuth config
│ ├── 📄 auth-helpers.ts # 🔧 Auth utilities
│ ├── 📄 db.ts # 🗄️ Database connection
│ ├── 📄 schema.ts # 📊 Drizzle schema
│ └── 📄 types.ts # 📝 TypeScript types
├── 📄 drizzle.config.ts # ⚙️ Drizzle config
├── 📄 next.config.ts # ⚙️ Next.js config
├── 📄 package.json # 📦 Dependencies
├── 📄 .env.example # 🔒 Env template
└── 📄 README.md # 📖 Documentation
┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ users │ │ notebooks │ │ tags │
├──────────────┤ ├──────────────┤ ├──────────────┤
│ id (PK) │◄────│ userId (FK) │ │ id (PK) │
│ name │ │ id (PK) │ │ userId (FK) │
│ email │ │ name │ │ name │
│ image │ │ color │ │ createdAt │
│ createdAt │ │ isDefault │ └──────┬───────┘
└──────┬───────┘ └──────┬───────┘ │
│ │ ┌─────┴───────┐
│ ┌─────┴───────┐ │ note_tags │
│ │ notes │ ├─────────────┤
│ ├─────────────┤ │ noteId (FK) │
├──────────────│ userId (FK) │──────│ tagId (FK) │
│ │ notebookId │ └─────────────┘
│ │ title │
│ │ content │
│ │ isPinned │
│ │ isFavorite │
│ │ isTrashed │
│ └─────────────┘
│
│ ┌──────────────┐ ┌──────────────┐
├──│ tasks │ │ scratch_pad │
│ ├──────────────┤ ├──────────────┤
└──│ userId (FK) │ │ userId (FK) │
│ title │ │ content │
│ isCompleted │ │ updatedAt │
│ dueDate │ └──────────────┘
└──────────────┘
Contributions are welcome! Please follow these steps:
- 🍴 Fork the repository
- 🔀 Create a feature branch (
git checkout -b feature/amazing-feature) - 💾 Commit your changes (
git commit -m 'Add amazing feature') - 📤 Push to the 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.
Romi Nur Ismanto — @romizone
Made with ❤️ and ☕ — Powered by Next.js & Neon