https://github.com/codeslator/react-gif-expert-app

GifExpertApp from Fernando Herrera's React Course. This app was created with React + Vite + TypeScript using PrimeReact to create UI and testing with Jest + React Testing Library.
https://github.com/codeslator/react-gif-expert-app

jest primereact react reacttestinglibrary typescript vite

Last synced: about 2 months ago
JSON representation

GifExpertApp from Fernando Herrera's React Course. This app was created with React + Vite + TypeScript using PrimeReact to create UI and testing with Jest + React Testing Library.

• Host: GitHub
• URL: https://github.com/codeslator/react-gif-expert-app
• Owner: codeslator
• Created: 2024-05-20T19:28:12.000Z (8 months ago)
• Default Branch: devel
• Last Pushed: 2024-10-28T22:11:22.000Z (3 months ago)
• Last Synced: 2024-10-28T23:20:02.017Z (3 months ago)
• Topics: jest, primereact, react, reacttestinglibrary, typescript, vite
• Language: TypeScript
• Homepage: https://gif-expert-app-zeta-nine.vercel.app
• Size: 162 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# ⚛️ GIF Expert App - React

Explore the world of GIFs in seconds! Use the search bar to find GIFs in real-time. This app was created using **React 18**, **PrimeReact** and **React Router Dom**.

Example from **React: De cero a experto (Hooks y MERN)** course by **Fernando Herrera**.

**Demo**: https://gif-expert-app-zeta-nine.vercel.app

### 🚀 About:

- Created with **React 18** + **Vite** + **TypeScript**

- Routed with **React Router DOM**

- Use **PrimeReact** + **PrimeBlocks** to create UI

- Custom hooks

- Responsive Design (mobile first)

- Fetch to **Giphy API**

- Testing with **Jest** and **React Testing Library**

- Deployed in **Vercel**

### ✅ Features:

- Type a word in the search bar and get your GIF's

- List 12 GIF\s in a grid.

- Display search history.

- Reset all search.

### 📋 Requirements

To run this app, you must have installed Node & NPM.

### ⚙️ Installation

This README has the instructions to install and execute this webapp. The first step is clone the repository from GitHub.

```

https://github.com/codeslator/react-gif-expert-app.git

```

After clone the repository, you must to install all dependencies.

```

cd gif-expert-app

npm install

```

When dependencies are installed, before run the webapp in local, make sure you have the .env file in the repository with the following variables:

```

VITE_GIPHY_API_KEY='your apikey here'

```

Finally, you can execute the Vite App using the following command:

```

npm run dev

```

If application started correctly, will be listen in 5173 port. Open in your Browser the following URL: http://localhost:5173/