Mefik Dashboard

A modern web application for the Mefik cross-lingual document processing platform. This dashboard provides a complete user experience from marketing landing page to authenticated document management and analytics.

📦 Repository

• Frontend Dashboard: https://github.com/i-sanjay-cs/mefik-dashboard
• Backend API: https://github.com/i-sanjay-cs/mefik-backend

Features

🌐 Public Landing Page

• Professional marketing website
• Feature showcase and benefits
• 50+ supported languages display
• Call-to-action for user registration

🔐 Authentication

• User login and signup forms
• JWT token-based authentication
• Secure session management
• Automatic routing based on auth status

🏠 Smart Routing

• Public landing page for unauthenticated users
• Automatic redirect to dashboard for authenticated users
• Protected routes with auth guards

📊 Dashboard Overview

• Real-time system statistics
• Processing trends visualization
• Language distribution charts
• Recent activity monitoring

📄 Document Management

• Document listing with search and filters
• File upload with drag-and-drop support
• Processing status tracking
• Detailed document analysis results
• Grammatical analysis visualization
• Cross-lingual translation results

📈 Analytics

• Processing trends and metrics
• Language distribution insights
• System health monitoring
• Performance analytics

Tech Stack

• Framework: Next.js 15 with App Router
• Language: TypeScript
• Styling: Tailwind CSS
• Charts: Recharts
• Forms: React Hook Form with Zod validation
• Icons: Heroicons
• HTTP Client: Axios
• File Upload: AWS S3 integration

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn
• Mefik backend running (see backend setup)

Installation

1. Clone the repository:

git clone https://github.com/i-sanjay-cs/mefik-dashboard.git
cd mefik-dashboard

2. Install dependencies:

npm install

3. Configure environment variables:

cp .env.local.example .env.local

Edit .env.local:

NEXT_PUBLIC_API_URL=http://localhost:8000

4. Start the development server:

npm run dev

5. Open http://localhost:3000 in your browser.

Project Structure

src/
├── app/                    # Next.js App Router pages
│   ├── landing/           # Public marketing landing page
│   ├── auth/              # Authentication page
│   ├── dashboard/         # Main dashboard (authenticated)
│   ├── documents/         # Document management
│   │   └── [id]/         # Individual document details
│   ├── analytics/         # Analytics dashboard
│   ├── layout.tsx        # Root layout
│   └── page.tsx          # Root redirect logic
├── components/            # Reusable components
│   ├── auth/             # Authentication forms
│   ├── dashboard/        # Dashboard-specific components
│   ├── documents/        # Document management components
│   ├── layout/           # Layout components (Header, Sidebar)
│   └── ui/               # UI components (Button, Card, Input, Badge)
├── contexts/             # React contexts
│   └── AuthContext.tsx  # Authentication context
├── lib/                  # Utilities and configurations
│   ├── api.ts           # API client
│   ├── s3-upload.ts     # S3 file upload service
│   └── utils.ts         # Utility functions
└── types/               # TypeScript type definitions
    └── index.ts         # Shared types

User Flow

1. Landing Page (/landing) - Public marketing site showcasing Mefik
2. Authentication (/auth) - Login/signup with form validation
3. Dashboard (/dashboard) - Overview with stats and charts
4. Documents (/documents) - Upload and manage documents
5. Document Details (/documents/[id]) - View processing results and analysis
6. Analytics (/analytics) - Detailed system insights

API Integration

The dashboard integrates with the Mefik backend API:

Authentication Endpoints

• POST /auth/login - User login
• POST /auth/signup - User registration

Document Endpoints

• GET /documents/get-all-documents - List user documents
• GET /documents/get-document/{id} - Get document status
• GET /documents/get-document-details/{id} - Get document with analysis results
• POST /documents/create-entry - Create new document entry
• GET /documents/supported-languages - Get supported languages

Upload Endpoints

• POST /upload/presigned-url - Get S3 presigned URL for file upload

Analytics Endpoints

• GET /analytics/stats - Dashboard statistics
• GET /analytics/dashboard - Analytics data

Features in Detail

Landing Page

• Hero Section: Compelling value proposition with gradient design
• Features: Three main feature cards (Document Processing, Grammar Analysis, Translation)
• How It Works: 4-step process visualization
• Language Support: Grid of 50+ supported languages
• Professional Design: Modern UI with hover effects and animations

Document Management

• Upload Interface: Drag-and-drop file upload with S3 integration
• Language Selection: 60+ languages organized in categories
• Status Tracking: Real-time processing status updates
• Results Visualization:
  • Tabbed interface (Overview, Grammar Analysis, Translation)
  • Word-level grammatical analysis
  • Cross-lingual translation results
  • Processing statistics

Dashboard Analytics

• System Overview: Total documents, processing status, completion rates
• Visual Charts: Processing trends (line chart) and language distribution (pie chart)
• Recent Activity: Latest document processing activities

Development

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint

Code Style

• TypeScript for type safety
• ESLint for code quality
• Tailwind CSS for styling
• Component-based architecture
• Responsive design principles

Deployment

Build for Production

npm run build
npm run start

Environment Variables

Ensure environment variables are set in production:

• NEXT_PUBLIC_API_URL - Backend API URL (required)

Backend Integration

This dashboard requires the Mefik FastAPI backend to be running. The backend provides:

• User authentication with JWT tokens
• Document processing and storage
• S3 file upload integration
• Grammatical analysis and translation services

Authentication Flow

1. User logs in via /auth page
2. Backend returns JWT token
3. Token stored in localStorage
4. API requests include X-Auth-Token header
5. Protected routes check authentication status

File Upload Flow

1. User selects file in upload modal
2. Frontend requests presigned S3 URL from backend
3. File uploaded directly to S3
4. Document entry created in backend with S3 URI
5. Background processing begins

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

© 2026 Mefik. All rights reserved.