Giphy Clone

This project is a clone of the popular website Giphy.com, developed as a practice exercise to hone skills in web development using React and Tailwind CSS.

This Project is bootstrapped with Vite

Features

Features:

1. Search Functionality: Users can search for GIFs using keywords or phrases.
2. Trending GIFs: Display trending GIFs fetched from the Giphy API.
3. Random GIFs: Option to view random GIFs for entertainment.
4. Responsive Design: Ensures a seamless experience across various devices and screen sizes.
5. Tailwind CSS Styling: Utilizes Tailwind CSS for efficient and customizable styling, following modern design principles.
6. Dynamic Content Rendering: GIFs are dynamically fetched and rendered based on user interactions and API responses.

Tech Stack:

• React: Frontend library for building user interfaces.
• Tailwind CSS: Utility-first CSS framework for rapid UI development.
• Giphy API: Fetches GIF data to populate the website with content.

How to Run Locally:

1. Clone the repository to your local machine.
2. Install dependencies using npm or yarn.
3. Run the development server.
4. Explore the website, search for GIFs, view trending or random GIFs, and enjoy the experience!

How to Build:

1. Run npm run build to build the project

Project Folder Structure:

src/
  ├── components/
      ├── FilterGif.jsx
      ├── FollowOn.jsx
      ├── Gif.jsx
      ├── GifSearch.jsx
      ├── Header.jsx
  ├── context/
      ├── gif-context.jsx
  ├── layouts/
      ├── app-layout.jsx
  ├── pages
      ├── category.jsx
      ├── favorites.jsx
      ├── home.jsx
      ├── search.jsx
      ├── single-gif.jsx

Contributions:

Contributions are welcome! Feel free to fork the repository, make improvements, and submit pull requests. Whether it's enhancing existing features, fixing bugs, or adding new functionalities, your contributions are valuable in making this project better.