Giphy Rest API Search App

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• Instructions
  • Setup Development
  • Run Project
    • Static Server
  • Deploy Project
• Useful resources
• Author

Overview

The challenge

• Build an Angular / React, or Vue web app
• Consume Giphy REST Api for search
• The app should deal with data using Redux design pattern on Angular/React
• User should be able to search gifs by names
• Gifs should be presented in a grid
• Data pagination needs to be on. the app should fetch 10 results per call. Once the user scrolls to the end of a page, another batch of data gets loaded and presented to the user
• The app should be deployed to AWS, GCP, Azure, or Heroku
• Whatever framework is used, the app should be built on Typescript (not Javascript)

Screenshot

Links

• Solution URL: Solution
• Live Site URL: Live Site

Instructions

Setup Development

To setup the project for development, please follow these steps:

1. Download my project as a zip or clone my repository using this command

git clone https://github.com/fidellim/Giphy-Rest-API-Search-App.git

2. Once you are on the directory of the project using terminal, install all dependencies:
   1. npm: npm install
   2. yarn: yarn install
3. After that you can start running the project in development server using this command:
   1. npm: npm start
   2. yarn: yarn start

Run Project

Static Server

To run the project in a production build, please follow these steps:

1. Make sure you have a build folder for the project.
   1. npm: npm build
   2. yarn: yarn build
2. Add serve dependency
   1. npm: npm install -g serve
   2. yarn: yarn global add serve
3. Finally, you can run with this command:
   1. npm/yarn: npx serve -s build

Deploy Project

If you would like to deploy the project in Heroku, please follow these steps:

1. Create an account. If you already have, just login.
2. Create a new app using the “New” button in the top right corner of home page.
3. Then, you can enter the name for your app. Choose the region along with it.
4. To deploy your app in Heroku, there are three ways: Heroku Git, GitHub, Container Registry. For this project, I opted for Connect to GitHub.
5. A buildpack is also needed in deploying the react app. By default, Heroku uses their own but this will cause an error if not replaced. In order to do that, go to the Settings tab. Scroll down to the Buildpack section (see screenshot below) and click on the Add Buildpack button. Copy and paste the link send below:

https://github.com/mars/create-react-app-buildpack.git

6. Now, you can go back to deploy tab and connect with your GitHub account.
7. Search for the repository you would like to deploy (make sure to choose the right branch). You could also enable Automatic Deploys. So that every time you push your changes to GitHub, Heroku will automatically redeploy your app.
8. Finally, click the Deploy Branch button. After a few minutes, you will be able to view your app!

Useful resources

• React Switch - package used for creating toggle switch.
• Dark Mode Switcher - implement dark and light theme to app using SCSS.
• Env variables w/o using dotenv - I - hide confidential variable values in React.
• Env variables w/o using dotenv - II - hide confidential variable values in React.
• Search bar inspiration - search bar design in Dribbble.
• ReactDOM.render not supported in React 18 - ReactDOM.render is no longer supported in React 18.
• GIPHY-JS Documentation - documentation of components related to GIPHY API.
• GIPHY Developers - I - documentation of GIPHY API.
• GIPHY Developers - II - documentation of GIPHY API.
• Heroku Deployment - guide on deploying React app using Heroku.
• Redux Toolkit - TypeScript

Author

• Website - Fidel Lim
• Frontend Mentor - @fidellim
• Github - @fidellim