Mercy-Link System Requirements Document

Introduction

The Mercy-Link project aims to develop a core Minimum Viable Product (MVP) for a web-based label and sticker printing tool. This document outlines the system requirements for Phase 1, focusing on the foundational elements necessary to build a functional and user-friendly tool.

System Overview

The Mercy-Link project is designed to facilitate the creation and printing of labels and stickers. The system will allow users to upload Excel/CSV files, parse the data, generate labels using a basic MRP template, preview the labels, and download them as PDFs. The project will be structured as a full-stack monorepo, with separate frontend and backend sub-projects.

Functional Requirements

• As a User, I should be able to upload Excel/CSV files containing product data.
• As a User, I should be able to view parsed data from uploaded files.
• As a User, I should be able to select a basic MRP label template.
• As a User, I should be able to preview generated labels.
• As a User, I should be able to download labels as a PDF.
• As a Developer, I should be able to initialize the frontend with Vite, React, and TypeScript.
• As a Developer, I should be able to set up TailwindCSS for UI styling.
• As a Developer, I should be able to implement xlsx for file parsing.
• As a Developer, I should be able to implement jspdf and html2canvas for PDF generation.
• As a Developer, I should be able to implement JsBarcode for barcode generation.
• As a Developer, I should be able to initialize the backend with Node.js and Express.
• As a Developer, I should be able to set up basic API structure with CORS and rate limiting.

User Personas

• User: Individuals who need to create and print labels for products.
• Developer: Team members responsible for building and maintaining the system.

Visuals Colors and Theme

• primary: #1A73E8 (a vibrant blue for brand identity)
• primary_light: #E8F0FE (a lighter blue for hover states)
• secondary: #FF7043 (a warm coral for emphasis and links)
• accent: #FFD600 (a bright yellow for call-to-action buttons)
• highlight: #FFAB40 (a soft orange for notifications and active states)
• bg: #F5F5F5 (a light grey for the page background)
• surface: rgba(255, 255, 255, 0.9) (a semi-transparent white for cards/panels)
• text: #212121 (a dark grey for primary text)
• text_muted: #757575 (a medium grey for secondary text)
• border: rgba(0, 0, 0, 0.1) (a subtle black for borders)

Signature Design Concept

The Mercy-Link homepage will feature an interactive "Label Factory" concept. Users will enter a virtual factory floor where each section of the page represents a different stage of the label creation process. As users scroll, they will see animated conveyor belts moving labels through various stages: data upload, template selection, preview, and download. Each stage will have interactive elements, such as clickable machines that reveal more information or options. The design will use framer-motion for smooth animations and transitions, creating an engaging and memorable experience.

Interaction Model & Motion Direction

The landing page will employ a "parallax" interaction model. Layers of the factory will move at different speeds as users scroll, creating a sense of depth and immersion. Key sections will feature animated reveals and hover transitions to guide users through the label creation process. Internal pages, such as dashboards and settings, will use a "static" model for clarity and ease of use.

Non-Functional Requirements

• The system should support concurrent usage by up to 100 users.
• The system should ensure data security and privacy.
• The system should be responsive and accessible on various devices.
• The system should have a user-friendly interface.

Tech Stack

• Frontend: React with Vite and TypeScript, TailwindCSS for styling
• Backend: Node.js with Express and TypeScript
• Database: LocalStorage for MVP phase
• Libraries: xlsx, jspdf, html2canvas, JsBarcode, framer-motion

Assumptions and Constraints

• The MVP will not require user authentication.
• LocalStorage will be used for data persistence in the MVP phase.
• DIY printing is sufficient for the initial release.
• The system will primarily target users in India, considering local regulatory requirements.

Glossary

• MVP: Minimum Viable Product
• MRP: Maximum Retail Price
• PDF: Portable Document Format
• CSV: Comma-Separated Values
• UI: User Interface
• API: Application Programming Interface