Document Manager

A full-stack document management application with file upload support, built with FastAPI (Python) and Vue.ts 3, fully containerized with Docker.

Tech Stack

Layer	Technology
Backend	Python 3.12, FastAPI, SQLAlchemy
Database	SQLite
Auth	JWT (python-jose + passlib)
Frontend	Vue.ts 3, Vite, Pinia, Vue Router
HTTP	Axios
Proxy	nginx
Deploy	Docker, Docker Compose

Architecture

┌────────────┐        ┌────────────────┐        ┌────────────┐
│  Browser   │──:80──▶│  nginx (Vue)   │──/api──▶│  FastAPI   │
│            │        │  static SPA    │        │  :8000     │
└────────────┘        └────────────────┘        └─────┬──────┘
                                                      │
                                                ┌─────▼──────┐
                                                │   SQLite    │
                                                │  + uploads/ │
                                                └─────────────┘

• nginx serves the Vue.ts SPA and reverse-proxies /api requests to the FastAPI backend.
• SQLite is used as the database (file-based, persisted via Docker volume).
• File uploads are validated against an allowlist of file types and stored on disk with UUID filenames.

Prerequisites

• Docker (v20+)
• Docker Compose (v2+)

Quick Start

# Clone the repository
git clone <repo-url>
cd document-manager

# Build and start all services
docker-compose up --build

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

Default Credentials

Username	Password
admin	admin123

API Documentation

Once the application is running, Swagger UI is available at:

• http://localhost/api/docs (via nginx proxy)
• http://localhost:8000/docs (direct backend access)

Project Structure

document-manager/
├── README.md
├── docker-compose.yml
├── backend/
│   ├── Dockerfile
│   ├── requirements.txt
│   └── app/
│       ├── main.py            # FastAPI application entry point
│       ├── config.py          # Application settings
│       ├── database.py        # SQLAlchemy engine & session
│       ├── models.py          # ORM models (User, Document)
│       ├── schemas.py         # Pydantic schemas
│       ├── auth.py            # JWT utilities & password hashing
│       ├── dependencies.py    # FastAPI dependencies (auth guard)
│       └── routers/
│           ├── auth_router.py # POST /api/auth/login
│           └── documents.py   # CRUD + file upload/download
└── frontend/
    ├── Dockerfile
    ├── nginx.conf
    ├── package.json
    └── src/
        ├── App.vue
        ├── main.ts
        ├── router/index.ts
        ├── stores/auth.ts
        ├── services/api.ts
        ├── views/
        │   ├── LoginView.vue
        │   ├── DocumentListView.vue
        │   ├── DocumentCreateView.vue
        │   ├── DocumentEditView.vue
        │   └── DocumentDetailView.vue
        └── components/
            ├── DocumentForm.vue
            └── Navbar.vue

Key Design Decisions

1. SQLAlchemy ORM — Clean data access layer, easy to extend with migrations later.
2. UUID filenames — Prevents path traversal attacks and filename collisions; original name is stored in the database.
3. Seeded admin user — Simple auth scope; a default admin account is created on first startup.
4. nginx reverse proxy — Single entry point (port 80), eliminates CORS issues in production.
5. Pinia — Official Vue 3 state management, simpler than Vuex.

Allowed File Types

PDF, PNG, JPG, JPEG, DOCX, TXT

Development (without Docker)

Backend

cd backend
python -m venv venv
source venv/bin/activate   # Windows: venv\Scripts\activate
pip install -r requirements.txt
# SQLite database needs a directory
mkdir ./data; uvicorn app.main:app --reload --host 0.0.0.0 --port 8000

Frontend

cd frontend
npm install
npm run dev

License

MIT