Pokedex Project

This md was revamped with some ai. Please ignore the obvious corporate glazing.

Desktop

Mobile

Important Takeaways

An old PokeAPI centered project, to better understand API key usage, never bothered to finish for a while but decided to do it now.

• Decided to move this old project to NEXT JS and maintain the original desired layout
• Tested v0 for converting layout design from vanilla css to tailwind (it worked)

Technologies Utilized

• Next.js: React framework for server-side rendering and routing
• Tailwind CSS: Utility-first CSS framework for rapid UI development
• Vercel: Platform for deployment and hosting
• v0: Vercel's Ai developer assistant.
• shadcn/ui: Re-usable components built with Radix UI and Tailwind CSS
• PokeApi: Accessible database of the "entire" pokemon list

Key Features

1. Pokemon Grid: Displays a grid of Pokemon cards with their sprites and names.
2. Search Functionality: Allows users to search for Pokemon by name.
3. Detailed Pokemon View: Shows detailed information about a selected Pokemon, including its type, height, weight, and a larger image.
4. Responsive Design: Adapts to different screen sizes for optimal viewing on various devices.
5. Custom Styling: Utilizes custom fonts and a gradient background for an appealing visual design.

Code Breakdown

Main Pokedex Component (pokedex.tsx)

This component is the heart of the application, managing state and rendering the main UI:

export default function Pokedex() {
  const [pokemons, setPokemons] = useState<Pokemon[]>([])
  const [selectedPokemon, setSelectedPokemon] = useState<Pokemon | null>(null)
  const [searchTerm, setSearchTerm] = useState('')

  useEffect(() => {
    const fetchPokemons = async () => {
      // Fetching logic here
    }
    fetchPokemons()
  }, [])

  // ... rest of the component
}

This code sets up the main state variables and fetches Pokemon data when the component mounts.

Search Functionality (search-input.tsx)

The search input component allows users to filter Pokemon:

export function SearchInput({ searchTerm, setSearchTerm }: SearchInputProps) {
  return (
    <Input
      type="text"
      placeholder="Search Pokémon"
      value={searchTerm}
      onChange={(e) => setSearchTerm(e.target.value)}
      className="mb-4"
    />
  )
}

This component uses the Input component from shadcn/ui, demonstrating the integration of the component library.

Pokemon Grid (pokemon-grid.tsx)

The grid component renders individual Pokemon cards:

export function PokemonGrid({ pokemons, onSelectPokemon }: PokemonGridProps) {
  return (
    <ScrollArea className="h-full w-full">
      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-3 xl:grid-cols-4 gap-4 p-4">
        {pokemons.map((pokemon) => (
          <Card key={pokemon.id} /* ... */>
            {/* Card content */}
          </Card>
        ))}
      </div>
    </ScrollArea>
  )
}

This code uses Tailwind CSS classes for responsive grid layout and shadcn/ui's ScrollArea and Card components.

Pokemon Detail View (pokemon-detail.tsx)

The detail component shows more information about a selected Pokemon:

export function PokemonDetail({ pokemon }: PokemonDetailProps) {
  if (!pokemon) return null

  const mainType = pokemon.types[0].type.name
  const typeColor = pokemontype[mainType as keyof typeof pokemontype] || '#777'

  return (
    <Card className="h-full">
      <CardContent className="p-4 sm:p-6 flex flex-col justify-center items-center h-full relative overflow-hidden">
        {/* Pokemon details */}
      </CardContent>
    </Card>
  )
}

This component uses dynamic styling based on the Pokemon's type and showcases the use of Next.js Image component for optimized image loading.

Custom Fonts and Styling (layout.tsx)

The project uses custom fonts and global styles:

const geistSans = localFont({
  src: "./fonts/GeistVF.woff",
  variable: "--font-geist-sans",
  weight: "100 900",
})

// ... other font definitions

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`\${geistSans.variable} \${geistMono.variable} \${pokeGB.variable} font-sans antialiased`}
      >
        {children}
      </body>
    </html>
  )
}

This code demonstrates the use of Next.js font optimization features and applies global styles using Tailwind CSS.

Conclusion

This Pokedex project showcases the power of combining Next.js, Tailwind CSS, and shadcn/ui to create a modern (not really), responsive, and interactive web application (just a search option). It leverages server-side rendering, efficient styling (i will forget some of the structure later), and reusable components to deliver a seamless user experience for exploring Pokemon data.

This md was revamped with some ai. Please ignore the obvious corporate glazing.