SvelteKit is one of the most exciting frameworks in Web Development. With the success and growth of Next.js (framework built on top of React), SvelteKit is a promising competitor. With SvelteKit, you can create Server Side Rendered pages (SSR), API routes, and a lot more while leveraging the natural and concise syntax of Svelte.
In this video, we’ll create a Pokedex using the PokeAPI. We’ll also use Tailwind CSS and its new Just-In-Time compiler (JIT).
Source Code - https://github.com/jamesqquick/svelte-kit-pokedex
SvelteKit Docs - https://kit.svelte.dev/docs
Vite (SvelteKit Build Tool) - https://github.com/vitejs/vite
PokeAPI - https://pokeapi.co/
Tailwind Setup - https://jsco.dev/blog/how-to-set-up-tailwindcss-with-svelte-kit
- 00:00 - Intro
- 01:00 - What We’ll Build (Pokedex)
- 02:00 - What is Svelte and SvelteKit
- 03:00 - Project Setup and Svelte Kit Intro
- 10:00 - svelte:head
- 12:00 - Svelte Layout File
- 14:30 - Svelte Stores
- 20:00 - Reactivity and Consuming Store Data
- 24:45 - Tailwind CSS Setup
- 33:00 - Displaying Pokemon
- 39:00 - Adding Search and Svelte Binding
- 45:50 - Dynamic (SSR) Pages for Each Pokemon
- 54:10 - API Endpoints
- 57:36 - Svelte Animations
#sveltekit #svelte #web-development #tailwind #tailwindcss
