Transcript Processor - Frontend

A modern, responsive single-page web application for uploading, processing, and visualizing transcripts. Built with Next.js, React, TypeScript, and Tailwind CSS.

Features

Input Methods

• File Upload: Drag-and-drop or click to upload .txt transcript files
• Text Paste: Direct paste of transcript text into a text area
• Read-only Preview: Preview uploaded files before processing
• Smart Input States: Automatic switching between upload and paste modes

Output Visualization (Tabs)

1. Report: Markdown-rendered analysis report with formatted headings, lists, and code blocks
2. JSON Output: Interactive JSON viewer with:
   • Copy to clipboard functionality
   • Download as JSON file
   • Syntax highlighting
3. Steps: Accordion-style list of extracted process steps with:
   • Expand/collapse individual steps
   • Expand/collapse all controls
   • Numbered step indicators
4. BPMN Viewer: Interactive BPMN diagram visualization with:
   • Zoom in/out/reset controls
   • Pan and navigate the diagram
   • Read-only view

User Experience

• Loading states with spinner animations
• Error handling and user-friendly error messages
• Disabled states for invalid inputs
• Responsive design for mobile and desktop
• Clean, modern UI with Tailwind CSS

Tech Stack

• Framework: Next.js 15 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: Custom React components
• Markdown Rendering: react-markdown
• BPMN Visualization: bpmn-js
• Icons: lucide-react

Project Structure

frontend/
├── app/
│   ├── api/
│   │   └── process/
│   │       └── route.ts          # API route for backend communication
│   ├── globals.css               # Global styles and Tailwind imports
│   ├── layout.tsx                # Root layout component
│   └── page.tsx                  # Main page component
├── components/
│   ├── tabs/
│   │   ├── BpmnTab.tsx          # BPMN diagram viewer
│   │   ├── JsonTab.tsx          # JSON output viewer
│   │   ├── ReportTab.tsx        # Markdown report renderer
│   │   └── StepsTab.tsx         # Steps accordion view
│   ├── ResultsTabs.tsx          # Tab navigation component
│   └── TranscriptInput.tsx      # File upload and text input component
├── .env.local                    # Local environment variables
├── .env.example                  # Environment variables template
├── package.json                  # Dependencies and scripts
├── tsconfig.json                 # TypeScript configuration
├── tailwind.config.js            # Tailwind CSS configuration
├── next.config.js                # Next.js configuration
└── README.md                     # This file

Prerequisites

• Node.js 18.x or higher
• npm, yarn, or pnpm package manager
• Backend API service running (see Backend Configuration)

Installation

1. Navigate to the frontend directory:

   cd frontend

2. Install dependencies:

   npm install
   # or
   yarn install
   # or
   pnpm install

3. Configure environment variables:

   • Copy .env.example to .env.local
   • Update BACKEND_URL to point to your backend service:

   BACKEND_URL=http://localhost:8000

Running Locally

1. Development mode (with hot reload):

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev

2. Open your browser: Navigate to http://localhost:3000

3. Production build:

   # Build the application
   npm run build
   
   # Start the production server
   npm start

Backend Configuration

The frontend communicates with a backend API service. Configure the backend URL in .env.local:

BACKEND_URL=http://localhost:8000

Expected Backend API Endpoint

POST /api/process

Request Body:

{
  "transcript": "Your transcript text here..."
}

Response Body:

{
  "report": "# Markdown report content...",
  "json": {
    "key": "Full JSON response object"
  },
  "steps": [
    "Step 1 description",
    "Step 2 description",
    "..."
  ],
  "bpmn": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>..."
}

Usage Guide

1. Input Transcript

• Option A: Click the upload area and select a .txt file
• Option B: Paste transcript text directly into the text area

2. Process

• Click "Process Transcript" button (enabled when input is provided)
• Wait for processing (loading spinner will appear)

3. View Results

Navigate through tabs to view different outputs:

• Report: Structured analysis in Markdown format
• JSON Output: Copy or download the full JSON response
• Steps: View individual process steps in an accordion
• BPMN Viewer: Visualize the process flow diagram

4. Actions

• Copy JSON: Click to copy JSON output to clipboard
• Download JSON: Save JSON output as a file
• Zoom Controls: Adjust BPMN diagram view
• Expand/Collapse: Toggle step details in Steps tab

Development

Code Style

• TypeScript for type safety
• Functional React components with hooks
• Tailwind CSS for styling
• Component-based architecture

Adding New Features

1. Create new components in /components
2. Add new tabs in /components/tabs
3. Update type definitions in relevant files
4. Follow existing patterns for consistency

Error Handling

• Network errors are caught and displayed to users
• Invalid inputs are prevented at the UI level
• Backend errors are propagated with user-friendly messages

Troubleshooting

Common Issues

1. Port 3000 already in use:

   # Use a different port
   PORT=3001 npm run dev

2. Backend connection failed:

   • Verify backend is running
   • Check BACKEND_URL in .env.local
   • Ensure CORS is enabled on backend

3. BPMN diagram not loading:

   • Verify BPMN XML format is correct
   • Check browser console for errors
   • Ensure bpmn-js is properly installed

4. File upload not working:

   • Verify file is .txt format
   • Check file size limits (if any)
   • Ensure read permissions on file

Building for Production

1. Build the application:

   npm run build

2. Test production build locally:

   npm start

3. Deploy:

   • Deploy to Vercel, Netlify, or any Node.js hosting
   • Update BACKEND_URL environment variable for production
   • Ensure backend CORS settings allow your frontend domain

API Integration Details

The application uses Next.js API routes to proxy requests to the backend:

• Client → Next.js API Route (/app/api/process/route.ts) → Backend Service
• This approach keeps backend URL configuration server-side
• No API keys or secrets are exposed to the client
• Supports custom error handling and response transformation

Performance Considerations

• BPMN viewer is dynamically imported to reduce initial bundle size
• Large JSON outputs are rendered efficiently with virtualization
• File reading happens client-side to reduce server load
• Images and assets are optimized by Next.js automatically

Browser Support

• Modern browsers (Chrome, Firefox, Safari, Edge)
• ES2017+ JavaScript support required
• CSS Grid and Flexbox support required

License

This project is part of the Transcript Processor system.

Support

For issues or questions:

1. Check this documentation
2. Review example transcripts and responses
3. Verify backend API is functioning correctly
4. Check browser console for errors

---

Built with ❤️ using Next.js and React