AlbumTalk is a dynamic web application designed for music enthusiasts to write, share, and discuss reviews of music albums. It serves as a community platform where users can discover new music, express their opinions on albums, and engage in meaningful discussions with fellow music lovers. The application aims to foster a vibrant community centered around music appreciation and critique.
AlbumTalk (David Bowie edition) is a pilot to test the concept on a smaller scale This special edition of AlbumTalk focuses exclusively on David Bowie's extensive discography, providing a rich and immersive experience for both longtime fans and newcomers. Users can review, rate, and discuss albums in David Bowie's extensive catalog, as well as follow other users.
- AlbumTalk (David Bowie edition)
The backend api that is used by AlbumTalk is documented here
- View and explore albums through lists, including most-rated ones.
- Interact with albums by liking favorites and leaving reviews.
- Use visual ratings to provide feedback.
- Access and read specific reviews for albums.
- Browse lists of reviews.
- Easily find a specific user's reviews.
- Write, edit, and delete comments on reviews.
- Create and update a user profile.
- Access user statistics.
- Follow and unfollow users, with plans to view followed users' reviews.
- Navigate seamlessly between pages with ease.
- Use infinite scroll functionality for continuous browsing.
- Search for reviews and albums efficiently.
- Edit and delete personal reviews or comments.
- Create accounts and manage login securely.
- Update credentials as needed.
The API and Frontend of this project was planned using Agile methodology and MoSCoW prioritization on github projects.
The user stories project can be found here
Mobile
Desktop
Project user stories can be found here
| Epic | User Story | Comment |
|---|---|---|
| Authentication | Create Account | #5 |
| Authentication | Update User credentials | #27 |
| Authentication | Log in | #6 |
| Navigation | Navigate easily between pages | #21 |
| Navigation | Infinite scroll functionality | #20 |
| Albums | Album List | #30 |
| Albums | List of most rated albums | #25 |
| Albums | Like favorite albums | #32 |
| Write review | Write a review | #7 |
| Write review | Visual rating | #50 |
| View reviews | View album specific reviews | #31 |
| View reviews | List reviews | #17 |
| View reviews | View a review | #9 |
| Edit and delete review | Edit a review | #10 |
| Edit and delete review | Delete a review | #11 |
| Comments | Edit a comment | #15 |
| Comments | Write a comment | #13 |
| Comments | Delete a comment | #14 |
| Follow/unfollow | Follow and unfollow users | #24 |
| Follow/unfollow | View followed users reviews | #19 |
| Profile page | Edit profile | #26 |
| Profile page | User statistics | #23 |
| Profile page | View profile page | #22 |
| Search | Search for reviews and albums | #12 |
The design takes heavy inspiration from the minimalist, avant-garde aesthetic of the David Bowie album Station to Station's album cover. This is reflected in the typography, color palette, layout, and overall mood of the website. The result is a modern, immersive site that pays homage to David Bowie's bold and innovative artistic identity.
-
White for backgrounds to evoke the album's clean and modern feel.
-
Light red for backgrounds for reviews
-
Light blue for backgrounds for comments
-
Black for bold contrasts in typography.
-
Deep Red accents inspired by the subtle use of red tones in the album's design.
The choice of the different backgropund colors for different sections is aimed at creating clear visual separation and enhancing the user’s ability to navigate and understand the content.
The primary typeface mimics the stark, geometric sans-serif typography used on Station to Station. The font used is Bricolage Grotesque. For longer texts like description etc, Courier New is used.
All text elements, except for longer texts like descriptitions etc, feature uppercase letters with a condensed spacing, creating a compact and impactful visual.
Inspired by the album cover on Station to Station, words are presented without spaces, creating a unified, continuous text flow (e.g., StationtoStation, DavidBowieAlbums). This is used in the navbar, links, headings etc.
Station to Station - Front cover
Station to Station - Back cover
Since the albums are central, album covers are used on all pages. In addition to album covers and a login page image, no other images are used.
Icons are frequently used on the website. They are used partly on the album page to symbolize functions such as "View reviews," "Add to favorites albums," and "Show description." Some icons have a number next to them indicating the number of reviews or comments. To make it clearer for the user what the icons mean, a tooltip is displayed when the user hovers over the icon with the mouse. Some icons and buttons are only shown when the user is logged in.
Navigation
- Depending on if the user has logged in or not there are also options for Feed, Sign In, Sign Out and Sign Up
- When the user is logged in, the users Avatar is displayed in the upper right corner
- On smaller screens there's a hamburger menu and a slide out menu to the left with the same options and the same logic for login and logout
Note: The feed feature was added after the following screenshots were taken and is therefore not present in the menu on the screenshots.
Home Page / Albums Page
- When the user is logged they can:
- Review and rate albums
- Mark an an album as a favorite
- Remove an album from their favorites
- When the Add review icon is clicked, a text field is shown.
Sign in page
Sign up page
Profile page
- At the top, under the profile's name, it shows how many reviews the user has written, how many followers the profile has, and how many other profiles it follows. Then the profiles' introduction.
- Below the introduction, the user's reviews are displayed.
- On the left side of the page, there is a list of the profile's favorite albums.
- When a user is logged in he/she has the ability to access a dropdown menu with the options:
- edit profile
- change username
- change password
Reviews page
- All reviews are displayed in a scrollable list
- A search field at the top makes it easy to search for an albums reviews
- For logged in users there will be a dropdown menu with options for deleting and edit their own reviews
Add comment
-
All comments are displayed in a scrollable list
-
When the Add comment icon is clicked, a textfield is shown.
Comment page
-
When the user is logged in, a dropdown menu is shown for the users' comments where the user can choose to edit or delete the comment.
Feed page
-
When the user is logged in, the option THEFEED is shown in the NavBar menu.
-
When clicking on THEFEED a list of reviews from the users that the logged in user is following is shown.
AlbumTalk David Bowie edition is a proof of concept for how a forum for discussions about artists and their music could look. The idea is for this concept to develop into a platform for discussions about all artists and their albums. The major change in how this proof of concept appears will be the homepage. Instead of going directly to a list of an artist's albums, it could consist of, for example:
- A search function where you can search for artists or albums and then go directly to that page.
- List of latest reviews
- List of highest-rated albums
- List of most reviewed albums/artists
Proposals for other potential improvements are:
- Review the image handling with regard to performance. In the results from the Lighthouse tests, consistently low performance scores were observed, with image handling being the cause. Currently, images are fetched in JPG format from AudioDB. One solution could be to store the images in a different format and in various sizes when they are retrieved for the first time.
- More information about users, such as favorite artist, etc.
- The possibility to specify a favorite song when reviewing an album
- The possibility to indicate whether you have a certain album on vinyl/CD
- The possibility to send direct messages to other users
- Show a list of logged in users
Displays a media asset, such as images, spinner animations, and messages. Used for displaying a spinner animation when data is loading.
This component displays an avatar image along with optional text content.
Provides a dropdown menu for actions like editing and deleting items.
This is a React component called NavBar that implements a navigation bar for the application. It uses React Bootstrap components and custom styling.
A react component for adding star rating. Used in review for visual rating.
Implements infinite scrolling, loading content as the user scrolls down, enhancing user experience.
- React 18.3.1: JavaScript library for building user interfaces.
- React Bootstrap 1.6.3: React component library that provides Bootstrap components built with React.
- React Router DOM 5.3.0: Routing library for React applications.
- Axios 1.7.2: JavaScript library used for making HTTP requests from both the browser and Node.js environment.
- react-infinite-scroll-component 6.1.0: Described in the Components section.
- react-simple-star-rating 5.1.7: Described in the Components section.
Testng, validation and bugs is described in the testing documentation. Manual testing
- Go to the repository you want to fork on GitHub.com.
- Click the "Fork" button in the top-right corner of the repository page.
- Choose where you want to fork the repository (usually your personal account).
- Wait for the fork to be created on GitHub.
- On your local machine, open a terminal or command prompt.
- Navigate to the directory where you want to clone the repository.
- Run the following command, replacing USERNAME with your GitHub username:
git clone https://github.com/USERNAME/repository-name.git
- Press Enter to clone the repository.
Install Dependencies:
npm install
Run Application:
npm start
The api is being hosted and deployed on Heroku:
-
Log in to the Heroku Dahboard
-
Create a New App
- Click New > Create New App
- Choose a name for your app (e.g., your-app-name) and select a region.
-
Set up GitHub integration
- In your app's dashboard, go to the Deploy tab
- Under Deployment method, select GitHub
- Authenticate and search for your repository.
- Click Connect to link the repository.
-
Prepare the application for deploy
- In package.json file, in the “scripts” section, add the following prebuild command:
"heroku-prebuild": "npm install -g serve", - Add a Procfile at the root of the project with the following web command:
web: serve -s build
- In package.json file, in the “scripts” section, add the following prebuild command:
-
Deploy the application
- Automatic deployments
- In the Deploy tab, enable Automatic Deploys if you want Heroku to deploy every time you push changes to the main branch.
- Manual deployment
- If you prefer, deploy manually by clicking Deploy Branch under Manual Deploy.
- Automatic deployments
-
Test the deployment
- Open the application
- Click the button that is shown after the deployment or click the button "Open app" in the upper right corner.
- Monitor logs
- In the More dropdown, select View Logs to troubleshoot any issues.
- Open the application
-
The live app can be found here.
This project has greatly benefited from the educational resources and example projects provided by the Code Institute. The following projects were particularly influential in shaping the development of this application:
- Django REST Framework Example Project: This practical example from the Code Institute served as a crucial reference for constructing Web APIs using the Django REST framework. It provided a solid foundation and template for implementing best practices in API development with Django and Python.
- Moments Project: The Moments project, another invaluable resource from the Code Institute, demonstrated the creation of a full-stack application with a strong emphasis on user experience. This project showcased how to utilize the API developed in the earlier example project, highlighting several key aspects of its design and functionality that were adapted and integrated into this project.
- Some of the reviews and comments were written by ChatGPT.
- AudioDB - Images on the signin/signup page and album cover images.
- Google Fonts - The Bricolage Grotesque fontnand some icons.
- Font Awesome - Icons such as star, search icon and others.
- My mentor, Antonio.
- The Swedish community on Slack, always there to help and support.