Search photos, videos & GIFs in one place — powered by Unsplash, Pexels & Giphy APIs.
Media Search is a responsive media discovery app that lets users search across photos, videos, and GIFs simultaneously. Results are fetched from multiple third-party APIs and displayed in a clean, unified grid with infinite scroll and a persistent local collection.
- 🔎 Unified search — one query, three media types (photos, videos, GIFs)
- 📑 Tab switching — switch between Photos / Videos / GIF results instantly
- ♾️ Infinite scroll / Load More — paginated API calls with
appendResults - 💾 Collection system — save/remove items, persisted via
localStorage - 🔔 Toast notifications — success/error feedback via
react-toastify - 📱 Fully responsive — mobile-first grid layout (1 → 5 columns)
| Layer | Technology |
|---|---|
| Framework | Next.js (App Router) |
| Language | JavaScript |
| State Management | Redux Toolkit |
| Styling | Tailwind CSS |
| APIs | Unsplash · Pexels · Giphy |
| Notifications | react-toastify |
app/
├── layout.js # Root layout with Navbar + Redux Provider
├── page.js # Entry point → renders HomePage
├── globals.css
├── HomePage/
│ └── page.jsx # Search bar + Tabs + ResultGrid
├── CollectionPage/
│ └── page.jsx # Saved items grid with clear option
├── components/
│ ├── Navbar.jsx # Home / Collection navigation
│ ├── SearchBar.jsx # Controlled input, dispatches query
│ ├── Tabs.jsx # Photos / Videos / GIF tab switcher
│ ├── ResultGrid.jsx # Fetches API, maps results, Load More
│ ├── Resultcard.jsx # Single media card with Save button
│ └── CollectionCard.jsx # Saved item card with Remove button
└── redux/
├── store.js
├── ReduxProvider.js
├── CollectionHydrator.jsx # Restores collection from localStorage
└── features/
├── searchSlice.js # query, activeTab, results, pagination
└── collectionSlice.js # saved items + toast actions
lib/
└── mediaApi.js # API calls to Unsplash, Pexels, Giphy
git clone https://github.com/RishabThapliyal/media-search-nextjs.git
cd media-search-nextjsnpm installCreate a .env.local file in the root:
NEXT_PUBLIC_UNSPLASH_ACCESS_KEY=your_unsplash_key
NEXT_PUBLIC_PEXELS_API_KEY=your_pexels_key
NEXT_PUBLIC_GIPHY_API_KEY=your_giphy_keyGet your free API keys from:
npm run dev| API | Used For | Free Tier |
|---|---|---|
| Unsplash | Photos | 50 req/hour |
| Pexels | Videos | 200 req/hour |
| Giphy | GIFs | 100 req/hour |
- Type any search term in the search bar → hit Search
- Switch between Photos / Videos / GIF tabs
- Click Save on any card → item saved to your Collection
- Visit Collection page to view or remove saved items
- Click any card image/video → opens original source in new tab
Built with ❤️ by Rishab Thapliyal