← Back to projects

🐾 Catpedia — A Modern Guide for Cat Lovers

Tech Stack: Next.js • Tailwind CSS • Catwiki API • Vercel

📝 Overview

Catpedia is a responsive and modern web application built with Next.js and hosted on Vercel. It’s designed as an educational and engaging platform for cat enthusiasts to explore different breeds, learn about their characteristics, and find useful care and wellness tips.

The app emphasizes simplicity, performance, and user-friendly navigation, with full support for both light and dark modes for a comfortable viewing experience on any device.

💡 Features

🏠 Home Page

A clean and welcoming landing page that introduces users to the app and highlights popular breeds, with easy navigation to other sections.

catpedia-homepage

🐈 Breeds Page

  • Fetches and displays a comprehensive list of cat breeds using an external API.
  • Includes search functionality for quick filtering by breed name.
  • Implements pagination via query parameters, ensuring smooth transitions between pages without reloading the app.
breeds-page

💬 Care & Tips Section

This section is split into two informative routes:

  • /care: Offers essential cat care advice for owners of all experience levels.
  • /articles: Shares curated blog-style articles about cat health, nutrition, and lifestyle.

🌗 Light & Dark Mode

Users can switch between light and dark themes effortlessly — providing accessibility and visual comfort across all devices.

⚙️ My Workflow

Planning & Wireframing:
I began by outlining routes and content structure — Home, Breeds, Care, and Tips — focusing on navigation and user flow.

UI Development:
Built using Next.js and Tailwind CSS, focusing on reusable components and responsive layouts.

Routing :
Utilized Next.js App Router to handle nested routes for the Care and Tips pages, maintaining scalability and clean navigation.

Theme Toggle:
Added a light/dark mode switch powered by Tailwind’s theme system and context state.

Deployment:
Deployed to Vercel, ensuring fast load times, automatic builds, and global content delivery.

🧰 Tech Highlights

  • Next.js for routing, page rendering, and performance optimization..
  • Tailwind CSS for clean, responsive design.
  • REST API Integration for fetching cat breed data.
  • Vercel for CI/CD and hosting.

🚀 Future Enhancements

  • 🧭 Breed Comparison Tool: Let users compare multiple cat breeds side by side.
  • 💬 User Comments & Reviews: Build community engagement with shared experiences.
  • 🖼️ Image Gallery: Add a dynamic breed gallery using API images.
  • 📊 Care Tracker: Enable users to log feeding, grooming, and health routines.
  • 🐾 Offline Mode: Cache key API responses for offline accessibility.