This program was created in light of recent issues with Ticketmaster for artists such as Zach Bryan and Taylor Swift going on tour. Simply put, resellers and bots are being blamed for the lack of access of tickets for the artists' true fans and exponentially driving up prices. This website is one version of a solution for this problem by requiring users to match a random Zach Bryan lyric to its corresponding song and album. If the user gets 60% or better, they are redirected to Zach Bryan's Ticketmaster page to be given the opportunity to purchase tickets. If not, they lose that opportunity.
It can be accessed here!
Song dropdown list generated based on selected album
This program was developed using a React front-end with some components from Ant Design and Material UI and styled using Sass. It connects with a Node.js backend using the Express framework.
This application was also containerized into client and server containers using Docker before being run on an AWS EC2 instance, using docker networks as well nginx as a reverse proxy for communication.
Important: You will need to create a developer account for Musixmatch to run this program.
- Create a developer account from https://developer.musixmatch.com/
- Replace
api_key
inserver/index.js
with your API Key - Create an AWS EC2 Instance. A free micro.t2 provides enough processing power if you can build the containers locally. If you need to build them within the EC2 instance, use a t2.small because you will need the extra GB of RAM.
- Configure the inbound rules under the security tab to allow for:
- HTTPS
- SSH
- Custom TCP on port 3000
- Custom TCP on port 8000
- HTTP
- Create an elastic IP address in AWS and associate it with your instance
- Update
proxy pass
inclient/nginx/default.conf
with your elastic IP address as well asELASTIC.IP
inclient/src/axios.js
- In the root folder, run
docker compose up --build
- Visit your IP address!
- Create a developer account for musixmatch
- Create
server/.env
and putAPI_KEY=YOUR_API_KEY
- Change the base URL in
client/src/axios.js
tohttp//:localhost:8000
cd
intoclient
and runnpm install
cd
intoserver
and runnpm install
cd
back intoclient
and runnpm start
cd
back intoserver
and runnpm start
- Visit localhost:3000
This is currently just an MVP build. The next steps for this project include:
- Implementing the
usePlayable
hook to check if the user has already played in the current browser window and not allow them to play again (ie don't let them reload the page and replay if they mess up) - Setting up a domain for the website
- Implementing GitHub actions as a CI/CD pipeline
- Implementing Docker secrets so that values in
server/index.js
can be const again