Skip to content

NOTION_CLONE.md

Latest commit

 

History

History
134 lines (97 loc) · 3.22 KB

NOTION_CLONE.md

File metadata and controls

134 lines (97 loc) · 3.22 KB
Raw

Notion Clone - Electron App

A fully functional Notion-like note-taking application built with Electron, React, and TypeScript.

Features

✅ Block-Based Editor

  • Multiple block types: Headings (H1, H2, H3), Paragraphs, Bullet Lists, Numbered Lists, Code blocks, Quotes
  • Markdown shortcuts support (type #, ##, ###, -, 1., ```, > at the start of a line)
  • Keyboard shortcuts:
    • Enter - Create new block
    • Backspace on empty block - Delete block
    • Ctrl+Up/Down - Move block up/down

✅ Sidebar Navigation

  • Create and manage multiple pages
  • Search functionality to find pages quickly
  • Page metadata (last updated date)
  • Delete pages with confirmation

✅ Data Persistence

  • All pages are automatically saved
  • Data persists between app restarts

✅ Clean UI

  • Notion-inspired design with clean aesthetics
  • Responsive layout
  • Smooth animations and transitions

Getting Started

Development

# Install dependencies
npm install

# Start the app in development mode
npm run dev

# Format code
npm run format

# Run linter
npm run lint

Building

# Build for production
npm run build

# Build for Windows
npm run build:win

# Build for macOS
npm run build:mac

# Build for Linux
npm run build:linux

Project Structure

src/
├── main/                      # Electron main process
│   ├── index.ts              # Main process entry point
│   └── types.ts              # Shared types for main process
├── preload/                   # Electron preload scripts
│   ├── index.ts              # Preload script
│   └── index.d.ts            # Type definitions
└── renderer/                  # React frontend
    └── src/
        ├── App.tsx           # Main app component
        ├── types/            # TypeScript types
        ├── components/       # React components
        │   ├── BlockEditor.tsx    # Individual block editor
        │   ├── Editor.tsx         # Main editor component
        │   └── Sidebar.tsx        # Sidebar navigation
        └── assets/
            └── notion.css    # Notion-inspired styles

Technologies Used

  • Electron - Desktop app framework
  • React 19 - UI framework
  • TypeScript - Type safety
  • Vite - Build tool
  • Lucide React - Icon library
  • UUID - Unique ID generation

Architecture

Data Flow

  1. User interacts with the UI (React components)
  2. React components call window.api methods (exposed via preload script)
  3. IPC messages are sent to the main process
  4. Main process handles data storage and returns results
  5. UI updates with new data

Storage

The app uses an in-memory storage system that persists data during the session. For production use, you can integrate:

  • electron-store for local file-based storage
  • SQLite for database storage
  • Cloud sync services

Future Enhancements

  • Rich text formatting (bold, italic, underline)
  • Image and file uploads
  • Nested pages and folders
  • Page templates
  • Export to Markdown/PDF
  • Dark mode
  • Collaboration features
  • Cloud sync

License

MIT

Credits

Created with ❤️ using Electron + React + TypeScript