Mini Notion Clone 📝

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

---

🖼️ Tampilan Aplikasi

🏠 Halaman Utama (Welcome)

✍️ Editor & Kolaborasi Real-time

🔐 Autentikasi (Login & Register)

Login Page	Register Page

---

🚀 Fitur Utama

• 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.

🛠️ Tech Stack

Frontend

• 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

Backend

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

---

📁 Struktur Proyek

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)

---

⚙️ Panduan Instalasi

1. Persiapan Database (Docker)

cd backend
docker-compose up -d

2. Setup Backend

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

3. Setup Frontend

cd frontend
npm install
npm run dev

---

🧪 Pengujian (Testing)

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

---

📄 Lisensi

Proyek ini dilisensikan di bawah ISC License.