Progress Tracker

[hurry-harry]

This should probably go on a task board etc but i dont have one right now lol

Used to Azure DevOps which has everything in 1 place

TO DO:

• fix track title and artist filtering EDIT: Resolved in Commit: 86ed42e. Reference Update
• <audio> element EDIT: Resolved in Commit: 8e1cb49. Reference Update
• remove same songs but from different album/single EDIT: Resolved in Commit: b375968. Reference Update
• submitting and checking answer EDIT: Resolved in Commit: b2a63c3 Reference Update
• logic and behaviour for going to the next Quiz Track EDIT: Resolved in Commit: f4815ba Reference Update
• timer EDIT: Resolved in Commit: c519ed5 Reference Update
• AuthGuard for when user is not logged in anymore, redirect to Login. Handle checking LocalStorage for authToken/refreshToken then re-log user if they exit then come back EDIT: Resolved in Commit: 3269556 Reference Update
• Look into making this fully FE only, moving the Spotify auth process here and placing the Spotify Secrets etc. in Github Secret EDIT: Resolved in Commit: 3269556 Reference Update
• Handle accents on letters for the autocomplete input. EDIT: Resolved in Commit: 7871e5f Reference Update
• Universal Loading component with modes for whole page display or in component. EDIT: Resolved in Commit: 53e0d0b Reference Update
• Daily Taeyeon Heardle mode EDIT: Resolved in Commit: 7762e96 Reference Update
• Mobile Friendly Design
  • Stats page EDIT: Resolved in Commit: 6a05efd Reference Update
  • Play/Daily page EDIT: Resolved in Commit: 4896377 Reference Update
• Code Clean Up
  • Make Play/Daily Heardle more re-usable components-wise EDIT: Resolved in Commit: 7762e96 Reference Update
    • Very messy right now and things can and should be reused EDIT: Resolved in Commit: 7762e96 Reference Update
• Create a working deployment It is now live and hosted on Vercel Link
  • GitHub Pages? Vercel? Netlify?
• Update README.md
• Add a modal popup informing users to select an answer from the Autocomplete dropdown.
• Create a mode where you can pick and send a specific Song Challenge to friends
• Look into handling Hangul to English Alphabet for filtering.

NOTES:

• I should've used PR references not Commit references

[hurry-harry]

Commit: 045dfcf

DONE:

• fixed autocomplete behaviour and keyboard navigation
• styling with regards to the autocomplete/dropdown and the submit button
• logic and behaviour for selecting an answer

[hurry-harry]

Commit: 86ed42e

• Changed the logic for the filtering of song/artist name for the Quiz. The previous way of filtering was not specific enough. It includes too many items even if your filter terms are specific/exact.

[hurry-harry]

Commit: 8e1cb49

DONE:

• Implement <audio> element and music player feature

NOTE:

• Pausing the audio too fast will result in the audio fade out not working.

WIP:

• Fix pause behaviour issue. Putting a pause on the fix right now.

[hurry-harry]

Commit: b375968

DONE:

• Change logic of adding tracks to the Map of Tracks
  • Added a more robust check for if the track already exists in the Map.
    • Further discussion on this at a separate Discussion
  • Added a check for whether the track has a Spotify Preview URL which is used as the src for the <audio> element.

[hurry-harry]

Commits on Feb 09, 2024 are all about Github Pages commits. Will probably try to revert these since the deployment went sideways. Need to fix build output.

• place build output in /docs/ folder in root
• change target folder to /docs/ folder

Actual coding progress:

• WIP checking quiz answer
• added bootstrap and ngbootstrap for NgbModal for the Quiz Result
  • need to redo styling since bootstrap blew it up
• changed package manager, added NVM and Yarn

[hurry-harry]

• Continued WIP on fixing styling again after bootstrap/ngbootstrap implementation
• Made another repo for coding tips/tricks/tidbits
  • basically an info dump place or like a personal FAQ

Edit: Bootstrap is eating me alive
Edit 2: Some progress in the struggle with bootstrap, kinda feeling like it might be best to "nuke" my previous css styling to sort of start fresh. Idk if its wise.

[hurry-harry]

thought for the day: SASS variables are hard to work with AND to try to get to work in the first place

[hurry-harry]

Commit: 87f6dbc

DONE:

• Fix all styling issues in existing components after bootstrap integration
• Progress with quiz answer modal

[hurry-harry]

Commit: b2a63c3

DONE:

• Finish styling for Quiz Answer result modal
  • for both Correct and Incorrect answers

TO DO:

• If Result modal for last song, disable all modal exit points apart from close button at the bottom and have it redirect to Home DONE

[hurry-harry]

Commit: f4815ba

DONE:

• Implement going to the next song in the quiz after submitting an answer
  • goes for both correct/incorrect answers
  • implemented logic for setting all modal exit points to redirect to Home when its the last song

[hurry-harry]

Commit: c519ed5

DONE:

• Implement timer functionality for the quiz

[hurry-harry]

TO DO: Close the timer setInterval when user exits /play otherwise the timer will keep on going and will display the result modal when it hits 0

[hurry-harry]

this TODO is handled in Commit: 7ff3f00

[hurry-harry]

FEB 16, 2024

Commit: 7ff3f00

WIP:

• Change auth flow to PKCE flow, removing server side needs
• Implement checker if user is still logged in
• Implement refresh token flow
• Implement retry request when user is logged out BUT can refresh access token
• Handle stopping of timer if user exits /play

[hurry-harry]

Commit: 3269556

• Change Spotify login/auth flow to PKCE flow
  • removes the need for my own server while still being secure
  • CON: user has to accept permissions every time they have to login
• Implement AuthGuard
• Add HttpInterceptor for error response checking
  • for catching Error 401 response from Spotify APIs meaning the user is not authorized anymore because their token expired
  • handles automatically tries to refresh the access token if Error 401
• Add checking in the HomeComponent if the user is logged in or still has a valid access token
  • handles automatically setting the user details if token is still valid
  • TODO: Add this to all relevant components
• Add pausing of quiz audio once the user submits an answer or time runs out
  • so the previous audio doesn't bleed over to the next song if it was playing when the above scenario occurs

[hurry-harry]

Commit: 7871e5f

Change logic for the autocomplete filtering for Track name and Artist name in the Quiz to catch characters with accents or Diacritics

• Transforms the filter term, track name, and artist names by normalizing the strings to convert accented characters into regular alphabet and converting the results to lower case
  • normal alphabet is a more common input
  • for example: the track name 'Dákiti' will be caught using the 'Dakiti' filter

[hurry-harry]

Commit: 53e0d0b

Add a LoadingSpinner component to show while waiting for a response from the Spotify API

• in Play and Stats components

[hurry-harry]

Commit: 7762e96

• Implement a Daily Taeyeon Heardle mode
• Refactor Quiz container

[hurry-harry]

Commit: 6a05efd

• Added a mobile friendly design for the Stats page

[hurry-harry]

Commit: 4896377

• Add mobile friendly design for both Play and Daily Heardle pages
• Add an index for Daily Heardle challenge count
• Fix duplicate entry for Top Artists if list is more than 50 items

[hurry-harry]

It is now live and hosted on Vercel at https://taeyeon-heardle.vercel.app/

[hurry-harry]

Done code cleanup and fixed some issues and added QOL improvements to the Daily Heardle mode

[hurry-harry]

Updated README.md