{"id":22300192,"url":"https://github.com/codeslator/react-gif-expert-app","last_synced_at":"2026-04-12T12:35:06.116Z","repository":{"id":248603636,"uuid":"803468266","full_name":"codeslator/react-gif-expert-app","owner":"codeslator","description":"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.","archived":false,"fork":false,"pushed_at":"2024-10-28T22:11:22.000Z","size":166,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"devel","last_synced_at":"2025-03-25T23:25:02.214Z","etag":null,"topics":["jest","primereact","react","reacttestinglibrary","typescript","vite"],"latest_commit_sha":null,"homepage":"https://gif-expert-app-zeta-nine.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codeslator.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-20T19:28:12.000Z","updated_at":"2024-10-28T22:11:26.000Z","dependencies_parsed_at":"2024-10-28T23:30:17.509Z","dependency_job_id":null,"html_url":"https://github.com/codeslator/react-gif-expert-app","commit_stats":null,"previous_names":["codeslator/gif-expert-app","codeslator/react-gif-expert-app"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/codeslator/react-gif-expert-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeslator%2Freact-gif-expert-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeslator%2Freact-gif-expert-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeslator%2Freact-gif-expert-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeslator%2Freact-gif-expert-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codeslator","download_url":"https://codeload.github.com/codeslator/react-gif-expert-app/tar.gz/refs/heads/devel","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeslator%2Freact-gif-expert-app/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266726591,"owners_count":23974924,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-23T02:00:09.312Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["jest","primereact","react","reacttestinglibrary","typescript","vite"],"created_at":"2024-12-03T18:09:51.679Z","updated_at":"2026-04-12T12:35:01.052Z","avatar_url":"https://github.com/codeslator.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ⚛️ GIF Expert App - React\nExplore 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**.\n\nExample from **React: De cero a experto (Hooks y MERN)** course by **Fernando Herrera**.\n\n**Demo**: https://gif-expert-app-zeta-nine.vercel.app\n\n### 🚀 About:\n\n- Created with **React 18** + **Vite** + **TypeScript**\n- Routed with **React Router DOM**\n- Use **PrimeReact** + **PrimeBlocks** to create UI\n- Custom hooks\n- Responsive Design (mobile first)\n- Fetch to **Giphy API**\n- Testing with **Jest** and **React Testing Library**\n- Deployed in **Vercel**\n\n### ✅ Features:\n\n- Type a word in the search bar and get your GIF's\n- List 12 GIF\\s in a grid.\n- Display search history.\n- Reset all search.\n\n### 📋 Requirements\n\nTo run this app, you must have installed Node \u0026 NPM.\n\n### ⚙️ Installation\n\nThis README has the instructions to install and execute this webapp. The first step is clone the repository from GitHub.\n```\nhttps://github.com/codeslator/react-gif-expert-app.git\n```\n\nAfter clone the repository, you must to install all dependencies.\n\n```\ncd gif-expert-app\nnpm install\n```\n\nWhen dependencies are installed, before run the webapp in local, make sure you have the .env file in the repository with the following variables:\n```\nVITE_GIPHY_API_KEY='your apikey here'\n```\n\nFinally, you can execute the Vite App using the following command:\n```\nnpm run dev\n```\nIf application started correctly, will be listen in 5173 port. Open in your Browser the following URL: http://localhost:5173/","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodeslator%2Freact-gif-expert-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodeslator%2Freact-gif-expert-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodeslator%2Freact-gif-expert-app/lists"}