Symfony + Vue.js Coding Test: Track Management Mini App
โจ Objective
Create a small web application to manage music tracks. Build a REST API with Symfony and a Vue.js frontend to interact with it. Keep it lightweightโthe whole test should take ~90 minutes.
๐ Part 1: Symfony Backend API
๐ Requirements
Build a REST API with the following capabilities:
Track entity:
id(auto-incremented integer)title(string, required)artist(string, required)duration(integer, in seconds, required)isrc(string, optional, must match^[A-Z]{2}-[A-Z0-9]{3}-\d{2}-\d{5}$)
๐ API Endpoints
GET /api/tracks- List all tracksPOST /api/tracks- Create a new trackPUT /api/tracks/{id}- Update an existing track
โ Expectations
- Symfony 6+
- Doctrine ORM
- Form validation (e.g., NotBlank, Regex)
- JSON responses with validation errors
- No authentication required
๐ Bonus
- Use a service class for business logic
- Return clean error messages
๐ง Setup Instructions (Backend)
- Clone the repository.
- Run
composer install - Copy
.envto.env.localand configure your DB credentials - Run migrations:
php bin/console doctrine:database:create php bin/console doctrine:migrations:migrate
- Run the Symfony server:
๐ฎ Part 2: Vue.js Frontend
๐ง Requirements
Build a small interface to:
- Display tracks in a table
- Create a new track via a form
- Edit an existing track via the same form
โก Tech Stack
- Vue 3 + Composition API
- Pinia (or reactive refs)
- Axios (or Fetch API)
- Basic validation feedback (required fields, ISRC format)
โ Expectations
- List auto-updates after creating or editing
- Clear form on submit success
- Minimal styling needed
๐ก Bonus
- Duration input as
mm:ss, converted to seconds - Modal or expandable form for editing
๐ง Setup Instructions (Frontend)
- Navigate to the
frontend/directory - Install dependencies:
- Run the dev server:
- Ensure the API is accessible at
http://localhost:8000/api/tracks
โณ Time Budget
- Backend: ~45-60 mins
- Frontend: ~30-45 mins
โ๏ธ Evaluation Rubric
| Area | Weight |
|---|---|
| Symfony REST/API design | 3 |
| Doctrine + Validation | 2 |
| Vue structure & reactivity | 2 |
| UX (form & updates) | 2 |
| Bonus: polish & extras | 1 |
๐ Submission Instructions
- Submit code as a GitHub repo or ZIP file
- Ensure both backend and frontend run independently
- Include setup instructions in each folder (
README.md) - Leave comments where appropriate to explain design choices
Let us know if anything was unclear or if you'd like to explain your thought process!