Skip to content

famably/TrackManagement-Symfony-Vue.js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 

Repository files navigation

Track Management Platform (Symfony API + Vue.js Frontend)

Overview

This repository contains a full-stack Track Management Platform built with a Symfony 6+ REST API and a Vue 3 frontend application.
The system provides a clean and extensible foundation for managing music tracks, including validation, editing, and real‑time UI updates.

It is designed with modern backend and frontend best practices, modular architecture, and a clean developer experience.


Features

🎵 Track Management API (Symfony)

  • Create, list, and update music tracks
  • Strong validation for:
    • Title
    • Artist
    • Duration (seconds)
    • ISRC format (^[A-Z]{2}-[A-Z0-9]{3}-\d{2}-\d{5}$)
  • JSON responses with structured error messages
  • Doctrine ORM integration
  • Service-layer business logic (clean separation of concerns)

🎨 Vue.js Frontend

  • Track list with automatic refresh
  • Create and edit forms using Vue 3 Composition API
  • Duration input in mm:ss converted into seconds
  • ISRC validation feedback
  • Axios-based API communication
  • Lightweight styling with clean UI layout

Tech Stack

Backend

  • Symfony 6+
  • PHP 8.4+
  • Doctrine ORM
  • Symfony Validator
  • Symfony Forms (API mode)
  • Symfony HTTP Client (optional for extensions)

Frontend

  • Vue 3 + Composition API
  • Pinia Store (or reactive refs)
  • Axios / Fetch API
  • Vite
  • TypeScript optional (project supports it)

Backend Setup (Symfony)

1. Install dependencies

composer install

2. Configure environment

Copy .env to .env.local and set your DB connection.

3. Create DB and run migrations

php bin/console doctrine:database:create
php bin/console doctrine:migrations:migrate

4. Run the API server

symfony serve

API base URL:

http://localhost:8000/api/tracks

Frontend Setup (Vue.js)

1. Navigate to the frontend directory

cd frontend

2. Install dependencies

npm install

3. Run development server

npm run dev

The frontend will interact with the Symfony API at:

http://localhost:8000/api/tracks

API Endpoints

GET /api/tracks

Returns all tracks.

POST /api/tracks

Creates a new track.
Example payload:

{
  "title": "Song Title",
  "artist": "Artist Name",
  "duration": 215,
  "isrc": "GB-ABC-22-12345"
}

PUT /api/tracks/{id}

Updates a track.


Project Structure

backend/
  src/
  config/
  migrations/
  public/
  tests/
  README.md

frontend/
  src/
    components/
    views/
    store/
  public/
  README.md

Extensibility

This project can be enhanced with:

  • Pagination and search
  • Multi-artist models
  • Album associations
  • Audio file upload
  • Authentication + roles
  • Track analytics dashboard
  • Audio preview player

Summary

This repository provides a clean, modern full‑stack application for managing music tracks.
With a robust Symfony backend and a reactive Vue 3 interface, it serves as a strong foundation for music tools, dashboards, or catalog management systems.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published