A Thousand Notes (Demo)
🖼️ Because a picture is worth more than just words 🖼️
A Thousand Notes is a full stack web application created for the Fall 2021 - Shopify Developer Intern Challenge. It is an app that aims to help bring your pictures to life. Within the app, you can upload images along with their names and they will be displayed within the app and automatically linked to a relavant song on spotify. In doing this, users will be able to appreciate their pictures like never before because after all, A picture is worth a thousand... notes.
Side Note: The app may take about 30 seconds to cold boot.
You can view the backend api of the app here. This api has been thoroughly tested with Pytest. Features include retriving images by id or retrieving all images, deleting an image by id or a list of ids, and adding one or more images. Image data such as spotify information is stored in postgreSQL while the images themselves are stored on Google's Firebase.
You can view the front end of the app here. Features include uploading an image via the upload button, playing the Spotify preview of a linked song within your browser, a button to open a given song in spotify (NOTE: You need spotify on your machine for this), selecting multiple songs to delete with a delete button, querying images by name via the search bar, and pagination of images via the buttons at the buttom of the page.
- Python with FastAPI
- SQLAlchemy and Pydantic
- PostgreSQL for production and SQLite for testing
- React with Next.js
- Material UI
- Docker
- Firebase
- Spotify API
- Git
Initially the plan was to create a randomly generated song based on images provided. I could only find one service online that did this and I even created a script in python linked here that uses selenium to login to the service, drag an image to be run, wait for the AI to generate a song from the image, and return the url of the generated song. Unfortunately, a given user for this website (https://melobytes.com/en/app/ai_image2song) only gets a limited number of song generations before they hit a paywall. Because of this, I transitioned to using the spotify API to retrieve a random song from a constantly updated playlist of new music. In the future, one could also use AI to provide a description of uploaded images and use these descriptions to retrieve a song from spotify as maybe a search query. I unfortunately did not have time to implement this here, but it was an enjoyable project nonetheless and it was fun learning how to utilze Firebase and the Spotify API.
cd backend
pip install -r requirements.txt
pip install pytest
cd tests
pytest
Note you must first use the available sample.docker.env file and fill out any missing values. Then you can simply run:
docker-compose up
After the command finishes, you can travel to http://localhost:5001/ for the backend and http://localhost:3000/ for the frontend