SixStringsCoder / giphy_API_app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Gotta Gif It

Introduction

Title: Gotta Gif It

by Steve Hanlon

Gotta Gif It is a web app that displays animated GIFs and GIF Stickers supplied by Giphy.com's API.

desktop view

An API get request is made using Axios to return 24 GIFs that match the search query provided by the user.

The Search interface has a search input at top which is used to retrieve search results via the Giphy API call. It then displays all images. I've implemented w3schools toggle switch which sets the Request URL to GIFs or Stickers.

desktop view

error screen is no results are returned

Search feature

Click here to see the component and data break down of the app.

Click here to see pictures of the website's Responsive Design.


Start-up Server

To run the server, NPM or Yarn must be installed.

Open up the terminal and go to the project directory. Inside of the project directory, run:

npm install

npm start

If you have Yarn installed run:

yarn start

This project was built using Create React App. For complete technical details click Create React App


##### Technical Components - CSS Grid, Flexbox and Media Queries used to build the _responsive features_. - JavaScript (ECMASript 6) - React 16.5.2 - Axois for
##### Articles and Tutorials

Tutorials, articles and docs used while building this app.


#### Picture of Data and Components Breakdown ![breakdown]()

Pictures of UI

Phone

phone view

Tablet

tablet view

Desktop

desktop view

Future Features

About


Languages

Language:CSS 41.9%Language:JavaScript 41.4%Language:HTML 16.7%