GitHub - fulldev1123/TrackApp

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 tracks
  • POST /api/tracks - Create a new track
  • PUT /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)

  1. Clone the repository.
  2. Run composer install
  3. Copy .env to .env.local and configure your DB credentials
  4. Run migrations:
    php bin/console doctrine:database:create
    php bin/console doctrine:migrations:migrate
  5. 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)

  1. Navigate to the frontend/ directory
  2. Install dependencies:
  3. Run the dev server:
  4. 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!