Skip to content

Repository files navigation

Building one of the most famous junior websites from scratch: The Pokedéx

Project Screens

What I'm Building:

  • A visually stunning interface: Utilize Tailwind CSS to craft a sleek, modern design that captures the essence of the Pokémon universe.
  • Comprehensive Pokémon data: Leverage the PokeAPI to access detailed information on every Pokémon, including stats, moves, abilities, and more.
  • Advanced filtering and search: Allow users to easily find specific Pokémon by name, type, generation, and other criteria.
  • Evolutions and variants: Track and showcase Pokémon evolution chains and regional variants.
  • Engaging user experience: Implement features like sorting, favoriting, and detailed breakdowns of each Pokémon's abilities.

Tech Stack:

  • React: Build a dynamic and interactive user interface.
  • TypeScript: Ensure code clarity and maintainability with type safety.
  • Tailwind CSS (with shadcn): Quickly style your components with pre-built utility classes.
  • PokeAPI: Access comprehensive Pokémon data through an easy-to-use API.

Pokédex Project Phases: Catching 'Em All, One Phase at a Time!

Phase 1: Foundation & Functionality (PC-only): ✅

Core Features: Building the core functionality of the Pokédex, focusing on PC usage. This includes:

  • Displaying detailed Pokémon information
  • Showcasing evolutions and variants
  • Data Integration: Connect to the PokeAPI for comprehensive Pokémon data.

Phase 2: Master Trainer Status (Adding Complexity): ✅

  • Enabling basic user interaction (sorting, favoriting, etc.)
  • Implementing filtering and search options

Phase 3: Gotta Catch 'Em Mobile (Full Responsiveness): ✅

  • Responsive Design: Adapt the website to seamlessly function on various screen sizes, ensuring optimal mobile usability.
  • Touch Optimization: Optimize interaction for touchscreens, including buttons, navigation, and scrolling.

Phase 4: Speed Up Your Journey (Performance Enhancements): ⌛

  • Code Optimization: Refactor code for efficiency and reduce unnecessary processing.
  • Image Optimization: Reduce image sizes for faster loading times.
  • Caching Strategies: Implement caching mechanisms to improve responsiveness.

About

"Pokedex" is a React & TypeScript app styled with Tailwind CSS, accessing PokeApi for Pokemon data. It generates a table displaying Pokemon details for seamless exploration and reference. With React's power, TypeScript's safety, and Tailwind's elegance, it offers a delightful user experience.

Resources

Stars

0 stars

Watchers

1 watching

Forks

Releases

Packages

Used by

Contributors

Languages