Project Setup

Follow the steps below to set up the project locally.

1. Create the Environment File

Copy the example environment configuration:

cp .env.example .env

2. Configure Spotify Environment Variables (optional)

If you plan to test Spotify fonctionality, provide:

• SPOTIFY_CLIENT_ID
• SPOTIFY_CLIENT_SECRET

Generate credentials via the Spotify Developer Dashboard .

3. Bootstrap Laravel Sail

This command uses a small Docker container containing PHP and Composer to install the application's dependencies:

docker run --rm \
    -u "$(id -u):$(id -g)" \
    -v "$(pwd):/var/www/html" \
    -w /var/www/html \
    laravelsail/php83-composer:latest \
    composer install --ignore-platform-reqs

4. Build Docker Containers

Building the containers can take several minutes

./vendor/bin/sail build --no-cache

5. Sail Up the Application

./vendor/bin/sail up -d

6. Install Node Dependencies

./vendor/bin/sail npm install

7. Generate Application Key

./vendor/bin/sail artisan key:generate

8. Set Storage Permissions

To start a Bash session within your application's container

./vendor/bin/sail root-shell

Ensure Laravel has write access to the storage directory:

cd ..
chown -R sail:sail html

9. Create Storage Symlink

Create the symbolic link between storage/app/public and public/storage:

./vendor/bin/sail artisan storage:link

10. Run Database Migrations

./vendor/bin/sail artisan migrate

11. Build Frontend Assets

./vendor/bin/sail npm run build

12. Check out the application's url

The application should now be running and ready for testing 🎉

About

This project was a challenging and rewarding journey. It provides a comprehensive solution for establishment owners to create and manage personalized playlists that reflect the tastes and atmosphere of their customers, leveraging the Spotify Web API.

Project Stack and Configuration

The backend is built with Laravel, while the frontend is developed using React.js and Material UI.

For local development, the application runs on a Docker-based stack using a classic LAMP environment. The setup is managed via docker-compose and is inspired by an initial template similar to this one available on GitHub.

To interact with the Spotify Web API, the project uses the Spotify Web API PHP SDK , which simplifies HTTP request handling and avoids manual API integration within the Laravel environment.

What Did I Learn?

This project helped me explore several fundamental web development concepts and significantly strengthened my technical skill set:

• A deep understanding of stateless and stateful authentication using Spotify OAuth 2.0. The application uses the Client Credentials Flow (stateless authentication) to search the Spotify catalog, and the Authorization Code Flow (stateful authentication) to authenticate company managers, create playlists, and synchronize local playlists with their corresponding Spotify playlists.
• In-depth exploration of key Laravel features and design patterns, including API Resources, Form Request Validation, Middleware, Policies, Application Localization, Laravel Collections, Route Model Binding, and Dependency Injection.
• On the frontend, I implemented efficient state management using Zustand, applied the optimistic updates pattern to provide immediate user feedback, and used a debounce hook for song search to improve performance and user experience. I also created a custom Material UI theme with support for dynamically changing the primary color of the application, allowing the overall look and feel to be updated in just a few clicks.
• Implementation of a custom Laravel Artisan command to synchronize playlists using Spotify snapshot IDs, along with a cron job configured to run the synchronization process every midnight. Snapshot IDs act as a version-control mechanism within the Spotify API, and playlist synchronization requires comparing local and remote snapshot IDs to determine the appropriate update workflow.