Albumify

This project was created in Next.js and uses the public Deezer api in order to get the information about all the albums. It allows a user to create an account and add albums of their choice to one of two sections: a To Listen, and a Rated section. The first of the two allows the user to view all albums which they would like to listen to in the future. It helps create a space for them where they can visually see all the albums they want to listen to. Once they have listened to one, they can then rate the album in accordance with how much they enjoyed it. Rated albums will then be held in the Rated section, where they are displayed in order of rank (highest first).

It uses firebase for authentication and firestore to store the user data that a user has added.

Features

• Explore: Search for albums via the artist name. You will first need to search for the albums corresponding artist and then select which album you want to view.

• Rate: Allows user to rate album via a 10 point system. This a component created which holds 10 stars and allows the user to select them, defining a rating on click.

• Add To Listen: Albums that a user has not yet listened to, but wishes to in the future can be added to a seperate list which they can they view on their profile

• Share Profile: Showing others your opinion on certain albums is a key and fun concept when it comes to rating things therefore adding a feature which allows users to share their profile was a must. Users can click the Share Profile button in order to share their profile with others. On click the button will append their profile url to their clipboard allowing them to easily give it to their friends

Technologies

• React: A JavaScript library which allows developers to create reusable UI components and efficiently update the UI when data changes through a feature called the virtual DOM.
• NextJS: A popular framework for building React applications
• TypeScript: A superset of JavaScript that adds optional static typing. It helps catch errors early during development by enforcing type checks and provides better tooling support like autocompletion and type inference, making JavaScript development more reliable and maintainable.
• Firebase: A platform by Google for building and managing web and mobile apps. It offers a variety of services like real-time databases, authentication, cloud storage, and hosting, all with easy-to-use SDKs and serverless infrastructure, making it a popular choice for full-stack development.

Future and Conclusion

Although this project works, however in its current state incomplete, there are many more features to be added. There are also many bugs which I am aware off and was very good practice in debugging and figuring out how to solve them. Over the course of making the project my knowledge of typescript next.js and web development as a whole changed, meaning alot of the ways in which I did things where not the correct or most efficient way, however at the time they worked so I stuck with them. Another thing to note is the responsivesness as a whole for the website. It's responsivess is very bad and this is mainly due to the fact that during this project I was also learning a lot about tailwind css. My knowledge for the webiste on a mobile device is that it will not work that well. However these are all things that I plan to implement and take with me for future projects.