🪄 Giphy Search

React app for discovering trending and searchable GIFs using the Giphy API.

🌐 Live Demo

---

✨ Features

• 🔍 Search any GIF by keyword or phrase
• 🔥 Discover trending GIFs with no input
• ⚡️ Lazy loading & virtualization for infinite scroll performance
• 📤 Share-friendly interface
• 🎯 Keyboard-friendly search box with autocompletion
• 💾 In-memory caching for previously fetched results (Can be easily substituted by other source of cache)
• 🔬 Fully testable architecture using vitest, @testing-library/react, and ts-mockito

---

✨ Architecture & Design

♻️ Data Layer

• Abstracted with the Repository Pattern via a giphyRepository module, allowing easy substitution of data sources (e.g. REST API, GraphQL, mock service, or static fixtures for testing)

🧱 Feature-based Modular Architecture

• Follows a feature-first folder structure under features/giphy, where each feature encapsulates its:
  • UI components
  • Hooks and state
  • Domain logic and types
  • DI setup and API integration

⚙️ Tech Stack

Tool	Purpose
Vite	Ultra-fast dev/build toolchain
React 18	Component library
React Router v7	Client-side routing
masonic	High-perf masonry layout
@testing-library/react	Declarative test framework
Vitest	Blazing fast unit testing
ts-mockito	Type-safe mocking for unit tests
Heroku	Deployment target

---

🚀 Running Locally

npm install
npm run dev         # start dev server
npm run build       # build production bundle
npm run preview     # preview built version locally