Animal Gif Explorer is a React-based application designed to entertain children in waiting rooms. It utilizes a GraphQL API to fetch and display gifs of various animals such as cats, dogs, elephants, lions, and monkeys. Users can filter gifs by category or through a search input.
- Gif Browsing: Browse gifs across multiple animal categories.
- Search Functionality: Filter gifs by typing part of the animal's name.
- GraphQL Integration: Utilizes a GraphQL API built with Hasura for data retrieval.
- Frontend: React
- API: GraphQL, Hasura
- Others: Docker, Vite, URQL
- Node.js
- Docker
- Remove the
.sample
from.env.sample
file and provide a value for theVITE_GRAPHQL_API_URL
variable
- Clone the Repository
git clone [repository-link]
cd app
- Install Dependencies
npm install
- Run the Application
npm run dev
npm run dev
: Runs the app in development mode with hot-reloading enabled.npm run build
: Compiles TypeScript files and builds the app for production to thedist
folder.npm run lint
: Lints and checks the code for any syntax errors.npm run preview
: Starts a local server for previewing the production build.npm run test:watch
: Runs all test suite in watch mode
- /components: React components used across the application.
- /graphql: GraphQL queries and mutations.
- /pages: React page components.
- /types: TypeScript type definitions.
In Animal Gif Explorer, we aim to provide a seamless and efficient browsing experience, especially when dealing with a large number of animal gifs. This is where react-virtuoso comes into play.
React Virtuoso is a powerful React virtual list component that we have integrated to handle the rendering of our gif timeline. Virtualization is a technique that renders only the items in the list that are currently in the viewport or about to enter it. This means that, instead of loading and rendering every single gif at once – which can be overwhelming for both the browser and the user – react-virtuoso
dynamically loads and unloads gifs as the user scrolls. This results in a significant performance boost, reducing memory usage and improving the responsiveness of the application.
With react-virtuoso
, users experience smooth scrolling regardless of the number of gifs. This is crucial for our application, as it is designed for use in waiting rooms where network conditions can vary and performance is key to keeping children entertained without frustration.
As our application grows and the number of gifs increases, react-virtuoso
ensures that our app can scale without a drop in performance. Additionally, its well-documented API and active community support make it a reliable choice for long-term maintenance and potential feature expansions.