Skip to content

robuedi/vue-coding-test

Repository files navigation

Vue.js Coding Test

This test is designed to assess your proficiency in Vue.js, focusing on building a frontend application that interacts with APIs, handles state management, and ensures proper file handling.


Objective

You are tasked with building a File Management Frontend that interacts with a backend API. This frontend should allow users to upload, view, download, and delete files through the provided API.


Testing the solution instructions

  1. Clone the Repository
    Clone this repository to your local environment:

    git clone [email protected]:robuedi/vue-coding-test.git
    cd vue-coding-test
  2. Set Up the Project

    1. Install dependencies:
      npm install
    2. Create an .env file in the root directory using:
      cp .env.example .env
      
    3. Start the development server:
      npm run dev

Requirements

1. Features

  1. File Listing

    • Display a list of files retrieved from the API.
    • Show each file’s:
      • Name.
      • Upload date.
      • Action buttons (e.g., download and delete).
  2. File Upload

    • Provide a form to upload files.
    • Validate file input before sending it to the API.
  3. File Actions

    • Download: Allow users to download files by triggering the corresponding API endpoint.
    • Delete: Allow users to delete files with a confirmation dialog.
  4. State Management

    • Use Vue 3’s ref, reactive, and watch from the Composition API.
    • Ensure the UI updates dynamically after file actions (e.g., upload, delete).
  5. Environment Configuration

    • Use an .env file to store the API base URL:
      • Example: VITE_API_BASE_URL=http://your-backend-api-url\.
    • Ensure the application reads the URL dynamically.
  6. Error Handling

    • Display error messages for failed uploads, invalid files, or API errors.
    • Provide a fallback message if no files are available.

Evaluation Criteria

Your submission will be evaluated based on:

  1. Code Quality

    • Clean and modular components.
    • Proper state management and API handling.
    • Well-structured file organization.
  2. Functionality

    • Completeness of required features (list, upload, download, delete).
    • Dynamic updates after file actions.
  3. Environment Management

    • Correct usage of the .env file for configuration.
  4. Error Handling

    • Graceful handling of API errors and edge cases.
  5. User Interface

    • A simple, clean, and intuitive UI.
  6. Documentation

    • Clear setup and usage instructions in README.md.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published