Turn your favorite Spotify tracks, albums, or playlists into a unique, scannable 3D model! This project combines a web app with a parametric 3D modeling on MakerWorld to create personalized Spotify Tags.
MakerWorld 3D Model Link • Live Code Generator Website
This repository contains the frontend code for the 3D Printable Spotify Code Generator. It's a Vue.js application that provides the user interface for generating the necessary Base-8 codes from a Spotify URL. Beside that it provides color suggestions for 3D-printing and downloadable PDF files to print the album cover image.
Follow these instructions to get a local copy up and running for development.
- Node.js (tested on v20.x)
- npm (tested on v10.x)
(Note: These instructions are optimized for Windows and not tested on other OS's)
- Clone the repo to your local machine
git clone git@github.com:timoseyfarth/spotify-code-frontend.git
cd spotify-code-frontend- Install dependencies
npm install- Set up environment variables
Create a .env file in the root directory. See .env.example for a default local setup. If this configuration fits for you rename the file to .env.
- Run the development server
npm run devOpen the provided link from the terminal to view it in your browser.
- Test it out!
Make sure that you also have the backend up and running. (More information in the backend repo). Now you can test it out by pasting Spotify URL's. If you Submit it, there will be a request to the local backend and it will display the response nicely in the frontend!
This project was a fantastic learning experience. It was my first time trying out Vue.js, therefore it may not be perfect. I defintely see much room for improving the code e.g. in structure and im working on a cleaner version if time allows it. I'm proud of how it turned out and hope you enjoy using it!