https://github.com/aviknayak22/giphy-ui-clone
This repo contains the code for GIPHY Website clone made using React and Tailwind
https://github.com/aviknayak22/giphy-ui-clone
context-api giphy-api react react-hooks react-icons react-router tailwindcss
Last synced: 3 months ago
JSON representation
This repo contains the code for GIPHY Website clone made using React and Tailwind
- Host: GitHub
- URL: https://github.com/aviknayak22/giphy-ui-clone
- Owner: AvikNayak22
- Created: 2024-05-15T19:10:49.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-16T07:25:49.000Z (about 2 years ago)
- Last Synced: 2025-06-23T12:43:47.380Z (about 1 year ago)
- Topics: context-api, giphy-api, react, react-hooks, react-icons, react-router, tailwindcss
- Language: JavaScript
- Homepage: https://giphy-clone-1.netlify.app/
- Size: 112 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# GIPHY Clone
A web application clone of GIPHY, allowing users to explore trending GIFs, search for GIFs by category or query, view single GIF details, and manage favorite GIFs.
## Screenshot
## Features
- Browse trending GIFs
- Search for GIFs by category or query
- View details of individual GIFs
- Add GIFs to favorites
- Responsive design for seamless experience across devices
## Technologies Used
- React.js
- React Router
- HTML5
- Tailwind CSS
- Giphy API
## Installation
1. Clone the repository:
```
git clone https://github.com/AvikNayak22/GIPHY-UI-Clone.git
```
2. Install dependencies:
```
cd GIPHY-UI-Clone
npm install
```
4. Configure API Keys:
- Obtain the GIPHY API key by following the [docs](https://developers.giphy.com/docs/api/).
- Create a `.env` file in the root directory of your project and add the following:
```
VITE_GIPHY_KEY = your_giphy_api_key
```
6. Run the development server:
```
npm run dev
```
## Contributors
- Avik Nayak (@AvikNayak22)