PokePoke - a frontend application that connects to a free API called PokeApi

Related tags

React react reactjs
Overview

Technologies

Technologie Techonolgie Technologie

PokePoke

PokePoke is a frontend application that connects to a free API called PokeApi, and facilitates the visualization and search of pokemon through a minimalist interface. This application was developed with the aim of putting into practice React concepts such as the use of Hooks, Custom Hooks and Context. In addition, the use of new technologies: Tailwinds as CSS Framework and Vite as a file packer, an alternative to WebPack.

Features

- Search Bar : By typing the name of the pokemon and pressing enter we can perform a search in the API and display the data of this in case it is found.
- Card : The main presentation of the information is a card where we can see an image of the Pokémon and its basic characteristics.
- Responsive : We implemented a responsive design for smaller screens, this way we maintain an order in the rendered elements.

Captures

Possible Improvements

  • Functionality to compare two or more pokemon at the same time.
  • Improve the design

Latest Captures

You might also like...

Challenge [Frontend Mentor] - In this challenge, JavaScript was used to filter jobs based on the selected categories. Technologies used: HTML5, CSS3 and React.

Frontend Mentor - Job listings with filtering Front-end challenge focused on javascript logic, where a list of fictitious vacancies is presented and t

Apr 13, 2022

A simple demo of React Lottie power to 1st Loggi Frontend Show & Tell

Loggi Frontend Show & Tell - Animações com React Lottie A simple demo of React Lottie power to 1st Loggi Frontend Show & Tell This project was bootstr

Aug 4, 2022

Site para treinar minhas habilidades com o react no frontEnd (totalmente voltado para o aprendizado)

Tutorial Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you ca

Jan 31, 2022

Note Port is a frontend clone of Google Keep. It uses localstorage to save your notes!

Note Port is a frontend clone of Google Keep. It uses localstorage to save your notes!

Note Port About Note Port is a frontend clone of Google Keep. It uses localstorage to save your notes! Tech Stack React Screenshots Things I want to a

Sep 10, 2022

💸 Use case style digital image marketplace like nft. I developed this system by gathering a lot of my frontend/backend knowledge

💸 Use case style digital image marketplace like nft. I developed this system by gathering a lot of my frontend/backend knowledge

❗ WARNING This project is just an educational system, NOT a system made to carry out large transactions and with the same focus as nft. I developed th

Aug 30, 2022

A web application to search all the different countries in the world and get details about them which can include languages, currencies, population, domain e.t.c This application is built with CSS, React, Redux-Toolkit and React-Router.

A web application to search all the different countries in the world and get details about them which can include languages, currencies, population, domain e.t.c This application is built with CSS, React, Redux-Toolkit and React-Router.

A web application to search all the different countries in the world and get details about them which can include languages, currencies, population, domain e.t.c This application is built with CSS, React, Redux-Toolkit and React-Router. It also includes a theme switcher from light to dark mode.

Jun 5, 2022

This is a calculator application. The user can do some calculations on this application.

Math Magicians This is a calculator application. The user can do some calculations on this application. Built with: Reactjs Redux Live Live demo deplo

May 15, 2022

A web application for a company that provides commercial and scientific space travel services. The application allows users to book rockets and join selected space missions.

Space Travelers' Hub A web application for a company that provides commercial and scientific space travel services. The application allows users to bo

Oct 14, 2022

A free book that talks about design patterns/techniques used while developing with React.

React in patterns 📚 A free book that talks about design patterns/techniques used while developing with React. Book GitBook Web PDF Mobi ePub Translat

Jan 7, 2023
Comments
  • Fixed: Bug

    Fixed: Bug

    Bug: Again the bug is app crashed when user press enter with a space or spaces in search input. Fix: Trim down the trailing and leading spaces from search

    opened by Oggy107 3
Owner
@Encoding
Systems Engineering student, full stack developer. Passionate about programming new applications that optimize processes.
@Encoding
GitHub https://pokepoke-search.netlify.app/
A simple pokedéx build with Nextjs and PokéAPI

Pokédex A simple pokedéx build with Nextjs and PokéAPI View Demo · Report Bug · Request Feature Table of Content About The Project Built With Getting

Louis 6 Dec 27, 2022
Its Amazon-like E-commerce store is called shopping-spree!

Its Amazon-like E-commerce store is called shopping-spree! The technologies used for this Project are React.js Frame work Next.js, MongoDB For Database, Mongoose, Material UI and JWT for Authentication Functions and Context API for managing the state Across the Application! where I've Implemented many Functionalities like ADD to Cart, Login, Register, with Next-Authentication, Shipping Screen, Order Details Screen, and Check-out Screen and UPdate the Profile Section Page!

null 1 Dec 18, 2021
This is a custom recipe app called chefMaster. which contains a lot of interesting such as many apis requests, filter, search , add posts. Property design

In the project directory, you can run: npm start Runs the app in the development mode. Open http://localhost:3000 to view it in the browser. The page

Andrew Smal 0 Nov 9, 2022
An application that has a frontend (user interface) that allows you to create, read, update or delete (CRUD) products using an API in which you can also create, read, update or delete products.

CRUD app with React and Firebase 9 An application that has a frontend (user interface) that allows you to create, read, update or delete (CRUD) produc

Júlio Bem 3 Sep 28, 2021
Single Page Application built using React, Context API and OMDb API.

Movie Search App This project is a React application with functions to search for movies and add movies to favorites using OMDb API. Home Page Favorit

Efecan Pınar 24 Sep 6, 2022
A frontend Framework for building B2B applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design

react-admin A frontend Framework for building data-driven applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Materi

marmelab 21.2k Dec 30, 2022
Platzi Master Frontend Test

frontend React Curriculum vitae Crear tu curriculum vitae en React, analiza la estructura propuesta e inspirate para mostrar tu información. Retos Cre

Platzi Master 25 May 4, 2022
A graphical frontend for exploring your org-roam Zettelkasten

org-roam-ui: an org-roam frontend Org-Roam-UI is a frontend for exploring and interacting with your org-roam notes. Org-Roam-UI is meant a successor o

Org-roam 1.5k Jan 4, 2023
This is my portfolio GitHub clone website. The frontend is build using NextJS and TailwindCSS.

Github Clone Portfolio Website Tech Stack used: NextJS Tailwind CSS The contact form in this website is connected to Notion. If you want to integrate

Unnati Bamania 22 Oct 5, 2022
frontend-matong-admin

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 2 Dec 21, 2021