Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/trekhleb/giphygram
🔎 Experimental React application for searching GIF images on GIPHY
https://github.com/trekhleb/giphygram
bootstrap es6 gif giphy giphy-api javascript react react-redux reactjs redux
Last synced: 16 days ago
JSON representation
🔎 Experimental React application for searching GIF images on GIPHY
- Host: GitHub
- URL: https://github.com/trekhleb/giphygram
- Owner: trekhleb
- License: mit
- Created: 2019-01-24T01:18:37.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2019-03-18T21:02:47.000Z (over 5 years ago)
- Last Synced: 2024-10-04T12:57:26.171Z (about 1 month ago)
- Topics: bootstrap, es6, gif, giphy, giphy-api, javascript, react, react-redux, reactjs, redux
- Language: JavaScript
- Homepage: https://trekhleb.dev/giphygram/
- Size: 1.4 MB
- Stars: 25
- Watchers: 4
- Forks: 10
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# GiphyGram App
[](https://travis-ci.org/trekhleb/giphygram)
[](https://codecov.io/gh/trekhleb/giphygram)
> This project is a front-end React application that serves a sole purpose of searching GIF images on [GIHPY.com](https://giphy.com/) using GIPHY [Search API](https://developers.giphy.com/docs/#search-endpoint). The project is implemented using **React** (as a main UI library), **Redux** (for state management), **React Router** (to establish a possibility to extend the application with new internal routes and pages) and **Bootstrap 4** (as a main styling framework).
## Launching the Project
[▶︎ Launch Demo Right in Your Browser](https://trekhleb.github.io/giphygram/) (powered by GitHub Pages)
If you want to launch this project locally please clone/checkout this project to your local folder and then you can run:
```bash
npm start
```
This command runs the app in the development mode. Open [http://localhost:3000](http://localhost:3000) to view it in the browser locally.
The page will reload if you make edits. You will also see any _lint errors_ in the console.
## Running Tests
To launch project tests you need to run:
```bash
npm test
```
This command launches the test runner in the interactive watch mode.
## Building the Project
To create a production ready version of the project you may run:
```bash
npm run build
```
This command 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. The app is ready to be deployed!
## Deploying the Project
For demo purpose the deployment of this project is done using [GitHub pages](https://pages.github.com/) and [gh-pages](https://www.npmjs.com/package/gh-pages) npm module in particular. You may deploy the project by making sure that you have `gh-pages` branch in your fork on GitHub and by running:
```bash
npm run deploy
```
This command will create a production build of the project and will commit and push the contents of `build` folder to the `gh-pages` branch. Once this branch is set up as a target branch for GitHub pages you'll be able to see project demo similar to the [existing one](https://trekhleb.github.io/giphygram/).
## Project Continuous Integration
Current project is integrated with [Travis](https://travis-ci.org/trekhleb/giphygram) and [Codecov](https://codecov.io/gh/trekhleb/giphygram) services. Travis service launches project build and tests for every new commit and pull request to make sure that things are not broken. Codecov service reports code coverage percentage to see how reliable and stable the process of development is.