Skip to content

Gif-Ninja is Gif collection website made with the GIhPY api .This project has multi page layout build with the help React router Dom for Routing of the pages and its deployon the Netlify server

Notifications You must be signed in to change notification settings

swappy-2003/GifNinja

Repository files navigation

GifNinja

Welcome to GifNinja, a modern web application for discovering and sharing GIFs. Built with React and Vite, GifNinja provides an engaging interface to browse trending GIFs, view individual GIF details, and manage your favorite GIFs.

Features

  • Trending GIFs: Browse the latest trending GIFs with a clean and responsive interface.
  • GIF Details: View detailed information about each GIF, including its source and creator.
  • Favorites: Add GIFs to your favorites for easy access later.
  • Related GIFs: Discover related GIFs based on the one you're currently viewing.
  • Responsive Design: Optimized for both desktop and mobile views.

Technologies Used

  • React: JavaScript library for building user interfaces.
  • Vite: Fast build tool and development server for modern web projects.
  • Giphy API: API used to fetch GIFs.
  • React Router: Library for handling routing in the application.
  • React Icons: Library for using popular icons in the project.

Getting Started

To get started with GifNinja, follow these steps:

Prerequisites

  • Node.js (v14 or higher)
  • npm or yarn

Installation

  1. Clone the repository:

    git clone https://github.com/swappy-2003/GifNinja.git
    
  2. Navigate to the project directory:

    cd GifNinja
    
  3. Install the dependencies:

    npm install
    
  4. Set up environment variables:

    Create a .env file in the root directory and add your Giphy API key:

    VITE_GIPHY_KEY=your_giphy_api_key
    
  5. Run the development server:

        npm run dev
    

Building for Production

To create a production build, run: ```bash
npm run build

The production files will be generated in the dist directory. Folder Structure public/: Contains static assets like images and the favicon.

src/: Contains the source code for the application.

components/: Reusable React components.

Context/: React context for managing global state.

pages/: React components for different pages of the application.

vite.config.js: Vite configuration file.

index.html: The main HTML file.

Contributing

Contributions are welcome! Please follow these guidelines:

Fork the repository.
Create a new branch for your feature or fix.
Make your changes and commit them.
Open a pull request describing your changes.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Contact

For any questions or feedback, feel free to reach out:

GitHub Issues
[email protected]

🔗 Links

linkedin twitter

About

Gif-Ninja is Gif collection website made with the GIhPY api .This project has multi page layout build with the help React router Dom for Routing of the pages and its deployon the Netlify server

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published