sepehr
4fa418438f
Fixes issue where notebook dropdown showed icon name (e.g., "folder")
instead of the actual icon component.
Problem:
- note-card.tsx was displaying {notebook.icon} as text
- Users saw "folder", "book", etc. instead of icons
Solution:
- Import Lucide icon components (Folder, Book, Briefcase, etc.)
- Add ICON_MAP matching icon names to components
- Use getNotebookIcon() function to resolve icon name to component
- Render component as <NotebookIcon className="h-4 w-4 mr-2" />
Changes:
- components/note-card.tsx:
- Add LucideIcon and icon imports
- Add ICON_MAP and getNotebookIcon() helper
- Update notebook dropdown to render icon components
Result:
✓ Notebook icons now display correctly in dropdown menu
✓ Consistent with notebooks-list.tsx implementation
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Keep Notes - Google Keep Clone
A beautiful and feature-rich Google Keep clone built with modern web technologies.
✨ Features
- 📝 Create & Edit Notes: Quick note creation with expandable input
- ☑️ Checklist Support: Create todo lists with checkable items
- 🎨 Color Customization: 10 beautiful color themes for organizing notes
- 📌 Pin Notes: Keep important notes at the top
- 📦 Archive: Archive notes you want to keep but don't need to see
- 🏷️ Labels: Organize notes with custom labels
- 🔍 Real-time Search: Instantly search through all your notes
- 🌓 Dark Mode: Beautiful dark theme with system preference detection
- 📱 Fully Responsive: Works perfectly on desktop, tablet, and mobile
- ⚡ Server Actions: Lightning-fast CRUD operations with Next.js 16
- 🎯 Type-Safe: Full TypeScript support throughout
🚀 Tech Stack
Frontend
- Next.js 16 - React framework with App Router
- TypeScript - Type safety and better DX
- Tailwind CSS 4 - Utility-first CSS framework
- shadcn/ui - Beautiful, accessible UI components
- Lucide React - Modern icon library
Backend
- Next.js Server Actions - Server-side mutations
- Prisma ORM - Type-safe database client
- SQLite - Lightweight database (easily switchable to PostgreSQL)
📦 Installation
Prerequisites
- Node.js 18+
- npm or yarn
Steps
-
Clone the repository
git clone <repository-url> cd keep-notes -
Install dependencies
npm install -
Set up the database
npx prisma generate npx prisma migrate dev -
Start the development server
npm run dev -
Open your browser Navigate to http://localhost:3000
Getting Started
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.
Learn More
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
Deploy on Vercel
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.