Brainly

A another brain for daily use.

Overview

Brainly is a personal knowledge management and document editor application. It allows users to create, edit, and share documents with a clean Notion-like interface. Users can manage their documents, share them publicly, and work with content blocks like headers, paragraphs, lists, quotes, code snippets, and embeds.

Features

• Create, edit, and delete documents
• Share and unshare documents via unique links
• Notion-style editor with support for:
  • Headers
  • Paragraphs
  • Lists
  • Quotes
  • Code blocks
  • Embeds
• Light and dark theme support
• Auto-save and auto-resize code blocks
• User authentication with signup, login, and token management

Editor.js Usage

Brainly uses Editor.js as the core editor for documents. The following points describe its usage and capabilities:

• Modular block-based editor: Content is divided into blocks (e.g., paragraph, header, list, code) which are independently editable.
• Supported Blocks:
  • Header – For titles and headings (H1, H2, H3)
  • Paragraph – Rich-text content with inline formatting
  • List – Ordered and unordered lists
  • Quote – Blockquotes with author/caption
  • Code – Code blocks with syntax-friendly textarea
  • Embed – Embed external content (YouTube, Tweets, etc.)
• Auto-save & update: Document content is saved to the backend automatically when navigating away or closing the editor.
• Theme-aware: Editor blocks adapt to light or dark theme.
• Auto-resizing: Code block textareas automatically adjust height to fit content.
• Toolbar & Inline formatting: Inline toolbar for text formatting (bold, italic, links) and block-level toolbar for block controls.
• Extensible: Additional Editor.js plugins can be added if required for new block types.

Tech Stack

• Frontend: React, Editor.js, Tailwind CSS
• Backend: Node.js, Express
• Database: MongoDB
• Authentication: JWT (JSON Web Tokens)
• Icons: Lucide React
• Notifications: react-hot-toast

Getting Started

Prerequisites

• Node.js
• MongoDB
• npm or yarn

Installation

1. Clone the repository:

git clone https://github.com/devbharu/Brainly.git
cd Brainly

2 . Install dependencies:

   cd backend
   npm install
   cd ../frontend
   npm install

3 . Set up environment variables in backend/.env:

  MONGO_URI=<your_mongo_connection_string>
  JWT_SECRET=<your_jwt_secret>
  PORT=3008

4 . Run the backend and frontend:

    # Backend
    cd backend
    npm run dev
    
    # Frontend
    cd frontend
    npm start

The frontend should now be running at http://localhost:3000 and the backend at http://localhost:3008.

API Endpoints

POST /api/users/register - Register a new user

POST /api/users/login - Login and receive JWT token

GET /api/docs - Fetch all documents for logged-in user

POST /api/docs/addDoc - Add a new document

PUT /api/docs/updateDoc/:id - Update a document

DELETE /api/docs/deleteDoc/:id - Delete a document

POST /api/docs/share/:id - Share or unshare a document

GET /api/docs/shared/:shareId - Fetch a shared document