System Requirements Document (SRD) for Wild-Notes

1. Introduction

Wild-Notes is a streamlined web application designed to empower users to create, manage, and export HTML-based notes with ease. The application converts notes into styled PDFs and integrates reusable AI prompts for enhanced productivity. This document outlines the system requirements for Wild-Notes, ensuring a clear and actionable roadmap for development.

2. System Overview

Wild-Notes is a single-page application (SPA) optimized for simplicity, speed, and offline functionality. It provides a distraction-free environment for users to write, edit, and export notes while leveraging AI to generate summaries, flashcards, and Q&A content. The system is designed to work seamlessly across devices, with a focus on minimal UI and smooth micro-interactions.

Key features include:

• A rich HTML editor with live preview and auto-save capabilities.
• PDF export functionality with clean print styling.
• A prompt manager for saving, editing, and categorizing reusable AI prompts.
• AI integration using predefined templates for quick and efficient content generation.

Wild-Notes is tailored for users in India (IN), with locale-specific considerations such as timezone (IST) and offline-first design to accommodate varying internet reliability.

3. Functional Requirements

• As a User, I should be able to write and edit notes in an HTML editor with a live preview toggle.
• As a User, I should be able to auto-save my notes to local storage.
• As a User, I should be able to export my notes as a styled PDF with A4 size, margins, and proper page breaks.
• As a User, I should be able to manage prompts by saving, editing, and deleting them.
• As a User, I should be able to categorize prompts into predefined categories like Summary, Flashcards, and Explain Like 5.
• As a User, I should be able to copy a prompt with one click.
• As a User, I should be able to use predefined AI prompts to generate summaries, flashcards, and Q&A content from my notes.
• As a User, I should be able to insert AI-generated content directly into the editor.

4. User Personas

1. Regular User

• Description: A typical user who writes and manages notes for personal or professional purposes.
• Goals: Create, edit, and export notes; use AI to enhance content; manage reusable prompts.
• Pain Points: Complexity in note-taking apps, lack of offline functionality, and difficulty in generating structured content.

2. Student

• Description: A student who uses the app for academic purposes, such as summarizing lectures or creating flashcards.
• Goals: Generate summaries and flashcards quickly; export notes for printing or sharing.
• Pain Points: Time constraints, need for organized study materials, and limited access to advanced tools.

5. Visuals Colors and Theme

The Wild-Notes color palette is designed to evoke a sense of clarity, focus, and creativity. The colors are unique to the project and align with its clean and minimalistic aesthetic.

• Background: #F9F9F6 (soft off-white for a distraction-free workspace)
• Surface: #FFFFFF (pure white for editor and panels)
• Text: #333333 (deep charcoal for high readability)
• Accent: #FF6F61 (vibrant coral for buttons and highlights)
• Muted: #B0BEC5 (soft gray-blue for secondary elements)

6. Signature Design Concept

Interactive Origami Landing Page

The Wild-Notes homepage will feature an interactive origami animation that unfolds as users scroll. The origami starts as a simple folded paper in the center of the screen. As the user scrolls down, the paper dynamically unfolds into different shapes, each representing a core feature of the app (e.g., a notebook for the editor, a printer for PDF export, a lightbulb for AI integration).

• Animations: Smooth, physics-based unfolding transitions with subtle shadows and depth.
• Color Shifts: The origami changes colors as it unfolds, transitioning through the Wild-Notes palette.
• Micro-interactions: Hovering over the origami pauses the animation and displays a tooltip explaining the feature.
• Final State: At the bottom of the page, the origami transforms into the Wild-Notes logo, signaling the end of the introduction.

This design will captivate users and create a memorable first impression, emphasizing the app's creativity and simplicity.

7. Non-Functional Requirements

• Performance: The app should load within 2 seconds on a standard broadband connection.
• Offline Capability: Core features (editor, prompt manager, PDF export) must work offline.
• Accessibility: Ensure WCAG 2.1 compliance for users with disabilities.
• Security: Local storage data must be sandboxed to prevent unauthorized access.
• Scalability: The system should support future upgrades, such as cloud sync and multi-file notes.

8. Tech Stack

Frontend

• React for Web

Backend

• None (local storage and client-side processing)

Database

• LocalStorage for prompt and note management

AI Models

• Pollination AI API for text generation

Tools

• html2pdf.js for PDF export

Local Orchestration

• Docker (for development environment)

9. Assumptions and Constraints

• Assumptions:

  • Users will primarily access the app via desktop browsers.
  • Internet connectivity is required only for AI features.
  • Users prefer predefined prompts for faster workflows.

• Constraints:

  • No backend server; all data is stored locally.
  • Limited to free AI APIs to avoid additional costs.

10. Glossary

• HTML Editor: A text editor that allows users to write and format notes using HTML.
• PDF Export: The process of converting HTML notes into a PDF file.
• Prompt Manager: A feature that allows users to save and organize reusable AI prompts.
• AI Integration: The use of artificial intelligence to generate summaries, flashcards, and Q&A content.
• SPA (Single Page Application): A web application that loads a single HTML page and dynamically updates content without refreshing the page.