Skip to content

README.MD

Latest commit

 

History

History
201 lines (155 loc) · 4.3 KB

README.MD

File metadata and controls

201 lines (155 loc) · 4.3 KB

CSV Upload Panel System

Overview

The CSV Upload Panel System is a full-stack web application that allows users to upload CSV files, map headers dynamically, and insert or update records into a database using the mobile number as a unique identifier.

The system provides real-time processing progress, upload history tracking, and date-based filtering.

Features

  • Upload CSV files
  • Dynamic header mapping with database fields
  • Insert or update records based on mobile number (unique key)
  • Real-time processing progress tracking
  • View uploaded user data
  • Upload history tracking
  • Date range filtering
  • Pagination support

Tech Stack

Backend

  • Flask (Python)
  • SQL Database

Frontend(Development)

  • Django (Primary UI implementation)

Frontend (Deployed)

  • HTML
  • CSS
  • JavaScript
## Project Structure

csv-upload-system/
│
├── backend/
│   ├── routes/
│   │   ├── data_routes.py
│   │   ├── main_routes.py
│   │   ├── mapping_routes.py
│   │   ├── process_routes.py
│   │   ├── status_routes.py
│   │   └── upload_routes.py
│   │
│   ├── services/
│   │   └── process_service.py
│   │
│   ├── utils/
│   │   └── db.py
│   │
│   ├── app.py
│   └── requirements.txt
│
├── frontend/
│   ├── app/
│   │   ├── static/css/
│   │   │   ├── data.css
│   │   │   ├── history.css
│   │   │   ├── mapping.css
│   │   │   ├── progress.css
│   │   │   └── upload.css
│   │   │
│   │   ├── templates/
│   │   │   ├── data.html
│   │   │   ├── history.html
│   │   │   ├── mapping.html
│   │   │   ├── progress.html
│   │   │   └── upload.html
│   │   │
│   │   ├── urls.py
│   │   └── views.py
│   │
│   ├── project/
│   │   ├── settings.py
│   │   ├── urls.py
│   │   └── wsgi.py
│   │
│   ├── staticfiles/
│   └── manage.py
│
├── frontend-deploy/
│   ├── css/
│   │   ├── index.css
│   │   ├── data.css
│   │   ├── history.css
│   │   ├── mapping.css
│   │   ├── progress.css
│   │   └── upload.css
│   │
│   ├── index.html
│   ├── upload.html
│   ├── mapping.html
│   ├── progress.html
│   ├── data.html
│   └── history.html
│
├── Screenshots/
│   ├── upload.png
│   ├── headers.png
│   ├── processing1.png
│   ├── processing2.png
│   ├── processing3.png
│   ├── user_data.png
│   ├── history.png
│   ├── filter_date.png
│   └── pagination.png
│
├── .gitignore
└── README.md

🌐 Live Links

📸 Screenshots

Upload Page

Upload

Header Mapping

Mapping

Processing Progress

Processing1 Processing2 Processing3

Data View

User Data

History Page

History

Date Filter

Date Filter

Pagination

Pagination

Setup Instructions

Backend Setup

cd backend pip install -r requirements.txt python app.py

Frontend Setup (Static Deployment)

cd frontend-deploy Open index.html in browser

Django (Primary frontend during development)

Static HTML/CSS version used for deployment

cd frontend python manage.py runserver

📌 Notes

  • The frontend was originally built using Django for full-stack integration
  • Due to deployment constraints, a static version (frontend-deploy/) was created for hosting on Netlify
  • Mobile number is used as a unique identifier for insert/update logic
  • Real-time progress tracking is implemented using an in-memory store

👤 Author

Monis Iqbal