Skip to content

This is a cool standalone gif search application built on top of ReactJS. It uses the popular Giphy endpoints to source the data.

Notifications You must be signed in to change notification settings

saranshbansal/sbansal-giphy-app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

The App

Helping engineers search for the best GIFs around internetown by building GIFted. A fast, easy to use GIF app that runs on all modern browsers built using modern web technologies.

Overview

The App includes three major components:

  • SearchContainer - A carousel like, horizontally scrolling component for performing manual search.
  • Trending - A vertically expanding section that shows the most trending GIFs.
  • RandomGif- A section to generate a random GIF.

To reduce the amount of data, infinite scrolling has been implemented in the Trendings section. The application will initially load 20 GIFs. As soon as a user reaches the bottom of the screen, the next set of GIFs will be seamlessly loaded.

Also, lazy loading has been implemented while searching manually for GIFs based on keywords. Here, the next 20 GIFs are fetched on click of More... button located at the end of the carousel.

How to fetch GIFs ?

Features

  • Find GIFs using keywords.
  • Find top trending GIFs.
  • Generate a random GIF.
  • Click to Play/Pause any GIF.
  • Responsive and User-friendly UI.
  • Infinite Scrolling on Trending GIFs section.
  • Lazy Loading on Search GIFs section.
  • Uses SASS for keeping the CSS cleaner, modular, and composable.

Setup

This project was bootstrapped with Create React App.

In the project directory, you can run:

yarn install

If you are accessing this project for the very first time, you should perform a yarn install to install all the dependencies listed in the package.json.

yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

yarn test

Launches the test runner in the interactive watch mode.

yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.

Dependencies

Package Version
React ^16.11.0
enzyme ^3.10.0
react-router-dom ^5.1.2
node-sass ^4.13.0

About

This is a cool standalone gif search application built on top of ReactJS. It uses the popular Giphy endpoints to source the data.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published