sirLisko / gifday

Your year in gifs...

GifDay

Your year in gifs...

https://gifday.netlify.com

Motivation

I take advantage of this little project to test out a bit more React Hooks, I hope I didn't make any mess 😅 and to (finally) give a spin to Cypress for the integration tests. Probably having a lot of gifs at the same time is not the best for page performance, using videos instead of images is improving the experience but it is still not good enough. Ideally, it would be better paginating them in month views, but this is going to lose a bit the "wow effect" on seeing a page crowded by gifs. Another idea could be serving static images and animating the gif on hover or having a sort of switch for "unleashing the beast" and activating all the gifs at the same time. But also this is losing a bit the "wow effect" mentioned ☝️

The stack

• WebApp scaffolded via Create React App
• Check the syntax and formatting of the JS, via ESLint and Prettier
• Style components with Emotion
• Giphy APIS
• Unit tests with Jest and react-testing-library
• Integration test with Cypress

Improvements

• Add a login system and the possibility to save your gifs, I'd go with Firebase with rebase (as done here WIP)
• Proxy the API call in order not to expose the API key
• Add a spinner while searching for GIF
• Having a fallback for the videos
• Push history on daily GIF
• Incrementally load fetch polyfill only if needed by the browser
• Improve Input, adding a debounce and searching on typing
• Polishing the UI
• Improving metatags and manifest
• Probably I am forgetting a bunch of them :-)

API key

A GIPHY API KEY is needed.

export GIF_API_KEY={token}