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

🐛 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

Video Documentation Requirement

Video Guidance - Record a screen share demonstrating:

• How you leveraged Gen AI to help build the features
• Your prompting techniques and strategies
• Any challenges you faced and how you overcame them
• Your thought process in using AI effectively

IMPORTANT: Please do not provide a demo of the application functionality. Focus only on your Gen AI usage and approach.

Submission Process

1. Submit your project through this Google Form: Project Submission Form

2. The form will require:

   • Your project zip file (named username_YYYYMMDD.zip)
   • Your video documentation
   • Any additional notes or comments about your implementation

Make sure to test the zip file and video before submitting to ensure they are complete and working as expected.