brandon-gs/nextjs-giphy

Web application using Giphy API, Nextjs, SASS, Typescript and Material UI

Giphy API - Brandon GS

Live version: https://nextjs-giphy.vercel.app/

Development tools

• Reactjs / Nextjs
• Javascript / Typescript
• CSS / SASS
• Material UI

Getting started

Clone this repo:

git clone [email protected]:brandon-gs/nextjs-giphy.git
cd nextjs-giphy

Install dependencies:

yarn

Config the .env.development.local file with the correct values

cp .env.example .env.development.local

Run the project

yarn dev

Environment variables docs

Variable name
GIPHY_KEY	GIPHY API Key required to make requests to the GIPHY API. (required)

Questions and Answers

Why use nextjs api routes?

I use nextjs api routes as proxy to consult giphy api. For security reasons I can hide the GIPHY_KEY from the client and all the requests the client would make.

nextjs-giphy's Issues

Create api request to get giphy images with pagination

• Add .env file and .env.example file with GIPHY API KEY

• Create proxy using nextjs api endpoints to call giphy api

• Create ImageCard component

• Create ImageCardList component

• Config react-query to make api calls to api

• Implement Infinite Scroll

• Create GiphyTrending container

• Create GiphySearch container

• Implement responsive design

• Retry get Data component

• Implement like feature

• Deploy it on render or vercel

Create ImageCard component

Create ImageCard component:

• Must use Image component from nextjs
• "liked" prop -> change the color heart if the value is true
• "imageUrl" prop -> image url from giphy or localhost should be allowed