AniBrief — Anime Discovery & Audio Briefings

AniBrief is a premium anime discovery and audio-briefing web app built as a reinterpretation of the Frontend Simplified Virtual Internship project rubric.

Instead of building a Summarist-style book summary platform, AniBrief applies the same product architecture to anime discovery: users can browse featured, recommended, and trending anime, search by title, open dynamic anime detail pages, save anime to a personal watchlist, and listen to structured anime synopsis briefings through a custom text-to-speech player.

Live Demo

Live Site: https://advanced-virtual-internship-psi.vercel.app

Project Purpose

This project was built as an internship portfolio piece to demonstrate full-featured frontend application development using modern React and Next.js patterns.

The original rubric required:

• Authentication modal
• Featured/recommended/suggested content
• Dynamic detail pages
• Audio player page
• Subscription/sales page
• Settings page
• Search
• Sidebar navigation
• Skeleton loading
• Optional library/finished items

AniBrief preserves that structure while changing the domain from books to anime.

Core Features

Authentication

• Firebase Authentication
• Register with email/password
• Login with email/password
• Guest login through Firebase anonymous authentication
• Logout support
• Global authentication modal controlled through Redux Toolkit
• Protected actions open the auth modal when the user is logged out

Anime Discovery Dashboard

• Featured anime section
• Recommended anime section
• Trending/current-season anime section
• Anime cards rendered from real Jikan API data
• Premium badges on restricted anime
• Skeleton loading states
• Resilient API handling with Promise.allSettled

Search

• Global search bar on app pages
• 300ms debounce
• Anime title search through Jikan API
• Search result dropdown with anime poster, title, and metadata
• Dynamic navigation to anime detail pages

Dynamic Anime Detail Pages

• Route: /anime/[id]
• Fetches anime by ID from Jikan API
• Displays title, image, synopsis, score, rank, duration, rating, studio, and genres
• Premium badge support
• “Listen to Briefing” protected action
• “Add to Watchlist” Firestore action

Audio Briefing Player

• Route: /player/[id]
• Custom speech-synthesis player using the Web Speech API
• Play, pause, stop, previous, and next controls
• Section-based briefing progress
• Full briefing transcript
• Completed briefing tracking in Firestore
• Premium access checks before playback

Subscription Flow

• Route: /choose-plan
• Monthly and yearly plan UI
• Yearly plan includes a 7-day trial mention
• FAQ accordion
• Mocked subscription state through Redux Toolkit
• Premium route protection
• Stripe-ready architecture for future integration

Settings

• Route: /settings
• Shows locked state when logged out
• Displays guest or registered account status
• Displays current subscription plan
• Basic users can upgrade through the choose-plan page

Library

• Route: /library
• Firestore-backed saved anime watchlist
• Firestore-backed completed briefings
• Logged-out locked state
• Empty states for saved and completed sections
• Anime cards reused across dashboard and library

Tech Stack

• Next.js
• TypeScript
• Firebase Authentication
• Cloud Firestore
• Redux Toolkit
• React Redux
• React Icons
• Jikan API
• Web Speech API / SpeechSynthesis
• Vercel

Rubric Mapping

Original Summarist Rubric	AniBrief Implementation
Selected Book	Featured Anime
Recommended Books	Recommended Anime
Suggested Books	Trending / Current Season Anime
Book Detail Page /book/:id	Anime Detail Page /anime/[id]
Player Page /player/:id	Anime Briefing Player /player/[id]
Search by title/author	Search anime by title
Premium book pill	Premium anime badge
Add to My Library	Add to Watchlist
Finished Books	Completed Briefings
Settings	Account email/status + subscription
Sidebar	For You, Library, Settings, Login/Logout
Skeleton loading	Dashboard, detail, settings, library, player loading states
Payments	Mock subscription first, Stripe-ready later

Architecture Overview

AniBrief uses a modular structure that separates routing, UI components, feature state, services, and domain models.

src/
  app/
    page.tsx
    (app)/
      layout.tsx
      for-you/
      anime/[id]/
      player/[id]/
      settings/
      library/
    (marketing)/
      choose-plan/

  components/
    anime/
    auth/
    layout/
    player/
    skeletons/
    ui/

  features/
    auth/
    anime/
    library/
    subscription/

  lib/
    firebase.ts
    firestore.ts
    jikan.ts

  store/
    StoreProvider.tsx
    hooks.ts
    index.ts

  types/
    anime.ts
    subscription.ts
    user.ts

  utils/
    briefing.ts
    debounce.ts
    formatters.ts