DocuStream Frontend

Professional Document Conversion & Collaboration Platform

Live Demo | Documentation | Report Bug | Request Feature

---

📋 Table of Contents

• Overview
• Key Features
• Architecture
• Use Cases
• Tech Stack
• Getting Started
• Project Structure
• API Integration
• Component Documentation
• Deployment
• Contributing
• License

---

🎯 Overview

DocuStream Frontend is a modern, responsive web application built with React and TypeScript that provides a seamless interface for converting PDF documents to various formats (Markdown, XML, HTML, JSON). It features real-time collaboration, version control, and intelligent document editing capabilities.

What Makes DocuStream Special?

• 🚀 Lightning Fast: Built with Vite for instant hot-reload and optimized builds
• 🎨 Beautiful UI: Modern, responsive design with TailwindCSS
• 📝 Smart Editing: AI-powered document conversion with manual editing capabilities
• 👥 Collaborative: Real-time sharing and version history
• 🔒 Secure: Role-based access control with authentication
• 📱 Responsive: Works perfectly on desktop, tablet, and mobile

---

✨ Key Features

🔄 Document Conversion

• Multi-Format Support: Convert PDFs to Markdown, XML, HTML, and JSON
• AI-Powered Processing: Uses 6 specialized AI models for accurate conversion
• Real-time Preview: See conversion results instantly
• Manual Editing: Fine-tune converted documents with built-in editors

📊 Project Management

• Dashboard: Centralized view of all your conversion projects
• Project Tracking: Monitor conversion status and history
• Search & Filter: Quickly find projects by name, date, or format
• Bulk Operations: Convert multiple documents at once

🤝 Collaboration Features

• Project Sharing: Share projects with team members via email or link
• Permission Control: Set viewer or editor permissions
• Version History: Track all changes with automatic versioning
• Version Comparison: View differences between versions
• Rollback: Restore previous versions easily

✍️ Advanced Editing

• Markdown Editor:

  • Live preview with syntax highlighting
  • Mathematical equations support (KaTeX)
  • Table editing with visual interface
  • Code block support with syntax highlighting

• XML Editor:

  • Syntax highlighting and validation
  • Tree view for nested structures
  • Auto-formatting and beautification
  • Error detection and suggestions

• Visual Editor: WYSIWYG editing experience

📤 Export Options

• Multiple Formats: Export to Markdown, XML, HTML, JSON, DOCX, PDF
• Custom Styling: Apply custom templates and themes
• Batch Export: Export multiple projects simultaneously
• Download Options: Single file or ZIP archive

🎨 User Experience

• Dark/Light Mode: Automatic theme switching
• Responsive Design: Works on all devices
• Keyboard Shortcuts: Speed up your workflow
• Drag & Drop: Easy file uploads
• Progress Tracking: Real-time conversion progress

---

🏗️ Architecture

System Architecture

┌─────────────────────────────────────────────────────────────┐
│                     DocuStream Frontend                      │
│                  (React + TypeScript + Vite)                 │
└───────────────────┬─────────────────────────────────────────┘
                    │
        ┌───────────┴───────────┐
        │                       │
        ▼                       ▼
┌───────────────┐      ┌──────────────────┐
│  Presentation │      │  State Management│
│     Layer     │      │   (Context API)  │
├───────────────┤      ├──────────────────┤
│ - Pages       │      │ - AuthContext    │
│ - Components  │      │ - ProjectContext │
│ - Layouts     │      │ - ThemeContext   │
└───────────────┘      └──────────────────┘
        │
        ▼
┌─────────────────────────────────────┐
│         Business Logic Layer        │
├─────────────────────────────────────┤
│ - API Services                      │
│ - Data Transformation               │
│ - Validation Logic                  │
│ - File Processing                   │
└─────────────────────────────────────┘
        │
        ▼
┌─────────────────────────────────────┐
│         Backend API Layer           │
├─────────────────────────────────────┤
│ - PDF Processing API                │
│ - Authentication API                │
│ - Storage API                       │
│ - Sharing & Versioning API          │
└─────────────────────────────────────┘

Component Architecture

App (Root)
│
├── Router (React Router)
│   │
│   ├── Public Routes
│   │   ├── HomePage
│   │   ├── AboutPage
│   │   ├── LoginPage
│   │   ├── RegisterPage
│   │   └── SubscriptionPage
│   │
│   └── Protected Routes (RequireAuth)
│       ├── Dashboard
│       │   ├── ProjectList
│       │   ├── ProjectCard
│       │   ├── SearchBar
│       │   └── FilterOptions
│       │
│       └── ConversionWorkflow
│           ├── FileUpload
│           ├── DocumentPreview
│           ├── SimpleMarkdownEditor
│           ├── VisualMarkdownEditor
│           ├── XMLEditor
│           ├── ExportOptions
│           ├── VersionHistory
│           └── ProjectSharing
│
├── Shared Components
│   ├── Navbar
│   ├── Footer
│   ├── MarkdownPreview
│   └── ScrollAnimated
│
└── Context Providers
    ├── AuthProvider
    ├── ProjectProvider
    └── ThemeProvider

Data Flow Architecture

┌──────────┐     ┌──────────┐     ┌──────────┐     ┌──────────┐
│   User   │────▶│   View   │────▶│  Action  │────▶│   API    │
│ Interact │     │(Component)│     │ (Event)  │     │ Service  │
└──────────┘     └──────────┘     └──────────┘     └──────────┘
                        ▲                                  │
                        │                                  ▼
                        │                           ┌──────────┐
                        │                           │ Backend  │
                        │                           │   API    │
                        │                           └──────────┘
                        │                                  │
                        │                                  ▼
                 ┌──────────┐     ┌──────────┐     ┌──────────┐
                 │  Update  │◀────│  State   │◀────│ Response │
                 │   View   │     │ Update   │     │   Data   │
                 └──────────┘     └──────────┘     └──────────┘

State Management

AuthContext
├── currentUser: User | null
├── isAuthenticated: boolean
├── login(credentials)
├── logout()
└── register(userData)

ProjectContext
├── projects: Project[]
├── currentProject: Project | null
├── createProject(data)
├── updateProject(id, data)
├── deleteProject(id)
└── shareProject(id, shareData)

ThemeContext
├── theme: 'light' | 'dark'
└── toggleTheme()

---

💼 Use Cases

1. Academic Research Publishing

Scenario: A researcher needs to convert research papers from PDF to XML format for journal submission.

Flow:

1. Upload research paper PDF
2. AI processes and converts to XML
3. Review and edit using XML Editor
4. Validate against journal schema
5. Export in required format
6. Share with co-authors for review

Benefits:

• Saves hours of manual formatting
• Ensures compliance with journal standards
• Collaborative review process

---

2. Technical Documentation Team

Scenario: A software company needs to convert legacy PDF documentation to Markdown for their GitHub wiki.

Flow:

1. Bulk upload multiple PDF documents
2. Batch convert to Markdown
3. Team members edit and refine content
4. Track changes with version history
5. Export as individual files or archive
6. Publish to documentation platform

Benefits:

• Streamlines documentation migration
• Version control for collaborative editing
• Consistent formatting across documents

---

3. Legal Document Processing

Scenario: A law firm needs to digitize and edit old legal contracts.

Flow:

1. Upload scanned contract PDFs
2. OCR and convert to editable format
3. Use visual editor for amendments
4. Share with clients for review
5. Track versions for audit trail
6. Export to PDF or DOCX

Benefits:

• Makes legacy documents searchable
• Maintains legal audit trail
• Secure client collaboration

---

4. Educational Content Creation

Scenario: Teachers converting textbook chapters to interactive online content.

Flow:

1. Upload textbook PDF chapters
2. Convert to Markdown
3. Add mathematical equations with KaTeX
4. Create interactive tables and diagrams
5. Preview in web format
6. Export for LMS integration

Benefits:

• Creates accessible educational content
• Supports mathematical notation
• Easy LMS integration

---

5. Business Report Conversion

Scenario: Corporate team converting quarterly reports for web publishing.

Flow:

1. Upload business report PDF
2. Convert to HTML format
3. Customize styling and branding
4. Add interactive charts
5. Share with stakeholders
6. Publish to corporate website

Benefits:

• Professional web-ready reports
• Brand consistency
• Easy stakeholder sharing

---

6. Medical Records Digitization

Scenario: Healthcare provider digitizing patient records.

Flow:

1. Upload patient record PDFs
2. Convert to structured XML
3. Validate against HL7 standards
4. Secure sharing with authorized personnel
5. Version tracking for compliance
6. Integration with EHR systems

Benefits:

• HIPAA-compliant workflow
• Structured data for EHR
• Audit trail for compliance

---

🛠️ Tech Stack

Core Technologies

Technology	Version	Purpose
React	18.3	UI Framework
TypeScript	5.5	Type Safety
Vite	5.4	Build Tool & Dev Server
React Router	7.8	Client-side Routing

UI & Styling

Technology	Purpose
TailwindCSS	Utility-first CSS Framework
Lucide React	Icon Library
Custom CSS	Additional Styling

Document Processing

Technology	Purpose
Marked	Markdown Parser
KaTeX	Mathematical Equations
React-KaTeX	React Integration for KaTeX

Development Tools

Tool	Purpose
ESLint	Code Linting
PostCSS	CSS Processing
Autoprefixer	CSS Vendor Prefixes

---

🚀 Getting Started

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v18+ recommended)
• npm or yarn or pnpm
• Git

Installation

1. Clone the repository

   git clone https://github.com/MaskanTechnologies/pdf-xml-frontend.git
   cd pdf-xml-frontend
   

2. Install dependencies

   npm install
   # or
   yarn install
   # or
   pnpm install
   

3. Configure environment variables

   Create a .env file in the root directory:

   VITE_API_BASE_URL=http://localhost:8000
   VITE_APP_NAME=DocuStream
   VITE_APP_VERSION=1.0.0
   

4. Start development server

   npm run dev
   

   The application will be available at http://localhost:5173

Development Workflow

# Start dev server with hot reload
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Run linting
npm run lint

---

📁 Project Structure

frontend/
├── public/                      # Static assets
│   └── favicon.ico
│
├── src/
│   ├── components/             # Reusable UI components
│   │   ├── DocumentPreview.tsx      # PDF preview component
│   │   ├── ExportOptions.tsx        # Export functionality
│   │   ├── FileUpload.tsx           # Drag & drop upload
│   │   ├── Footer.tsx               # App footer
│   │   ├── MarkdownPreview.tsx      # Live Markdown preview
│   │   ├── Navbar.tsx               # Navigation bar
│   │   ├── ProjectSharing.tsx       # Sharing modal
│   │   ├── RequireAuth.tsx          # Auth guard
│   │   ├── ScrollAnimated.tsx       # Scroll animations
│   │   ├── SimpleMarkdownEditor.tsx # Markdown editor
│   │   ├── VersionHistory.tsx       # Version control UI
│   │   ├── VisualMarkdownEditor.tsx # WYSIWYG editor
│   │   └── XMLEditor.tsx            # XML editing interface
│   │
│   ├── pages/                  # Page components (routes)
│   │   ├── AboutPage.tsx            # About/features page
│   │   ├── ConversionWorkflow.tsx   # Main conversion UI
│   │   ├── Dashboard.tsx            # User dashboard
│   │   ├── HomePage.tsx             # Landing page
│   │   ├── LoginPage.tsx            # Login form
│   │   ├── RegisterPage.tsx         # Registration form
│   │   └── SubscriptionPage.tsx     # Pricing plans
│   │
│   ├── context/                # React Context providers
│   │   ├── AuthContext.tsx          # Authentication state
│   │   └── ProjectContext.tsx       # Project management
│   │
│   ├── hooks/                  # Custom React hooks
│   │   └── useAuth.ts               # Auth hook
│   │
│   ├── utils/                  # Utility functions
│   │   ├── api.ts                   # API client
│   │   ├── formatters.ts            # Data formatting
│   │   └── projectTracking.ts       # Project utilities
│   │
│   ├── styles/                 # Global styles
│   │   └── globals.css
│   │
│   ├── App.tsx                 # Root component
│   ├── main.tsx                # Application entry
│   ├── index.css               # Global CSS
│   └── vite-env.d.ts           # Vite types
│
├── .gitignore                  # Git ignore rules
├── eslint.config.js            # ESLint configuration
├── index.html                  # HTML entry point
├── package.json                # Dependencies
├── postcss.config.js           # PostCSS config
├── tailwind.config.js          # Tailwind configuration
├── tsconfig.json               # TypeScript config
├── tsconfig.app.json           # App-specific TS config
├── tsconfig.node.json          # Node-specific TS config
├── vite.config.ts              # Vite configuration
└── README.md                   # This file

---

🔌 API Integration

Backend Connection

The frontend connects to the DocuStream backend API for document processing.

Base URL: http://localhost:8000 (configurable via .env)

Key API Endpoints

Authentication

POST /api/auth/register
POST /api/auth/login
POST /api/auth/logout
GET  /api/auth/user

Document Conversion

POST /api/convert              # Single file conversion
POST /api/convert/batch        # Batch conversion
GET  /api/convert/status/:id   # Check conversion status

Project Management

GET    /api/projects           # Get all projects
POST   /api/projects           # Create project
GET    /api/projects/:id       # Get project details
PUT    /api/projects/:id       # Update project
DELETE /api/projects/:id       # Delete project

Sharing & Collaboration

POST /api/projects/:id/share   # Share project
GET  /api/projects/:id/access  # Check access
POST /api/projects/:id/revoke  # Revoke access

Version Control

GET  /api/projects/:id/versions      # Get version history
POST /api/projects/:id/versions      # Create new version
GET  /api/projects/:id/versions/:vid # Get specific version
POST /api/projects/:id/versions/:vid/restore # Restore version

API Client Configuration

// src/utils/api.ts
import axios from 'axios';

const api = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL,
  timeout: 30000,
  headers: {
    'Content-Type': 'application/json',
  },
});

// Request interceptor for auth token
api.interceptors.request.use((config) => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

export default api;

---

📚 Component Documentation

Core Components

1. ConversionWorkflow

Main conversion interface with step-by-step workflow.

Props: None (uses route params)

Features:

• File upload with drag & drop
• Format selection
• Real-time conversion progress
• Multi-tab editing interface
• Export options
• Version control
• Sharing capabilities

Usage:

<Route path="/workflow/:projectId" element={<ConversionWorkflow />} />

---

2. Dashboard

User dashboard for managing all projects.

Features:

• Project list with cards
• Search and filter
• Sort by date, name, format
• Quick actions (view, edit, delete)
• Project statistics

State Management:

interface DashboardState {
  projects: Project[];
  searchQuery: string;
  filterFormat: string;
  sortBy: 'date' | 'name';
}

---

3. SimpleMarkdownEditor

Advanced Markdown editing component.

Props:

interface MarkdownEditorProps {
  value: string;
  onChange: (value: string) => void;
  readOnly?: boolean;
}

Features:

• Syntax highlighting
• Live preview
• KaTeX math support
• Table editing
• Code blocks
• Image insertion
• Keyboard shortcuts

---

4. XMLEditor

Specialized XML editing interface.

Props:

interface XMLEditorProps {
  value: string;
  onChange: (value: string) => void;
  schema?: string;
}

Features:

• Syntax highlighting
• Tree view
• Validation
• Auto-formatting
• Error detection
• Schema validation

---

5. VersionHistory

Version control interface.

Props:

interface VersionHistoryProps {
  projectId: string;
  onRestore: (versionId: string) => void;
}

Features:

• Timeline view
• Version comparison
• Diff viewer
• Restore capability
• Version metadata

---

6. ProjectSharing

Collaboration and sharing interface.

Props:

interface ProjectSharingProps {
  projectId: string;
  isOpen: boolean;
  onClose: () => void;
}

Features:

• Share via email
• Share via link
• Permission control (view/edit)
• Manage existing shares
• Revoke access

---

🎨 Styling Guide

Tailwind Configuration

The project uses a custom Tailwind configuration with brand colors:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#f0f9ff',
          100: '#e0f2fe',
          500: '#0ea5e9',
          600: '#0284c7',
          700: '#0369a1',
        },
        // ... more colors
      },
    },
  },
};

Design Tokens

/* Primary Colors */
--primary: #0ea5e9;
--primary-dark: #0369a1;

/* Secondary Colors */
--secondary: #64748b;

/* Status Colors */
--success: #10b981;
--warning: #f59e0b;
--error: #ef4444;

/* Typography */
--font-sans: 'Inter', sans-serif;
--font-mono: 'Fira Code', monospace;

---

🚢 Deployment

Build for Production

# Build the application
npm run build

# Output will be in the 'dist' directory

Deployment Options

Option 1: Vercel

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel

Option 2: Netlify

# Build command
npm run build

# Publish directory
dist

Option 3: Docker

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
CMD ["npm", "run", "preview"]

Environment Variables for Production

VITE_API_BASE_URL=https://api.docustream.com
VITE_APP_NAME=DocuStream
VITE_APP_VERSION=1.0.0
VITE_ENABLE_ANALYTICS=true

---

🧪 Testing

Unit Tests

npm run test

E2E Tests

npm run test:e2e

Coverage

npm run test:coverage

---

🤝 Contributing

We welcome contributions! Please follow these steps:

1. Fork the repository
2. Create a feature branch

   git checkout -b feature/amazing-feature
   

3. Commit your changes

   git commit -m 'Add amazing feature'
   

4. Push to the branch

   git push origin feature/amazing-feature
   

5. Open a Pull Request

Coding Standards

• Use TypeScript for all new components
• Follow React best practices
• Write meaningful commit messages
• Add comments for complex logic
• Update documentation for new features

---

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

👥 Team

Maskan Technologies

• Organization: Maskan Technologies
• Frontend Repository: pdf-xml-frontend
• Backend Repository: pdf-xml-backend

---

📞 Support

For issues, questions, or contributions:

• GitHub Issues: Create an issue
• Email: support@maskantechnologies.com
• Documentation: Full Documentation

---

🗺️ Roadmap

Q1 2025

• Mobile app (React Native)
• Offline mode support
• Advanced AI suggestions
• Plugin system

Q2 2025

• Real-time collaboration
• Voice-to-text integration
• Advanced analytics
• API webhooks

---

🙏 Acknowledgments

• React Team - For the amazing framework
• Vite Team - For the blazing fast build tool
• TailwindCSS - For the utility-first CSS framework
• Lucide - For the beautiful icons
• Open Source Community - For inspiration and support

---

Made with ❤️ by Maskan Technologies

⬆ Back to Top