K-Bops

1. CONTEXT

2. PROCESS

3. DESIGN

4. DELIVERABLES

5. LEARNINGS

K-Bops

A music listening and filtering application with the latest K-Pop hits from 2022-2024.

Duration

March 2024 - April 2024
3 weeks

Location

Providence, RI

Disciplines

Web Design

Development

Tools

React

Figma

1. CONTEXT

Why this Project?

The goal of K-Bops was to practice conducting competitive analysis and enhance frontend development skills by creating a React application with filtering functionalities. This project served as my first experience with React, presenting various technical challenges due to my limited experience with JavaScript.

2. PROCESS

Competitive Analysis

For the competitive analysis, I examined popular websites across social media, e-commerce, and music listening domains, focusing on functionality, visual design, and accessibility.

From a user's standpoint, I found the following elements most helpful during my process of favoriting an item and hoped to incorporate them in my app:

Direct access to Favorites through the navigation
Confirmation message when user favorites an item
Diverse filtering options
Discoverable Reset filters

3. DESIGN

Design & Code Architecture

In developing the K-Bops interface, I drew inspiration from Spotify's visual design, featuring a left sidebar and main content area. Functionality-wise, the application allowed users to filter songs by artist, release year, and song type, with additional features for favoriting and unfavoriting songs.

Organization of Components

Components such as Card, Buttons, and Icons were utilized to manage display and interaction elements efficiently.

Flow of Data

Data flow between components ensured seamless integration and functionality, facilitating the effective display of filtered songs.

4. DELIVERABLES

Presenting K-Bops

This application incorporated three types of filters and a favoriting aggregator, allowing users to filter songs by year, song type, and artist. The intuitive interface provided direct access to favorites, confirmation messages for favorited items, and discoverable reset filters.

See final application here 🡕

5. LEARNINGS

Reflection

This was a very challenging project given my background in React. I learned a lot about useStates, components, props, and how to abstract and better organize my code.
I had initially added useStates for my pill buttons so that the user would at least know which filters they applied, however these visual indicators were removed as soon as I added functionality since I was unable to figure out how to combine both. In my next projects, I hope to not compromise usability for functionality.
If I had more time and a deeper understanding of React and JavaScript principles, I would add a clear filters button that simply clears all the filters applied on the page. For example, if an artist Icon is clicked and a year and/or song type filter was applied, the clear filters button should remove the year and song type filters and only display all the songs by that artist.

Overall, I'm satisfied with the work I was able to accomplish within the given timeframe!