Study-Fi
Overview
Project Study-Fi is a single page web application, targeted towards students and/or professionals wanting to listen to calm beats to improve their focus. This is accomplished by having our music library filled with lo-fi hip-hop beats. Further, Study-Fi users are also able to create playlists, like songs, and play songs.
Project Study-Fi was built by two developers, Brennan Flood, and I. My role in the project was very hands on, I lead the design and build of the backend, as well as the basic front-end structure. From this experience, I learned that the stack we chose, the MERN stack (MongoDB, ExpressJS, ReactJS, and NodeJS) with GraphQL and Apollo Client, was very easy to work with!
Note: This project was taken offline when Heroku made changes to their Free tier. Currently, I do not have a plan to bring this project back online, but I am leaving all of my lessons learned and source code up for viewing!
Challenges and Solutions
Challenges
- Back-end Design
- Front-end Structure
Back-end Design
Designing the back end took some research and thinking. Since this project was built using MERN stack with GraphQL and Apollo Client, I had to become familiar with how GraphQL worked with Express, and MongoDB.
Typically, the MERN stack is not used for applications that have too many connecting tables. GraphQL, fixes that issue by making it easy to query for all the data needed, and to write mutations to MongoDB. Thanks to GraphQL, we were able to construct GraphQL mutations and queries using ExpressJS, all while having multiple Collections, each for their own purpose, like playlist data, song data, user data, etc.
Resolving the mutations is what took is the longest, since we had to query and mutate data from MongoDB and AWS S3. Once the backend started coming together, using these queries and mutations from the front end went extremely smoothly.
Front-end Structure
Designing the front-end structure took some thinking, but after a few smaller components were built, the overall user interface started to come together. Brennan and I had ended up working well together, as I was able to delegate the work evenly. I built the structure of components, their front-end queries, and Brennan would finish up the design with the data provided, and make Study-fi seem like Spotify, our inspiration. At the time of the built, he had stronger skills when it came to CSS3 than me, so he took over the main front-end design.