https://github.com/saranshbansal/sbansal-giphy-app
This is a cool standalone gif search application built on top of ReactJS. It uses the popular Giphy endpoints to source the data.
https://github.com/saranshbansal/sbansal-giphy-app
es7-javascript gifs javascript react scss
Last synced: 3 months ago
JSON representation
This is a cool standalone gif search application built on top of ReactJS. It uses the popular Giphy endpoints to source the data.
- Host: GitHub
- URL: https://github.com/saranshbansal/sbansal-giphy-app
- Owner: saranshbansal
- Created: 2019-12-01T05:04:16.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2019-12-01T05:20:17.000Z (over 5 years ago)
- Last Synced: 2025-01-05T20:26:08.752Z (5 months ago)
- Topics: es7-javascript, gifs, javascript, react, scss
- Language: JavaScript
- Homepage:
- Size: 229 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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 ?
- Visit https://developers.giphy.com
- Signup and create a new app to get a beta API Key
- Read the docs https://develope
## 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](https://github.com/facebook/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](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 |