System Requirements Document for indigo-real

1. Introduction

The indigo-real project aims to develop a real-time collaborative notepad web application. This application is designed for users who need a distraction-free, real-time writing tool that supports basic text formatting and collaboration across devices. The target audience includes individuals and teams requiring a platform for seamless note-taking and sharing.

2. System Overview

The indigo-real application provides a rich text editor for writing and formatting notes, with real-time synchronization across devices. Users can share notes using unique codes or links, allowing others to view or edit the notes in real time. The application is designed to be responsive, supporting both desktop and mobile browsers, and ensures a minimal and distraction-free user interface.

2a. Product Interpretation and Delivery Boundary

The application is delivered as a web-based platform accessible via a browser. It requires authentication for note creation and sharing but allows anonymous access for viewing and editing shared notes. The application uses WebSockets for real-time collaboration and stores notes in a database to ensure persistence across sessions. The current scope includes all core functionalities and constraints outlined in the authoritative user requirement thread, with optional features considered for future development.

2b. Source Content Inventory

Not applicable as no explicit content_source directive was provided.

2c. Page Content and Component Coverage

Landing

• Purpose: Introduce the collaborative notepad, its features, and usage.
• Components:
  • Introduction to the app's features and benefits.
  • Instructions on how to create and share notes.
  • Access to the "Note Workspace" for authenticated users.
  • Responsive design elements ensuring accessibility on all devices.

Shared Note

• Purpose: Allow users to view or edit a shared note in real time.
• Components:
  • Real-time text editor with basic formatting options (bold, italic, underline, bullet points, headings).
  • Indicator showing the number of active viewers/editors.
  • Dark/light mode toggle.
  • Option to switch between view-only and editable modes based on permissions.

Note Workspace

• Purpose: Provide a workspace for creating and managing notes.
• Components:
  • Rich text editor for note creation and formatting.
  • Options to generate and copy shareable codes/links.
  • Settings to configure note access (view-only or editable).
  • Auto-save functionality ensuring notes are saved automatically.

3. Functional Requirements

• As a Note creator, I should be able to create a new note and receive a unique shareable code or link. (explicit)
• As a Note creator, I should be able to set the note's access level to view-only or editable before sharing. (required_inference)
• As a Note collaborator, I should be able to use a shareable code or link to access and edit a note in real time, if permitted. (explicit)
• As a Note viewer, I should be able to use a shareable code or link to view a note in real time without editing permissions. (explicit)
• As a user, I should see real-time updates across devices without needing to refresh the page. (explicit)
• As a user, I should experience fast load times and a distraction-free interface. (explicit)
• As a user, I should be able to toggle between dark and light modes for better readability. (explicit)
• As a user, I should see an indicator of how many people are currently viewing or editing the note. (explicit)

4. User Personas

• Note creator: Responsible for creating notes, setting access permissions, and sharing notes with others.
• Note collaborator: Uses shared codes or links to access and edit notes in real time, subject to permissions.
• Note viewer: Accesses notes in view-only mode using shared codes or links.

5. Core User Flows

Note Creation and Sharing

1. Note creator logs into the application.
2. Creates a new note in the "Note Workspace."
3. Configures the note's access level (view-only or editable).
4. Receives a unique shareable code/link.
5. Shares the code/link with collaborators.

Real-Time Collaboration

1. Note collaborator receives the shareable code/link.
2. Opens the "Shared Note" page using the code/link.
3. Edits the note in real time if permissions allow.
4. Changes are synchronized across all connected devices.

Viewing a Note

1. Note viewer receives the shareable code/link.
2. Opens the "Shared Note" page using the code/link.
3. Views the note in real time without editing permissions.

6. Visuals Colors and Theme

• Muse: Erik Spiekermann
• Palette (light mode):
  • Background: #F6F3EE
  • Surface: #FFFFFF
  • Text: #333333
  • Primary: #FF6F00
  • Accent: #00BCD4
  • Muted: #B0BEC5
• Typography:
  • Headings: Fira Sans, Medium weights
  • Body: Source Sans
  • Scale: 1.333 modular (48/36/24/18/16)
• Shape language: Rounded rectangles for buttons and inputs
• Layout: Clear columns, visible grid lines, generous margins
• Motion: Short, purposeful transitions
• Motion tempo: Restrained
• Hero direction: Split-screen hero with a real-time notepad demo

7. Signature Design Concept

The landing page features a split-screen hero showcasing a real-time collaborative notepad demo on one side and edited text flowing into the white surface on the other. This design emphasizes the application's core functionality and user-friendly interface, using the primary and accent colors to highlight interactive elements.

8. Interaction Model & Motion Direction

• Interaction Model: Static
• Motion Tempo: Restrained
• Hero Dimensionality: Flat
• Landing Hero Motion Brief: The hero section features a split-screen with a real-time collaborative notepad demo. The transition between the demo and the text is smooth and functional, ensuring instant feedback without unnecessary decoration.

9. Non-Functional Requirements

• The application must support responsive design for both desktop and mobile browsers. (explicit)
• Real-time synchronization must be achieved using WebSockets or an equivalent service. (explicit)
• The application must handle large blocks of plain text without lag. (explicit)
• The user interface should load quickly and remain minimal and distraction-free. (explicit)

10. Tech Stack

• Frontend: React
• Backend: Python/FastAPI
• Real-time Sync: WebSockets
• Database: PostgreSQL
• Deployment: Docker/docker-compose

11. Assumptions and Constraints

• The application requires authentication for note creation and sharing.
• Shared notes can be accessed anonymously using a shareable code/link.
• The application must maintain a distraction-free writing experience.

12. Glossary

• Note creator: A user who creates and shares notes.
• Note collaborator: A user who edits shared notes in real time.
• Note viewer: A user who views shared notes without editing permissions.
• WebSockets: A protocol for real-time communication between client and server.
• Responsive design: A design approach that ensures the application works on various devices and screen sizes.