Aplikasi pencatatan berbasis blok (Mini Notion Clone) yang dirancang untuk produktivitas maksimal. Mendukung fitur Drag & Drop, Autosave, Real-time Collaboration, dan keamanan tingkat tinggi.

Welcome Page

Editor Page

• Block-Based Editor: Tulis teks (TipTap), buat checklist, upload gambar, atau tulis kode.
• Drag & Drop: Atur urutan blok dengan mudah menggunakan fitur seret dan lepas (dnd).
• Real-time Collaboration: Edit dokumen bersama rekan dalam waktu nyata menggunakan WebSocket (Socket.io).
• Smart Locking Mechanism: Mencegah konflik pengeditan dengan indikator "User is editing..." yang akurat.
• Autosave: Perubahan disimpan secara otomatis ke database dengan sistem debounce yang efisien.
• Security Hardening: Dilindungi dengan Helmet, Rate Limiting, dan validasi data ketat menggunakan Zod.
• Modern UI: Antarmuka bersih, responsif, dan premium menggunakan Tailwind CSS dan Lucide Icons.

• Framework: React Router 7 (Vite)
• Styling: Tailwind CSS
• Editor: TipTap Editor
• Notifications: Sonner (Toast)
• Icons: Lucide React
• Drag & Drop: @hello-pangea/dnd
• Testing: Vitest & React Testing Library

• Runtime: Node.js (Express)
• Database: PostgreSQL
• ORM: Prisma
• Real-time: Socket.io
• Validation: Zod
• Security: Helmet & Express Rate Limit
• Testing: Jest & Supertest

notion-clone/
├── backend/ # Express.js Server (Node.js)
│ ├── prisma/ # Database Schema (Prisma) & Migrations
│ ├── src/
│ │ ├── controllers/ # Logika bisnis (Auth, Note, Block)
│ │ ├── routes/ # Definisi API Endpoints
│ │ └── index.js # Entry point & Socket.io setup
│ └── api.test.js # Integration tests
│
└── frontend/ # React Application (React Router 7)
 ├── app/
 │ ├── components/ # Blocks (Text, Image, Code) & Editor UI
 │ ├── hooks/ # Custom hooks (e.g., useAutosave)
 │ ├── routes/ # Page components & Layouts
 │ └── types/ # TypeScript Interfaces
 └── ... # Unit Tests (*.test.tsx)

cd backend
docker-compose up -d

cd backend
npm install
npx prisma migrate dev --name init
npx prisma db seed
npm run dev

cd frontend
npm install
npm run dev

• Frontend: npm test (Unit Testing)
• Backend: npm test (Integration Testing)

Proyek ini dilisensikan di bawah ISC License.