GatsbyJS Crash Course In 2024 - Build a Pokedex

In this Gatsby JS tutorial, learn how to build a Pokedex app step-by-step. We'll cover:

Setting up a new Gatsby project and file structure
Installing and using plugins like Styled Components
Importing and using custom fonts
Querying data with GraphQL and displaying images
Sourcing markdown data and rendering posts with MDX
Building reusable React components for the UI
Adding search and filters with React Hooks
Generating dynamic pages and URLs for each Pokemon
Deploying the finished Pokedex site

Perfect for learning core Gatsby concepts like:

Querying data with GraphQL
Creating pages programmatically
Working with images, fonts, and markdown
Building reusable components
Deploying Gatsby sites
Follow along to level up your Gatsby skills by creating a practical project!

Check Out My Links ⬇️

Repository

00:00:00 Gatsby Pokedex Overview & What is Gatsby?
00:04:00 Project setup & File Structure
00:09:34 Add Styled Components and Introduction to Gatsby Plugins
00:23:25 How to Add Fonts To Gatsby
00:25:44 Gatsby Image Component and Querying Image Data
00:34:21 Fetch All Blogs From GraphiQL and render MDX Files in Gatsby
00:47:31 Fetch A Single Blog Post In Gatsby
00:52:02 Install the PokeAPI and fetch the data
00:58:46 Rendering The Pokemon UI
01:13:40 Create A SearchBar & Dropdown With React Hooks In Gatsby
01:19:36 Adding A Pokemon Filter
01:23:54 Create Dynamic URLs & Individual Pokemon Pages with Gatsby
01:32:17 Finishing off Pokemon Stats Page & Complete Build

[ssssankalpracchewar]

awsome video bro keep up the good work 🥰