enesergun/pokedex

Pokedex, gotta catch em all!

This application utilizes the Pokemon API to provide a comprehensive Pokemon listing and detail viewing experience. Users can easily browse through a list of all available Pokemon. Upon selecting a Pokemon, a detailed view is presented, showcasing its abilities, stats, and types.

🔥 Featuring

• Next.js App Router
• Typescript
• Optimized for SEO using Next.js's Metadata
• Optimized for Core Web Vitals
• Styling with Tailwind CSS + shadcn/ui
• React Server Components (RSCs) and Suspense
• New fetching and caching paradigms

📁 Project Organization and File Colocation

Each folder represents a route segment that is mapped to a corresponding segment in a URL path.

pokedex
├── app
│   ├── error.tsx
│   ├── favicon.ico
│   ├── globals.css
│   ├── layout.tsx
│   ├── page.tsx
│   └── pokemon-detail
│       └── [slug]
│           └── page.tsx
├── components
│   ├── detail
│   │   └── detail-content.tsx
│   ├── list
│   │   ├── poke-card.tsx
│   │   ├── poke-list.tsx
│   │   └── poke-search.tsx
│   ├── shared
│   │   ├── pagination-wrapper.tsx
│   │   └── skeletons.tsx
│   └── ui
│       ├── badge.tsx
│       ├── button.tsx
│       ├── card.tsx
│       ├── pagination.tsx
│       ├── progress.tsx
│       ├── separator.tsx
│       └── skeleton.tsx
├── components.json
├── lib
│   ├── data.ts
│   ├── definitions.ts
│   └── utils.ts

✈️ Core Web Vitals

Core Web Vitals (LCP, FID, CLS) are key metrics assessing webpage loading speed, interactivity, and visual stability, crucial for user satisfaction and search rankings. Optimizing them enhances website performance and visibility.

What was done in application?

• Image Optimization for LCP
• Used Skeletons of components for CLS
• ...

Page speed report: page-speed.dev

📞 Get Feedback

You can contact me via enesergun1515@gmail.com or through LinkedIn to provide feedback on the project.