https://github.com/codingwcal/notes-app
A lightweight notes app built with Next.js 14 & Supabase—CRUD, pin/unpin, color categories, search, optimistic updates, and a polished Tailwind/shadcn UI.
https://github.com/codingwcal/notes-app
nextjs postgresql productivity reacthooks shadcn-ui supabase tailwindcss typescript vercel
Last synced: 3 months ago
JSON representation
A lightweight notes app built with Next.js 14 & Supabase—CRUD, pin/unpin, color categories, search, optimistic updates, and a polished Tailwind/shadcn UI.
- Host: GitHub
- URL: https://github.com/codingwcal/notes-app
- Owner: CodingWCal
- Created: 2025-09-14T07:17:14.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-09-14T08:21:24.000Z (10 months ago)
- Last Synced: 2025-09-14T09:30:18.827Z (10 months ago)
- Topics: nextjs, postgresql, productivity, reacthooks, shadcn-ui, supabase, tailwindcss, typescript, vercel
- Language: TypeScript
- Homepage: https://notes-app-eight-brown.vercel.app/
- Size: 106 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📝 Notes App
A modern, responsive note-taking application built with Next.js and Supabase modeled after Google Keep.
[](https://notes-app-eight-brown.vercel.app/)
Notes Page with Pins
Edit Notes Page
## 🛠 Tech Stack
- **Frontend**: Next.js 14, TypeScript
- **Styling**: Tailwind CSS, shadcn/ui
- **Backend**: Supabase (PostgreSQL)
- **State Management**: React Hooks
- **Deployment**: Vercel
Used Cursor as a pair-programmer for refactors and multi-file edits; all logic and integrations were implemented, reviewed, and tested by me. Initial UI was drafted with V0, then customized.
## ✨ Features
### Core Functionality
- Create, read, update, delete notes
- Pin/unpin notes
- Color-code notes (6 color options)
- Search across note titles and content
- Responsive design
### UI/UX
- Modern, clean interface
- Card-based note layout
- Hover interactions
- Toast notifications
- Mobile-friendly
## 📂 Project Structure
```
notes-app/
├── app/ # Next.js app router
├── components/ # React components
│ ├── ui/ # Shadcn UI components
│ └── ... # Custom components
├── hooks/ # Custom React hooks
├── lib/ # Utility functions, Supabase client
├── public/ # Static assets
└── styles/ # Global styles
```
## 🎯 Acceptance Criteria
- [x] Real-time data persistence
- [x] Optimistic UI updates
- [x] Error handling
- [x] Type-safe development
- [x] Accessible design
- [x] Performance optimized
## 📝 Getting Started
1. Clone the repository
2. Install dependencies
3. Set up Supabase project
4. Configure environment variables
5. Run `npm run dev`
## 🚀 Quick Start
### Setup
### 1. Install dependencies
```bash
npm install
```
### 2. Environment
Create .env.local with Supabase credentials
```bash
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
```
### Development
Run local development server
```bash
npm run dev
```
### Scripts
```bash
npm run dev (start dev server)
npm run build (production build)
npm run start (run production build locally)
```
## 🔧 Troubleshooting
- 400 Bad Request on insert/update
Make sure your Supabase table has all columns used by the app (color, pinned, etc.). The payload must match column names.
- “Could not find the 'color' column”
Add the color text column (default 'default'), then redeploy/rerun.
- Cannot update/delete (RLS errors)
In dev, use permissive policies (allow all). In prod, write proper auth-based policies.
- Pinned notes don’t move
Ensure the client sorts: pinned first, then created_at desc. (This repo’s page.tsx already does it.)
### Deploy on Vercel
1. Connect repository to Vercel
2. Add environment variables:
- `NEXT_PUBLIC_SUPABASE_URL`
- `NEXT_PUBLIC_SUPABASE_ANON_KEY`
## 🤝 Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## 📝 License: MIT