Svelte Pokémon App
A clean, modern, and responsive Pokédex application built with SvelteKit and Tailwind CSS. Browse, search, and explore details of the original 151 Pokémon.
Table of Contents
About the Project
This project is a web-based Pokédex created to demonstrate modern web development practices using SvelteKit. It showcases how to build a fast, interactive, and visually appealing application by fetching data from an external API.
All Pokémon data, including stats, types, and images, is dynamically fetched from the public and free-to-use PokeAPI.
Technologies Used
- Framework: SvelteKit
- Language: TypeScript
- Styling: Tailwind CSS
- Database & Auth: Supabase
- Data Source: PokeAPI (REST)
- Build Tool: Vite
- Deployment: Vercel
Key Features
- User Authentication: Secure user registration and login functionality powered by Supabase. User sessions are managed to provide a personalized experience.
- User Session Management: Users can create account, sign and log in.
- Browse Pokémon: View a clean grid of the original 151 Pokémon.
- Real-time Search: Instantly filter Pokémon by name with a responsive search bar.
- Detailed View: Click on any Pokémon to see a detailed page with:
- High-quality image.
- Pokémon ID, Height, and Weight.
- Type(s) with corresponding color tags.
- Base stats visualized with progress bars.
- Dynamic Theming: The background of the detail page dynamically changes to match the Pokémon's primary type, creating an immersive experience.
- Responsive Design: Fully optimized for a seamless experience on desktop, tablet, and mobile devices.
- Custom Loading State: A custom Pokeball animation provides visual feedback while data is being fetched from the API.
Images
Homepage & Log In
Log In page and Sign In page to get access into the account.
Pokémon Detail Page
Each Pokémon has a dedicated page with detailed stats and a type-themed background.
Pokémon Edit Page
User can modify each Pokemon from the profile.
