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.
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.
-
Clone the Repository
Clone this repository to your local environment:git clone [email protected]:robuedi/vue-coding-test.git cd vue-coding-test
-
Set Up the Project
- Install dependencies:
npm install
- Create an
.env
file in the root directory using:cp .env.example .env
- Start the development server:
npm run dev
- Install dependencies:
-
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).
-
File Upload
- Provide a form to upload files.
- Validate file input before sending it to the API.
-
File Actions
- Download: Allow users to download files by triggering the corresponding API endpoint.
- Delete: Allow users to delete files with a confirmation dialog.
-
State Management
- Use Vue 3’s
ref
,reactive
, andwatch
from the Composition API. - Ensure the UI updates dynamically after file actions (e.g., upload, delete).
- Use Vue 3’s
-
Environment Configuration
- Use an
.env
file to store the API base URL:- Example:
VITE_API_BASE_URL=http://your-backend-api-url\
.
- Example:
- Ensure the application reads the URL dynamically.
- Use an
-
Error Handling
- Display error messages for failed uploads, invalid files, or API errors.
- Provide a fallback message if no files are available.
Your submission will be evaluated based on:
-
Code Quality
- Clean and modular components.
- Proper state management and API handling.
- Well-structured file organization.
-
Functionality
- Completeness of required features (list, upload, download, delete).
- Dynamic updates after file actions.
-
Environment Management
- Correct usage of the
.env
file for configuration.
- Correct usage of the
-
Error Handling
- Graceful handling of API errors and edge cases.
-
User Interface
- A simple, clean, and intuitive UI.
-
Documentation
- Clear setup and usage instructions in
README.md
.
- Clear setup and usage instructions in