Abnormal File Vault

A full-stack file management application built with React and Django, designed for efficient file handling and storage.

🚀 Technology Stack

Backend

• Django 4.x (Python web framework)
• Django REST Framework (API development)
• SQLite (Development database)
• Gunicorn (WSGI HTTP Server)
• WhiteNoise (Static file serving)

Frontend

• React 18 with TypeScript
• TanStack Query (React Query) for data fetching
• Axios for API communication
• Tailwind CSS for styling
• Heroicons for UI elements

Infrastructure

• Docker and Docker Compose
• Local file storage with volume mounting

📋 Prerequisites

Before you begin, ensure you have installed:

• Docker (20.10.x or higher) and Docker Compose (2.x or higher)
• Node.js (18.x or higher) - for local development
• Python (3.9 or higher) - for local development

🛠️ Installation & Setup

Using Docker (Recommended)

docker-compose up --build

Local Development Setup

Backend Setup

1. Create and activate virtual environment

   cd backend
   python -m venv venv
   source venv/bin/activate  # On Windows: venv\Scripts\activate

2. Install dependencies

   pip install -r requirements.txt

3. Create necessary directories

   mkdir -p media staticfiles data

4. Run migrations

   python manage.py migrate

5. Start the development server

   python manage.py runserver

Frontend Setup

1. Install dependencies

   cd frontend
   npm install

2. Create environment file Create .env.local:

   REACT_APP_API_URL=http://localhost:8000/api
   

3. Start development server

   npm start

🌐 Accessing the Application

• Frontend Application: http://localhost:3000
• Backend API: http://localhost:8000/api

📝 API Documentation

File Management Endpoints

List Files

• GET /api/files/
• Returns a list of all uploaded files
• Response includes file metadata (name, size, type, upload date)

Upload File

• POST /api/files/
• Upload a new file
• Request: Multipart form data with 'file' field
• Returns: File metadata including ID and upload status

Get File Details

• GET /api/files/<file_id>/
• Retrieve details of a specific file
• Returns: Complete file metadata

Delete File

• DELETE /api/files/<file_id>/
• Remove a file from the system
• Returns: 204 No Content on success

Download File

• Access file directly through the file URL provided in metadata

🗄️ Project Structure

file-hub/
├── backend/                # Django backend
│   ├── files/             # Main application
│   │   ├── models.py      # Data models
│   │   ├── views.py       # API views
│   │   ├── urls.py        # URL routing
│   │   └── serializers.py # Data serialization
│   ├── core/              # Project settings
│   └── requirements.txt   # Python dependencies
├── frontend/              # React frontend
│   ├── src/
│   │   ├── components/    # React components
│   │   ├── services/      # API services
│   │   └── types/         # TypeScript types
│   └── package.json      # Node.js dependencies
└── docker-compose.yml    # Docker composition

🔧 Development Features

• Hot reloading for both frontend and backend
• React Query DevTools for debugging data fetching
• TypeScript for better development experience
• Tailwind CSS for rapid UI development

📚 Documentation

Detailed documentation is available in the docs/ directory:

• Requirements
• System Design
• Verification Guide
• Execution Steps

🐛 Troubleshooting

1. Port Conflicts

   # If ports 3000 or 8000 are in use, modify docker-compose.yml or use:
   # Frontend: npm start -- --port 3001
   # Backend: python manage.py runserver 8001

2. File Upload Issues

   • Maximum file size: 10MB
   • Ensure proper permissions on media directory
   • Check network tab for detailed error messages

3. Database Issues

   # Reset database
   rm backend/data/db.sqlite3
   python manage.py migrate

Project Submission Instructions

Preparing Your Submission

1. Before creating your submission zip file, ensure:

   • All features are implemented and working as expected
   • All tests are passing
   • The application runs successfully locally
   • Remove any unnecessary files or dependencies
   • Clean up any debug/console logs

2. Create the submission zip file:

   # Activate your backend virtual environment first
   cd backend
   source venv/bin/activate  # On Windows: venv\Scripts\activate
   
   # Run the submission script from the project root
   cd ..
   python create_submission_zip.py

   The script will:

   • Create a zip file named username_YYYYMMDD.zip (e.g., johndoe_20240224.zip)
   • Respect .gitignore rules to exclude unnecessary files
   • Preserve file timestamps
   • Show you a list of included files and total size
   • Warn you if the zip is unusually large

3. Verify your submission zip file:

   • Extract the zip file to a new directory
   • Ensure all necessary files are included
   • Verify that no unnecessary files (like node_modules, pycache, etc.) are included
   • Test the application from the extracted files to ensure everything works

Once you have prepared the project for submission follow the instructions in the email to submit the project along with the video.