Notevo — Production Ready

A beautiful, real-time note-taking application with rich-text editing, folder organization, and collaborative features.

Live Deployment : https://notevo-1234.vercel.app/

Features

Rich-text editing — Full formatting support with Tiptap editor Folder organization — Categorize notes with custom colors and icons Tags & search — Find notes instantly with powerful search Pinned notes — Keep important notes at the top Dark mode — Beautiful light and dark themes Real-time sync — Live updates via Socket.IO Collaboration — See who's editing in real-time Share links — Generate public links to share notes Responsive design — Works on desktop and mobile

Tech Stack

• Frontend: Next.js 14, React, TypeScript, Tailwind CSS, Tiptap editor
• Backend: Next.js API routes, Supabase
• Database: PostgreSQL (via Supabase)
• Authentication: Supabase Auth
• Real-time: Socket.IO
• Deployment: Vercel
• UI Components: Radix UI, Lucide Icons

Project Structure

notevo/
├── app/                    # Next.js app directory
│   ├── api/               # API routes for backend logic
│   ├── (auth)/            # Auth-related pages
│   ├── (dashboard)/       # Protected dashboard pages
│   └── login/             # Login page
├── components/            # React components
│   ├── editor/           # Rich-text editor component
│   ├── layout/           # Layout components
│   ├── notes/            # Note-related components
│   ├── folders/          # Folder management components
│   └── ui/               # Reusable UI components
├── hooks/                # Custom React hooks
│   ├── useNotes.ts      # Notes CRUD operations
│   ├── useFolders.ts    # Folders CRUD operations
│   └── useSocket.ts     # Socket.IO integration
├── lib/                 # Utility functions
│   ├── supabase.ts      # Client Supabase instance
│   ├── supabase-server.ts # Server Supabase instance
│   └── utils.ts         # Helper functions
├── types/               # TypeScript type definitions
├── server/              # Node.js Socket.IO server
└── supabase/            # Database schema

Getting Started

Prerequisites

• Node.js 20+
• npm or yarn
• Supabase account (free tier available)

Local Development

1. Clone the repository

   git clone <repository-url>
   cd notevo

2. Install dependencies

   npm install

3. Set up environment variables

   cp .env.example .env.local

   Update .env.local with your Supabase credentials:

   NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
   NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
   SUPABASE_SERVICE_ROLE_KEY=your-service-role-key
   NEXT_PUBLIC_SOCKET_URL=http://localhost:3001
   SOCKET_SECRET=your-secret
   NEXT_PUBLIC_APP_URL=http://localhost:3000

4. Start the Socket.IO server (in a separate terminal)

   npm run server

5. Start the development server

   npm run dev

   Open http://localhost:3000 in your browser.

Available Scripts

• npm run dev — Start Next.js dev server
• npm run build — Build for production
• npm start — Start production server
• npm run server — Start Socket.IO server
• npm run dev:all — Run dev server and Socket.IO together

Environment Variables

Public Variables (Safe to expose)

• NEXT_PUBLIC_SUPABASE_URL — Supabase project URL
• NEXT_PUBLIC_SUPABASE_ANON_KEY — Anonymous API key for frontend
• NEXT_PUBLIC_SOCKET_URL — Socket.IO server URL
• NEXT_PUBLIC_APP_URL — Application domain

Private Variables (Server-only)

• SUPABASE_SERVICE_ROLE_KEY — Admin key, NEVER expose to frontend
• SOCKET_SECRET — Socket.IO secret for authentication

Never commit .env.local to version control. Use .env.example as a template.

Production Deployment

Deployment Guide

See DEPLOYMENT.md for comprehensive deployment instructions.

Quick Start to Vercel

1. Push code to GitHub
2. Connect repository in Vercel Dashboard
3. Add environment variables in Project Settings
4. Deploy!

Production Checklist

See PRODUCTION_CHECKLIST.md for pre-deployment verification.

Database Schema

The Supabase database includes:

• users — User accounts (managed by Supabase Auth)
• notes — User notes with rich-text content
• folders — Note folders with colors and icons
• shares — Shareable note links

Run migrations from supabase/schema.sql in your Supabase project.

Authentication

• Email/Password — Standard authentication
• Guest Mode — Temporary access with localStorage (data not saved)
• Row-Level Security — Supabase RLS ensures users only see their own data

Real-time Collaboration

Socket.IO provides:

• Live cursor positions
• Real-time content updates
• Presence awareness (see who's editing)
• Conflict-free updates

API Routes

Notes

• GET /api/notes — List user's notes
• POST /api/notes — Create new note
• PATCH /api/notes/[id] — Update note
• DELETE /api/notes/[id] — Delete note

Shares

• POST /api/shares — Create share link
• GET /api/shares/[slug] — Get shared note (public)

Troubleshooting

Build Fails

• Ensure Node.js 20+ is installed: node --version
• Clear cache: rm -rf node_modules package-lock.json && npm install
• Check environment variables are set

Socket.IO Connection Issues

• Verify Socket.IO server is running
• Check NEXT_PUBLIC_SOCKET_URL is correct
• Ensure server allows connections from your domain

Supabase Connection Errors

• Verify Supabase URL and keys in .env.local
• Check Supabase project is active
• Ensure your IP isn't blocked (Supabase settings)

Auth Issues

• Clear browser cookies: Dev Tools → Application → Cookies
• Check Supabase Auth settings (allowed redirect URLs)
• Verify email confirmation is enabled if using email auth

Security

✅ What we've done:

• All sensitive keys in .env.local (not in code)
• .env.local gitignored
• Service role key only used server-side
• Anonymous key safely exposed to frontend
• Console logs removed from production code
• No hardcoded secrets in repository
• TypeScript strict mode enabled
• Input validation on API routes
• Row-Level Security on database

Performance

• Next.js optimization — Automatic code splitting and optimization
• Image optimization — Next.js Image component for fast loading
• Caching — Server-side caching via API routes
• Real-time updates — Efficient Socket.IO connections
• Database queries — Optimized Supabase queries

Contributing

1. Create a feature branch: git checkout -b feature/amazing-feature
2. Commit changes: git commit -m 'Add amazing feature'
3. Push to branch: git push origin feature/amazing-feature
4. Open a Pull Request

License

MIT License — feel free to use this project for personal or commercial purposes.

• Docs: See DEPLOYMENT.md and PRODUCTION_CHECKLIST.md