Challenge with an irregular grid
I made a basic API with GET + POST request while working through what the .json of each video snipper would include
This parser takes the URI of youtube videos to extract the image URL.
I then worked on a simple parser to extract the youtube image URL
Surprisingly youtube's URI contains direct link to the thumbnail without accessing youtube's API!
After defining the CSS styling of cards in different states, I then hooked up those styles onto a useEffect and onClick event listener. Since a card has 3 different states, I needed to add a conditional statement to evaluate the card’s current state.
The last thing was to fine tune the timed fading effect
There needs to be enough visual contrast between faded for 3 days vs 7 days+. I used a simple opacity blur and the Framer motion library for this MVP but I hope to explore cooler effects in the future!
Retrospective
Lot more features to build and a lot more UI to explore!
To expand on the project, I want to build out a local database so that I can implement other functionality like tag system and search functionality as well. Using the youtube API would be a cleaner and more efficient way to get a larger volume of data.
Since this is my first full-stack app, there are lots of things I want to improve such as reducing unnecessary components and adding controllers on the server side,. Will keep working and refactoring this project!