Giphy Browser

https://golden-biscochitos-7d719b.netlify.app/

Instructions

1. Have NodeJs 20.17 installed
2. Check out the 'GiphyBrowser' repo
3. run >>> cd GiphyBrowser
4. Run >>> npm i
5. Run >>> npm run dev
6. Access the App at http://localhost:5173

To run the unit tests

1. Run >>> npm run test

Overview

For the challenge, I implemented a simple desktop based Giphy browser that includes

• An app header with basic navigation controls for showing the various pages, along with a search bar for searching Giphy
• Showing the currently trending gifs with basic pagination
• The ability to search from a search page or the app header and see the results with basic pagination
• The ability to save gif ids to indexedDB, these are displayed on the Saved page with pagination. Gifs can be saved / unsaved from any of the pages

Implementation considerations

Tech

The browser was built using a React + TS (SWC) template generated by Vite, the following third party libraries were used:

• MUI
• TanStack Router
• TanStack Query
• FramerMotion
• Dexie
• Sass
• React Error Boundary

TBC

Approach

V2 TBC

Screenshots

V2 TBC