A simple pokedéx build with Nextjs and PokéAPI

Louis

Last update: Dec 27, 2022

Overview

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 Started
- Installation
License
Contact

About The Project

This is a simple but pretty Pokédex that I created in my spare time. It was built using Next.js and the PokéAPI.

Images

Built With

Getting Started

This project uses yarn as packet manager.

Installation

Clone the repo

git clone https://github.com/Louis3797/nextjs-pokedex.git

Install packages
```
 cd nextjs-pokedex
 yarn install 
```
Run on dev
```
 yarn dev
```

See the open issues for a full list of proposed features (and known issues).

License

Distributed under the MIT License. See LICENSE.txt for more information.

Contact

Louis

Project Link: nextjs-pokedex

Twitter-Clone-Nextjs - Twitter Clone Built With React JS, Next JS, Recoil for State Management and Firebase as Backend

Twitter Clone This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn de

Feb 7, 2022

Landing page for any SaaS company, using Nextjs and NextUI

NextJS and NextUI Landing Page Template You can deploy here directly to vercel This is a template for NextJS and NextUI. NextJS NextUI You can see the

Dec 23, 2022

Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.

Material-UI Quickly build beautiful React apps. Material-UI is a simple and customizable component library to build faster, beautiful, and more access

Dec 30, 2022

Enable Fast Refresh for remote data in NextJS.

next-remote-refresh Utilize Fast Refresh for remote data in NextJS. ⚠️ This solution relies on undocumented APIs and may break in future NextJS update

Dec 23, 2022

nextjs-multiple-page-i18n

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Sep 10, 2022

A basic React/NextJS project showing how to use the Flow Client Library (FCL)

How to use the Flow Client Library (FCL) with SvelteKit Everything you need to build a SvelteKit project with the Flow Client Library (FCL). For a Sve

Sep 24, 2022

Clone da GUI do Windows 11 desenvolvida utilizando ReactJS, NextJS, MaterialUI e ReactDND.

Vídeo demonstração Iniciando a execução: npm run dev Frameworks & Bibliotecas: React.js - uma biblioteca JavaScript para a criação de interfaces de us

Dec 19, 2022

Boilerplate de projeto nextjs, com Styled Components e Typescript

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Mar 23, 2022

NextJs + Spring Boot + MySQL

iMusic Website View Demo Description This is a website to liste to music online build with backend Spring Boot, database MySQL, and frontend Nextjs. P

Nov 20, 2022

Comments

Overall Improvments
Hey Louis!

Here are some improvements I made, cause I was bored :p

Hope you'll like the pr.

Make use of semantic HTML

Use proper next/link instead of router.push

Use SWR for fetching and removed zustand (no need for state management)

Updated DEPS.

Organized import exports

Improved Layout

Use static pages for pokemon/[name], no need to server render as nothing changes.

Improved CSS spacing and shadows

Use next/image.

Added preconnect to required origins.

Reduce data passed to page by normalizing Pokémon.

Fixed Scroll Position when navigating between pages.

You can inspect it live here.
opened by mmaaaaz 4

Owner

Louis

A german cs student who likes to build fullstack applications

GitHub https://nextjs-pokedex-louis3797.vercel.app/

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

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.