Excel Management System

Demo Video :

excel management system

Table of Contents

• Overview
• Features
• Technology Stack
• System Architecture
• Getting Started
  • Prerequisites
  • Installation
  • Environment Variables
• API Documentation
• Deployment
• Project Structure

Overview

The Excel Management System provides a seamless browser-based interface for working with Excel files without the need for desktop applications. Users can upload spreadsheets, edit them in real-time, track changes across versions, and export their work in the original format.

Key Capabilities

• Browser-Based Editing: Edit Excel files directly in your browser with an intuitive spreadsheet interface
• Automatic Version Control: Every save creates a new version, with the ability to preview and restore previous states
• Real-Time Collaboration: Multiple sheets support with live editing and auto-save functionality
• Format Preservation: Maintains original file format (.xlsx, .xls, .csv) on export
• Change Tracking: Visual indicators for modified cells and version-to-version comparisons

Features

Authentication & Security

• Email/password registration and login
• JWT-based session management with 7-day token expiration
• Secure password hashing with bcrypt
• Protected API routes with user authentication

File Management

• Upload Excel files (.xlsx, .xls) and CSV files up to 10MB
• List all uploaded files with metadata (size, version count, last modified)
• Search files by name
• Delete files with cascade deletion of all versions

Spreadsheet Editor

• Interactive data grid with sortable columns
• Column-based filtering with real-time search
• Inline cell editing with automatic type detection
• Multi-sheet support with tab navigation
• Modified cell highlighting
• Auto-save every 30 seconds
• Manual save with keyboard shortcuts (Cmd/Ctrl+S)

Version Control

• Automatic version creation on each save
• Maximum of 5 versions per file (configurable)
• Version history panel with timestamps
• Preview any version in read-only mode
• Compare versions with visual change indicators (added/modified/deleted cells)
• Restore any previous version
• Version-specific export

Export & Download

• Export current version or specific historical versions
• Maintains original file format
• Bulk export of all user files as ZIP archive

Technology Stack

Frontend

• Framework: Next.js 15.0.2 with React 18.3.1
• Language: TypeScript
• UI Components: Tailwind CSS for styling
• Spreadsheet Grid: react-data-grid 7.0.0-beta.46
• Excel Processing: ExcelJS 4.4.0
• HTTP Client: Axios
• Notifications: react-hot-toast

Backend

• Framework: FastAPI (Python 3.11.9)
• Language: Python
• Database: MongoDB Atlas (Cloud)
• ODM: Motor 3.6.0 (Async MongoDB driver)
• Authentication: PyJWT with bcrypt
• Excel Processing: openpyxl 3.1.5, pandas 2.2.3
• File Storage: Cloudinary (primary), GridFS (fallback)
• Validation: Pydantic 2.9.2

Infrastructure

• Frontend Hosting: Vercel
• Backend Hosting: Render (Free Tier)
• Database: MongoDB Atlas (Cloud)
• File Storage: Cloudinary (Cloud)

System Architecture

┌─────────────────┐         ┌──────────────────┐         ┌─────────────────┐
│   Next.js App   │────────▶│   FastAPI Backend│────────▶│   MongoDB Atlas │
│   (Vercel)      │  HTTPS  │   (Render)       │  Async  │   (Cloud)       │
└─────────────────┘         └──────────────────┘         └─────────────────┘
        │                            │
        │                            │
        ▼                            ▼
┌─────────────────┐         ┌──────────────────┐
│  Browser Cache  │         │   Cloudinary     │
│  (Session)      │         │   (File Storage) │
└─────────────────┘         └──────────────────┘

Data Flow

1. Upload: User uploads file → Backend parses to JSON → Stores in Cloudinary/GridFS → Saves metadata to MongoDB
2. Edit: User edits cells → Frontend tracks changes → Auto-save updates file → Manual save creates new version
3. Version Control: Each save → Converts JSON to Excel → Uploads to storage → Creates version record → Limits to 5 versions
4. Export: User requests download → Backend retrieves from storage → Streams file to browser

Getting Started

Prerequisites

• Node.js 18.x or higher
• Python 3.11.x
• MongoDB Atlas account (free tier available)
• Cloudinary account (free tier available)

Installation

1. Clone the Repository

git clone https://github.com/sreeshanth-soma/Product-excel-mgmt.git
cd Product-excel-mgmt

2. Backend Setup

cd backend

# Create virtual environment
python -m venv venv
source venv/bin/activate  # On Windows: venv\Scripts\activate

# Install dependencies
pip install -r requirements.txt

# Create .env file (see Environment Variables section)
touch .env

# Start the server
uvicorn app.main:app --reload --host 0.0.0.0 --port 8000

The backend will be available at http://localhost:8000

3. Frontend Setup

cd frontend

# Install dependencies
npm install

# Create .env.local file (see Environment Variables section)
touch .env.local

# Start development server
npm run dev

The frontend will be available at http://localhost:3000

Environment Variables

Backend (.env)

Create a .env file in the backend directory:

# MongoDB Configuration
MONGODB_URL=mongodb+srv://<username>:<password>@cluster0.xxxxx.mongodb.net/excel_management
DATABASE_NAME=excel_management

# JWT Configuration
JWT_SECRET_KEY=your-super-secret-jwt-key-change-this-in-production
JWT_ALGORITHM=HS256
JWT_EXPIRATION_DAYS=7

# CORS Configuration (comma-separated origins)
CORS_ORIGINS=http://localhost:3000,https://yourdomain.vercel.app

# File Upload Limits
MAX_FILE_SIZE=10485760
MAX_VERSIONS_PER_FILE=5

# Cloudinary Configuration (Optional - Falls back to GridFS)
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret

Required Variables:

• MONGODB_URL: Your MongoDB connection string from MongoDB Atlas
• JWT_SECRET_KEY: Secret key for JWT token generation (use a strong random string)

Optional Variables:

• CLOUDINARY_*: If not provided, files will be stored in MongoDB GridFS

Frontend (.env.local)

Create a .env.local file in the frontend directory:

# Backend API URL
NEXT_PUBLIC_API_URL=http://localhost:8000/api

# Production (when deployed)
# NEXT_PUBLIC_API_URL=https://your-backend.onrender.com/api

API Documentation

Base URL

• Development: http://localhost:8000/api
• Production: https://product-excel-mgmt.onrender.com/api

Authentication Endpoints

POST /auth/register

Register a new user account.

Request Body:

{
  "email": "user@example.com",
  "password": "securePassword123",
  "full_name": "John Doe"
}

Response (201):

{
  "id": "507f1f77bcf86cd799439011",
  "email": "user@example.com",
  "full_name": "John Doe",
  "created_at": "2025-11-02T10:30:00Z"
}

POST /auth/login

Authenticate user and receive JWT token.

Request Body:

{
  "email": "user@example.com",
  "password": "securePassword123"
}

Response (200):

{
  "access_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
  "token_type": "bearer",
  "user": {
    "id": "507f1f77bcf86cd799439011",
    "email": "user@example.com",
    "full_name": "John Doe"
  }
}

GET /auth/me

Get current authenticated user information.

Headers:

Authorization: Bearer <access_token>

Response (200):

{
  "id": "507f1f77bcf86cd799439011",
  "email": "user@example.com",
  "full_name": "John Doe",
  "created_at": "2025-11-02T10:30:00Z"
}

File Management Endpoints

All file endpoints require authentication via JWT token in the Authorization header.

POST /files/upload

Upload a new Excel or CSV file.

Headers:

Authorization: Bearer <access_token>
Content-Type: multipart/form-data

Request Body (multipart/form-data):

file: [Excel/CSV file]

Response (201):

{
  "id": "507f1f77bcf86cd799439012",
  "filename": "sales-data.xlsx",
  "original_name": "sales-data.xlsx",
  "size": 2547896,
  "sheet_count": 3,
  "version_count": 1,
  "created_at": "2025-11-02T11:00:00Z",
  "updated_at": "2025-11-02T11:00:00Z"
}

Limitations:

• Max file size: 10MB
• Supported formats: .xlsx, .xls, .csv

GET /files/

List all files for the authenticated user.

Headers:

Authorization: Bearer <access_token>

Query Parameters:

• search (optional): Filter files by filename

Response (200):

[
  {
    "id": "507f1f77bcf86cd799439012",
    "filename": "sales-data.xlsx",
    "original_name": "sales-data.xlsx",
    "size": 2547896,
    "sheet_count": 3,
    "version_count": 5,
    "created_at": "2025-11-02T11:00:00Z",
    "updated_at": "2025-11-02T15:30:00Z"
  }
]

GET /files/{file_id}

Get detailed file information including Excel data.

Headers:

Authorization: Bearer <access_token>

Response (200):

{
  "id": "507f1f77bcf86cd799439012",
  "filename": "sales-data.xlsx",
  "original_name": "sales-data.xlsx",
  "size": 2547896,
  "sheet_count": 3,
  "version_count": 5,
  "current_data": {
    "Sheet1": {
      "headers": ["ID", "Name", "Price", "Stock"],
      "data": [
        {"ID": 1, "Name": "Widget", "Price": 25.50, "Stock": 100},
        {"ID": 2, "Name": "Gadget", "Price": 45.00, "Stock": 50}
      ],
      "row_count": 2,
      "col_count": 4
    }
  },
  "created_at": "2025-11-02T11:00:00Z",
  "updated_at": "2025-11-02T15:30:00Z"
}

PATCH /files/{file_id}

Update file data and create a new version.

Headers:

Authorization: Bearer <access_token>
Content-Type: application/json

Request Body:

{
  "data": {
    "Sheet1": {
      "headers": ["ID", "Name", "Price", "Stock"],
      "data": [
        {"ID": 1, "Name": "Widget", "Price": 30.00, "Stock": 150},
        {"ID": 2, "Name": "Gadget", "Price": 45.00, "Stock": 50}
      ],
      "row_count": 2,
      "col_count": 4
    }
  }
}

Response (200):

{
  "message": "File updated successfully",
  "success": true
}

PATCH /files/{file_id}/autosave

Auto-save file data without creating a new version.

Headers:

Authorization: Bearer <access_token>
Content-Type: application/json

Request Body: Same as update endpoint

Response (200):

{
  "message": "File auto-saved successfully",
  "success": true
}

GET /files/{file_id}/export

Export file in original format.

Headers:

Authorization: Bearer <access_token>

Query Parameters:

• version (optional): Specific version number to export

Response (200):

• Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet or text/csv
• Content-Disposition: attachment; filename="sales-data.xlsx"
• Body: File binary data

DELETE /files/{file_id}

Delete a file and all its versions.

Headers:

Authorization: Bearer <access_token>

Response (200):

{
  "message": "File deleted successfully",
  "success": true
}

Version Control Endpoints

GET /files/{file_id}/versions

Get version history for a file.

Headers:

Authorization: Bearer <access_token>

Response (200):

[
  {
    "id": "507f1f77bcf86cd799439015",
    "file_id": "507f1f77bcf86cd799439012",
    "version": 5,
    "created_at": "2025-11-02T15:30:00Z"
  },
  {
    "id": "507f1f77bcf86cd799439014",
    "file_id": "507f1f77bcf86cd799439012",
    "version": 4,
    "created_at": "2025-11-02T14:20:00Z"
  }
]

GET /files/{file_id}/versions/{version_number}

Get specific version data.

Headers:

Authorization: Bearer <access_token>

Response (200):

{
  "id": "507f1f77bcf86cd799439014",
  "file_id": "507f1f77bcf86cd799439012",
  "version": 4,
  "data": {
    "Sheet1": {
      "headers": ["ID", "Name", "Price", "Stock"],
      "data": [
        {"ID": 1, "Name": "Widget", "Price": 25.50, "Stock": 100}
      ],
      "row_count": 1,
      "col_count": 4
    }
  },
  "created_at": "2025-11-02T14:20:00Z"
}

POST /files/{file_id}/versions/{version_number}/restore

Restore a previous version.

Headers:

Authorization: Bearer <access_token>

Response (200):

{
  "message": "Restored to version 4",
  "success": true
}

Bulk Operations

GET /files/bulk-export

Export all user files as a ZIP archive.

Headers:

Authorization: Bearer <access_token>

Response (200):

• Content-Type: application/zip
• Content-Disposition: attachment; filename="excel_files_export_20251102_153000.zip"
• Body: ZIP file binary data

Deployment

Frontend Deployment (Vercel)

1. Push your code to GitHub
2. Connect repository to Vercel
3. Configure build settings:
   • Framework Preset: Next.js
   • Build Command: npm run build
   • Output Directory: .next
4. Add environment variables:
   • NEXT_PUBLIC_API_URL: Your backend URL

Backend Deployment (Render)

1. Create new Web Service on Render
2. Connect your GitHub repository
3. Configure settings:
   • Build Command: pip install -r requirements.txt
   • Start Command: uvicorn app.main:app --host 0.0.0.0 --port $PORT
   • Environment: Python 3.11.9
4. Add environment variables (see Environment Variables section)
5. Deploy

Note: Free tier on Render has cold starts (~10-15 seconds) after inactivity. Consider setting up a keep-alive service or upgrading to a paid plan for production use.

Project Structure

excel-management-system/
├── backend/
│   ├── app/
│   │   ├── api/
│   │   │   ├── auth.py              # Authentication endpoints
│   │   │   └── files.py             # File management endpoints
│   │   ├── config/
│   │   │   ├── database.py          # MongoDB connection
│   │   │   └── settings.py          # App configuration
│   │   ├── models/
│   │   │   └── models.py            # Database models
│   │   ├── schemas/
│   │   │   └── schemas.py           # Pydantic schemas
│   │   ├── utils/
│   │   │   ├── cloudinary_storage.py # Cloudinary integration
│   │   │   ├── dependencies.py      # Auth dependencies
│   │   │   ├── excel_parser.py      # Excel processing
│   │   │   ├── jwt.py               # JWT utilities
│   │   │   └── security.py          # Password hashing
│   │   └── main.py                  # FastAPI app entry point
│   ├── requirements.txt             # Python dependencies
│   ├── runtime.txt                  # Python version
│   └── start.sh                     # Startup script
├── frontend/
│   ├── src/
│   │   ├── app/
│   │   │   ├── (auth)/
│   │   │   │   ├── login/           # Login page
│   │   │   │   └── register/        # Registration page
│   │   │   ├── dashboard/           # File dashboard
│   │   │   ├── editor/[id]/         # Spreadsheet editor
│   │   │   ├── globals.css          # Global styles
│   │   │   ├── layout.tsx           # Root layout
│   │   │   └── page.tsx             # Landing page
│   │   ├── components/              # Reusable components
│   │   ├── contexts/                # React contexts
│   │   └── lib/
│   │       ├── api.ts               # API client
│   │       └── utils.ts             # Utility functions
│   ├── public/                      # Static assets
│   ├── package.json                 # Node dependencies
│   ├── next.config.js               # Next.js configuration
│   ├── tailwind.config.ts           # Tailwind configuration
│   └── tsconfig.json                # TypeScript configuration
└── README.md                        # This file

Performance Optimizations

The application includes several performance enhancements:

• MongoDB Caching: Parsed Excel data is cached after first load (80% faster on repeat views)
• Lazy Loading: Version comparisons load only when requested
• GZip Compression: API responses compressed for 60-80% size reduction
• Pagination: Large datasets rendered in pages of 150 rows
• Memoization: React components optimized to prevent unnecessary re-renders