TypeScript Note App

A modern, full-stack note application built with TypeScript, Next.js, and Supabase PostgreSQL. This app allows users to create, edit, and manage notes with rich text formatting. It also supports offline functionality, enabling users to work without an internet connection.

This project is a great example of using modern web technologies to build a feature-rich application.

Table of Contents

• Features
• Tech Stack
• Getting Started
  • Prerequisites
  • Installation
• Database Schema
• Offline Support
• Deployment
• License

Features

• 🔐 Authentication: Secure user authentication with Supabase Auth
• 📝 Rich Text Editing: WYSIWYG editor for creating and editing notes
• 🔄 Offline Support: Work offline and sync when back online
• 📱 PWA: Progressive Web App capabilities for mobile use
• 📤 Export: Export notes to PDF and Markdown formats
• 🌓 Dark Mode: Toggle between light and dark themes

Tech Stack

• Frontend: Next.js 14 with App Router
• Language: TypeScript
• Database: Supabase PostgreSQL
• Authentication: Supabase Auth
• Styling: Tailwind CSS with shadcn/ui components
• Rich Text Editor: Tiptap
• Offline Storage: IndexedDB
• PDF Export: jsPDF

Getting Started

Prerequisites

• Node.js 18+ and npm
• Supabase account

Installation

1. Clone the repository
2. Install dependencies: ```bash npm install ```
3. Set up environment variables in .env: ``` NEXT_PUBLIC_SUPABASE_URL=your-supabase-url NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key ```
4. Run the development server: ```bash npm run dev ```

Database Schema

The application uses a simple database schema:

• notes: Stores user notes with rich text content
  • id: UUID (primary key)
  • user_id: UUID (foreign key to auth.users)
  • title: Text
  • content: JSONB (stores rich text content)
  • created_at: Timestamp
  • updated_at: Timestamp
  • is_archived: Boolean
  • is_pinned: Boolean
  • tags: Text array

Offline Support

The application implements offline support using:

1. Service Worker: For caching static assets and pages
2. IndexedDB: For storing notes locally when offline

When the user comes back online, the application automatically syncs any pending changes with the Supabase backend. This ensures a seamless experience even with intermittent connectivity.

Deployment

You can deploy this application to Vercel with a few clicks:

1. Push your code to a GitHub repository
2. Connect your repository to Vercel
3. Set up the required environment variables
4. Deploy!

License

MIT