Mixstation

This is an app similar to Soundcloud, Mixcloud or HearThis where users can upload their DJ mixes for others to listen to. It is built on a VueJS frontend, Laravel backend and a MySQL 9 database.

Development

Frontend (Vue 3)

To get started with the frontend run the following in a terminal.

  cd ./frontend
  
  npm i
  
  npm run dev

The frontend should now be running on port 5173 unless specified different.

Backend (Laravel 11)

To get started running, first we need to install the composer packages in the backend directory.

  cd ./backend

  composer install

Next, we need to create a .env and update the DB credentials as needed.

  cp .env.example .env

Now we can run the migrations then start the API. The backend uses docker through Laravel Sail.

  php artisan migrate
  
  ./vendor/bin/sail up -d

To analyse the code base, we can run PHP Stan

./vendor/bin/phpstan analyse

To format the codebase we can run PHP Pint

./vendor/bin/pint

Todo:

Issues / Clean up

• Implement own waveform analyser and cache results when page changes
• Make waveform resizeable to fill width of container object
• Rename backend database to mixstation and rebuild container
• Handle errors and show when login/register fails
• Set up cookie when user logs in or registers to store token
• Clean up register and login components and reduce duplication

Design bits:

• Create a logo

Frontend

• Setup VueJS
• Install Vue Router
• Install Pinia
• Setup PrimeVue - https://primevue.org/
• Setup Vue Audio Visual - https://github.com/staskobzar/vue-audio-visual
• Setup Tailwind CSS
• Setup ESLint
• Tidy up index.js and move some config options into a config directory
• Add dark mode button - https://primevue.org/theming/styled/#darkmode
• Setup docker

Backend

• Setup Laravel
• Init API mode
• Setup Larastan - https://github.com/larastan/larastan
• Setup Laravel Pint - https://laravel.com/docs/11.x/pint
• Setup Laravel Data & Actions

Functionality

• User login/logout and authentication
• Forgot credentials feature
• Upload mixes (MP3 or WAV)
• List mixes they have uploaded
• Profile page
• Follow other users
• Dashboard page with mixes of users followed
• Stats of listeners and how many plays etc
• Search for users or mixes
• Favourite mixes
• Comments on mixes?
• Global player on bottom of screen
• Download mixes and ability to disable
• Invite users
• Mix tags for genre
• User can create playlists to group their mixes
• Player has custom playlist ability to add multiple mixes
• Feature on backend which converts audio to MP3
• Artwork on each mix to display on the mix
• Able to make tracks private and create a private share link

Docker

This will come later when the project is at a decent point

• Setup and containerise Vue JS frontend
• Make global docker compose file including the files from both directories

React Native

Will need to flesh this out more but not a high priority for a mobile app

Other

• Find a free service to create a task board or host something on a raspberry pi
  • Set up a local Raspberry Pi
  • Host Youtrack - https://www.jetbrains.com/youtrack/
    • https://www.jetbrains.com/help/youtrack/server/7.0/Install-YouTrack-ZIP-Installation.html