We want to add react storybook for reusable components. These are components that can be found in packages/frontend-app/src/app/components.

We want the Discover page, which is the homepage of our web app mobile responsive. Please reach out to me if you have questions

TODO

• This page should be responsive on all mobile devices
• This page should be responsive on regular desktop screens
• This page should also be responsive and display properly on very large screens i.e monitors
• Please rely on tailwind's responsive classes as much as possible

N:B - This does not include making the Player responsive

Use the current jest setup to add necessary tests for the third-party integrations

We need to clear the web pack cache anytime we change contents. This should happen on the server side.

MORE DETAILS ARE TO BE ADDED SOON.

We want the music port player to play a list of songs sequentially one after the other. Basically, the player should act like every other public player e.g Spotify music player

Acceptance Criterias

• The player should accept a list of songs with their URLS and play them sequentially
• The play, pause and forward control buttons of the player should work
• The volume button of the player should work
• The player should be visible across multiple pages and music should not stop when navigating between pages
• Fullscreen not supported for now

We want the Select and Input component's height to match that of the Button component. This means a medium sized Select & Input component should match that of a medium Button and same applies to the large size variant.

Acceptance Criteria

• The size prop of the select component should only support medium | large
• The size prop of the input component should only support medium | large
• A medium sized input component should have the height of a medium sized button
• A medium sized select component should have the height of a medium sized button
• A large sized input component should have the height of a large sized button
• A large sized select component should have the height of a large sized button
• The storybook should be updated to reflect this change (if applicable)

Currently, we don't have a way to handle migrations and it is super important we tackle this.

We want to implement scripts to

• Run migrations (Up and down migrations)
• Create a migration file
• Test migrations

Sample link ==>https://music.apple.com/us/playlist/acoustic-r-b/pl.7378e49b2bc74ec186547e8185ee913f

We want the Table component to be redesigned to look like that of Apple music.

Acceptance Criteria

• The table should have dark and light grey colors based on the index of the row. Even rows should have dark grey while odd rows should be lighter grey
• When hovering on a row, it should be light grey
• Only the table headers should have a clear seperator like the apple music design

The select component is a bit distorted and grows as its content grows.

Expected behavior

We want the Select component to take the size of its parent and its content should be displayed with an ellipsis if too long.

Currently, frontend developers who do not want to start the API server cannot contribute to the app.

I personally do not think that this is fair as the app currently caters to full-stack and backend devs.

Frontend devs should be able to contribute to the repo without needing to start the api server.

Approaches

1. We can set up a staging environment and a node script on the frontend package so frontend devs can start up the app properly (I prefer this)
2. We can also mock API responses on frontend and setup a node script (A bit technical if we want this to be effective and be in sync with the graphQL schemas)

This should be a POC

We want to add support for youtube music in our list of streaming services. This requires both frontend and backend work.

We want to rename the Input and Select components using our new convention and also write stories for them. Check the acceptance criteria below

Acceptance Criteria

• Rename the packages/frontend-app/src/app/components/Select/index.scss to packages/frontend-app/src/app/components/Select/Select.scss

• Rename the packages/frontend-app/src/app/components/Select/index.tsx to packages/frontend-app/src/app/components/Select/Select.tsx

• Rename the packages/frontend-app/src/app/components/Input/index.scss to packages/frontend-app/src/app/components/Input/Input.scss

• Rename the packages/frontend-app/src/app/components/Input/index.tsx to packages/frontend-app/src/app/components/Input/Input.tsx

• Write a story for the Select component

• Write a story for the Input component

I think it's best if we have a constant package that can be shared across both frontend and backend apps. We can move the playlist variables etc there.

To do this, you will need to create a new constant package

For all the frontend util functions in this folder packages/frontend-app/src/utils, we want to add a corresponding jest unit test file.

E.g we want to have dom.jest.ts file.

Some of the files here packages/frontend-app/src/utils use camelCase, we want these files to be renamed using kebab case

We wanna research proper linting for our Graphql linter. This should be a POC since we don't have a list of rules we wanna follow yet.

However, the goal is to make sure that our graphql schemas are properly written and linted.

When converting a playlist to Youtube Music, an error occurs

We want to implement proper server shutdowns i.e shutdown the server gracefully

We want proper eslint support for a couple of things such as

• import order
• function and class namings
• React lifecycle order

etc.

Since we don't have a full list of eslint integrations we wanna have, this should be a POC of the above and a list of other plugins we deem fit to support.

Currently, we have a delay between the time you click on the OK button of the cookie banner and the time the banner disappears. This is because we wait for the response of clicking before taking the banner off.

Acceptance Criteria

We don't want to have to wait for the response of clicking the OK button. Do not display the cookie banner immediately the OK button is clicked.

When searching for a song on youtube, the search functionality does not work properly. Hence, the songs imported/exported from youtube are never accurate in most cases

Expected behaviour

Youtube search should work like every other third-party streaming service. We should get the appropriate songs and they should show up properly when imported or exported.

Currently, we don't have error reporting. Hence we want to implement error reporting using Rollbar free tier.

This should be a proof of concept before the main implementation begins

We want to move the Table component into storybook

Acceptance criteria

• The packages/frontend-app/src/app/components/Table/index.tsx should be renamed to packages/frontend-app/src/app/components/Table/Table.tsx
• We wanna have a story for the Table component

• Set the player to be visible with the current song after refreshing the page