SyncNote 📝

Collaborate simply. Create freely.

SyncNote is a modern, privacy-focused document editor built with React. It mimics the experience of a professional word processor (like Google Docs) but operates entirely in your browser using Local Storage.

It features a unique Simulated Live Collaboration engine—open the app in two different tabs, and watch your edits sync instantly between them without a backend server!

📸 Screenshots

Landing Page	Dashboard
Modern landing page	Clean workspace overview

Editor Interface	Sidebar Navigation
A4 paper layout with auto-growth	Easy document management

✨ Key Features

• 📄 A4 Paper Interface: A visual editor that looks like real paper and expands automatically as you write.
• ⚡ Live Tab Sync: Uses the Browser Storage API to sync changes across multiple tabs instantly.
• 🔒 Privacy First: No database required. Your data never leaves your device.
• ✍️ Rich Text Tools: Full toolbar support for Bold, Italic, Headings, Lists, Blockquotes, and Page Breaks.
• 📂 Document Management: Create, delete (with safety checks), and switch between documents via a responsive sidebar.
• 📥 Import System: Supports importing .txt, .md, and .json files directly into the editor.
• 📊 Live Stats: Real-time tracking of words and characters in the footer.

🛠️ Tech Stack

• Frontend: React.js + Vite
• Styling: CSS3 (Custom "Slate & Indigo" Theme)
• Icons: Lucide React
• State Management: Custom Hooks + LocalStorage API
• Utilities: uuid (Unique IDs), date-fns (Time formatting)

🚀 Getting Started

Follow these steps to run the project locally on your machine.

Prerequisites

Ensure you have Node.js installed.

Installation

1. Clone the repository

   git clone [https://github.com/CodeByAbhishek404/SyncNote.git](https://github.com/CodeByAbhishek404/SyncNote.git)
   

2. Navigate to the project directory cd SyncNote
3. Install dependencies npm install
4. Start the development server npm run dev
5. Open your browser and go to http://localhost:5173

🤝 Contributing This is a portfolio project, but contributions are welcome!

Fork the Project

Create your Feature Branch (git checkout -b feature/AmazingFeature)

Commit your Changes (git commit -m 'Add some AmazingFeature')

Push to the Branch (git push origin feature/AmazingFeature)

Open a Pull Request

👤 Author Abhishek

GitHub: @CodeByAbhishek404

Built with ❤️ in 2026.