/DossierFileUpload

Primary LanguagePHP

VISA Dossier Upload Feature

A simplified VISA Dossier management system using Laravel (API-only) for the backend and React Router for the frontend.

Link

-Live Demo

Screenshot

Screenshot Description

Documentation

Project Structure

  • backend/: Laravel API for file management
  • frontend/: React application for the user interface

Features

  • Upload files (PDF, PNG, JPG) up to 4MB
  • List uploaded files grouped by type (Passport, Utility Bill, Other)
  • Delete files
  • Preview uploaded files
  • Responsive UI with visual feedback

Backend Setup

Prerequisites

  • PHP 8.1 or higher
  • Composer
  • SQLite (for development)

Installation

  1. Navigate to the backend directory:
cd backend
  1. Install dependencies:
composer install
  1. Create environment file:
cp .env.example .env
  1. Generate application key:
php artisan key:generate
  1. Create SQLite database:
touch database/database.sqlite
  1. Run migrations:
php artisan migrate
  1. Create storage link:
php artisan storage:link

Running the Backend

Start the Laravel development server:

php artisan serve

The API will be available at http://localhost:8000.

API Endpoints

  • GET /api/dossier-files: List all files grouped by type
  • POST /api/dossier-files: Upload a new file
  • DELETE /api/dossier-files/{id}: Delete a file

Frontend Setup

Prerequisites

  • Node.js 16 or higher
  • npm

Installation

  1. Navigate to the frontend directory:
cd frontend
  1. Install dependencies:
npm install
  1. Create environment file:
mkdir .env
  1. Add Api base url
VITE_BASE_URL= "http://127.0.0.1:8000/api"

Running the Frontend

Start the React development server:

npm run dev

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

Testing

Backend Tests

The backend includes comprehensive tests:

  • Unit tests for models and services
  • Feature tests for API endpoints
  • Integration tests for complete workflows

Run the tests:

cd backend
php artisan test