January 1, 2024

My Anime List.

Frontend
Next.js React Tailwind CSS

A modern anime catalog and discovery web application built with Next.js, featuring anime browsing, search, and responsive UI experiences.

#anime #catalog #discovery #portfolio
My Anime List
Repository

Description

My Anime List is a modern web application built for anime enthusiasts to explore, search, and discover anime through a clean and responsive interface. It presents anime information in an organized, visually appealing layout.

The project focuses on delivering a fast user experience with modern frontend technologies, emphasizing component-based architecture and optimized rendering.

Background

Anime discovery often means jumping between cluttered sites with slow, ad-heavy pages. I wanted a lightweight, focused frontend that makes browsing and searching for titles feel fast and pleasant, while giving me a real project to practice modern Next.js patterns.

Goal

  • Provide a fast, responsive way to browse and search anime.
  • Practice component-based architecture and dynamic routing in Next.js.
  • Deliver a clean, mobile-friendly dark-themed UI.

Features

  • Anime listing and catalog browsing
  • Search anime by title
  • Anime detail pages via dynamic routing
  • Trending and popular anime section
  • Responsive, mobile-friendly interface
  • Component-based frontend with optimized image handling
  • Clean, minimal, dark-themed design

Technologies

  • Next.js — routing, page rendering, and dynamic detail pages.
  • React — reusable component architecture and UI state.
  • Tailwind CSS — utility-first styling for the responsive dark theme.

How to Run

git clone https://github.com/FannyDevz/NextJS-AnimeList
cd NextJS-AnimeList
npm install
npm run dev
# open http://localhost:3000

Technical Decisions

  • Next.js over plain React for built-in routing and easy dynamic detail pages by slug/id.
  • Tailwind CSS to iterate quickly on a consistent design system without leaving markup.
  • Component-based structure so cards, search, and detail views stay reusable and testable.

What I Learned

  • Structuring a Next.js app with dynamic routes and data fetching.
  • Building reusable, composable React components.
  • Optimizing images and layout for responsive performance.

Notes

Frontend-focused project consuming an external anime API. Future ideas: user watchlists, filtering by genre, and pagination or infinite scroll.

Hey! I’m Fanny, the software engineer tending to this digital garden. You can read more about me, or subscribe by email.

Comments