Build and Deploy A Pokemon App With Next.js 13 (App Directory, Pokemon API)

🎓 Join my learning platform for module based courses, learning exercises, and more: https://coderprep.com/

In this video we create a Next.js 13 project that allows us to search for Pokemon using the Pokemon API (https://pokeapi.co/). The tutorial covers dynamic routing, API calls, server vs client components, and more! This is a great beginner Next.js 13 tutorial and allows you to see the entire development process, starting from scratch to deploying the complete application.

Deployed Application: https://pokemon-finder-phi.vercel.app/
Final Code: https://github.com/coopercodes/Pokemo...

0:00 Project introduction
1:40 Next.js 13 project setup with shadcn/ui
4:10 Setup ThemeProvider with next-themes (Dark mode)
8:55 Create initial page style
12:15 Discussing PokemonGrid and Next.js 13 system design
14:40 Creating PokemonGrid component
25:15 getPokemonList API call to Pokemon API
29:05 Pass list of pokemon to PokemonGrid
31:50 Display Pokemon list data to user
33:30 Filter Pokemon by text input
36:50 Create /pokemonName route page
40:40 getPokemon API call to Pokemon API
43:10 Get Pokemon image with next/image
51:30 Show Pokemon stats to user (hp, defense, etc.)
56:54 Deploy to Vercel with Vercel CLI (Host your app!)