Vinyl Music Store Site
Project Overview
This project focused on building a dynamic, data-driven website for a vinyl music store using Vue and Laravel. Working in a team of two, the goal was to create a RESTful API and use AJAX fetch calls to retrieve JSON data and display it on the front end. The website allows users to browse songs and view detailed information through interactive elements, with filtering options based on song name, artist, and genre. The final result is a responsive, mobile-first experience that integrates backend data seamlessly into a visually engaging interface.
Technologies Used
- GitHub
- Vue
- Laravel
Roles
- Back-End Development
- Front-End Development
My Role
- Backend Developer (Laravel, database design, API development)
- Frontend Contributor (Vue integration, AJAX data handling)
- API Architect (designed RESTful structure and data relationships)
- Collaborator (worked closely with teammate handling static UI)
Challenges Faced
- Debugging issues while connecting backend API with frontend Vue components
- Managing asynchronous data flow between multiple AJAX fetch calls
- Learning how to properly structure and use reactive data in Vue
- Working within a tight timeline while handling both backend and frontend responsibilities
- Ensuring smooth communication between dynamic data and static UI
My Process
- Collaborated with teammate to define project scope and data structure for songs, artists, and genres
- Planned database schema and relationships before development
- Created migrations for songs, artists, and genres tables
- Generated test data using Faker with factories and seeders
- Built controllers and implemented RESTful API endpoints (index and show)
- Structured API responses to include relationships between songs, artists, and genres
- Developed custom filtering logic in index endpoints for searching by song, artist, and genre
- Created API routes for fetching all songs and individual song details
- Set up Vue app with reactive data and methods for handling API calls
- Implemented AJAX fetch calls to retrieve data from the API
- Designed interaction flow: fetch all songs → store selected ID → fetch detailed data for selected song
- Integrated dynamic backend data with the static frontend built by teammate
- Ensured the website was fully responsive and mobile-first
The Outcome
- Successfully developed and integrated a RESTful API with a dynamic frontend
- Created a fully functional vinyl music store interface with real-time data display
- Implemented filtering features for improved user experience
- Built an interactive system where users can view detailed information through dynamic pop-ups
- Strengthened skills in Laravel, Vue, and API integration
- Delivered a responsive, well-designed website within the project timeline
