Music for a Young Family
Music for a Young Family is a gift that I made for my friends who recently had a child. I wanted to share a list of music that I thought would be suitable for them to enjoy together as a family, and I decided to make it a fun, interactive website instead of a text document. The list of music recordings can be sorted alphabetically, chronologically or randomly, and filtered by genre.
Design Process
I thought this project would be a good chance to practice using a SQL database, so I chose Postgres to store all the music entries. For a prior project, Biome, I used a tool that let me write SQL queries and send them to the database. For this project, I wanted to use an ORM to abstract this process and make it simpler and more reliable. After researching various ORMs, I chose Sequelize to perform this function.
When starting the project, I made a list in a text document of all the music I wanted to put in the database. I knew that it would take a very long time to copy all of this data into a set of SQL insert statements, so I got ChatGPT to do that for me. I checked for errors after it finished, and used the output as the basis for initializing the database.
One of the challenges I faced in this project was learning how to pass data up the component tree in React. This is a situation that should generally be avoided, but I ended up with two sibling components that needed to pass data to each other. The solution to this is to pass a function that updates the parent’s state as props to the child, and then have the child call the function when it needs to update the parent’s state.
After being exposed to Tailwind in my time with BDT, I decided to use it to style this project. I had a very positive experience with it, and I find it works really well for component-based projects. I usually like to add some custom colors to make my site look more unique, and in this case I added a custom breakpoint for very small screens so I could optimize the layout for older phones that my friends use.
I tried a few different layouts for the music entries, and I found the masonry layout to be space-efficient and aesthetically pleasing. I chose a green, orange and yellow color scheme because I thought it would look friendly and comfortable, and my friends are very outdoorsy people. I added some subtle noise texture to the cards and background to give it a more tactile feel, and added a hover animation to the cards to make it look like a physical object. I was inspired by mechanical keyboards when coming up with the visual design.
I deployed the app using docker on my VPS.