Kazez: A Modern, Full-Stack Platform to Watch Anime Online
Kazez is a beautifully designed, full-stack web application for streaming anime, built with Next.js, TypeScript, and Prisma. Explore its architecture, features, and what makes it unique.
12/10/2024
Introduction
Kazez is a modern, full-stack anime streaming platform, designed to provide users with an outstanding experience watching anime online for free. Built on the latest web technologies—including Next.js, TypeScript, Prisma, and Tailwind CSS—Kazez combines performance, scalability, and elegant design.
Key Features
- Anime Streaming: Watch recent episodes and search the anime database easily.
- Rich UI: Built with React and Tailwind CSS. Components like cards and inputs are fully reusable and stylish.
- Pagination & Filtering: Browse anime by genre, format, season, rating, and more.
- Authentication: Secure user sessions using cookies and Lucia authentication.
- SEO Optimized: Custom SEO metadata for better discoverability.
- Responsive Design: Looks great on desktop and mobile.
- Performance-Oriented: Uses React Query for efficient data fetching and caching.
Technical Overview
Stack
- Frontend: Next.js (React), TypeScript, Tailwind CSS
- Backend: Next.js Server Components, Prisma (with PostgreSQL or another database)
- Authentication: Lucia, cookies, and session management
- API/Data: Fetches anime metadata from third-party sources Consumet
- Styling: Tailwind CSS with custom themes for dark/light modes
Architecture
- App Directory: Uses Next.js 13+ app directory for routing, layouts, and server components.
- Component System: Modular UI components (e.g., Card, Input) for fast development.
- Global Styles: Customizable via
globals.css
, supports theming. - SEO Utilities: Centralized SEO configuration in
lib/seo.ts
for dynamic metadata. - Database: Prisma ORM with a global singleton pattern for efficient database access during development.
Example: Anime Data Fetching
Kazez uses React Query to fetch and cache anime data. Users can filter by genre, season, status, and more. Example snippet:
export const useAnimes = ({ ...options }: UseAnimesOptions) =>
useQuery({
queryKey: [...],
queryFn: async () => {
const url = // build API URL with filters
const res = await fetch(url)
return res.json()
},
})
Example: SEO Utility
SEO is managed centrally:
export const seo = (params: Prams): Metadata => ({
title: params.title ? `${params.title} | Kazez` : 'Kazez',
description: params.description ?? 'Watch anime online for free...',
// ... more meta tags
})
Authentication
Kazez uses Lucia for authentication, managing sessions securely with cookies and supporting server-side session validation for protected routes.
User Experience
- Homepage: Displays a large hero image and a list of recent episodes.
- Anime Listings: Pagination and filters allow users to discover new anime by genre, season, and popularity.
- Episode Pages: Watch anime episodes with up-to-date metadata and rich visuals.
- Dark Mode: Automatic support for light and dark themes.
Conclusion
Kazez demonstrates a production-grade, full-stack web application for anime streaming, blending modern frameworks, best practices, and a great user experience. Whether you're interested in building a similar platform or exploring advanced web development patterns, the Kazez repository offers an excellent reference.