Skip to content

FanComics

We let any user to create alternative story of their favriote shows or movie, simply by upload links, and it will detect their favorite characters and generate comics of the alterantive story line.

Core trick

Extracts characters from a user-supplied link, then Gemini writes a comic script and renders the panels.

Tags

Description

We let any user to create alternative story of their favriote shows or movie, simply by upload links, and it will detect their favorite characters and generate comics of the alterantive story line.
qimingliu1021/fan-fictioning★ 00 forksTypeScriptCreated Feb 28, 2026 · last push Feb 28, 2026

README excerpt

# Fan-Fictioning

*Built for the **Cerebral Valley Gemini 3 NYC Hackathon**.*

**Fan-Fictioning** is a modern, AI-powered web application built with [Next.js](https://nextjs.org/) and Tailwind CSS that generates vibrant, multi-panel comic strips from user prompts, favorite characters, and even YouTube videos! 

Using the power of Google's Gemini Models, users can create dynamic graphic narratives instantly, view them in a dynamic home feed, and discuss them in deeply nested, Reddit-style comment threads.

---

## 🚀 Features

- **AI Comic Generation**: 
  - Input a favorite character and a fun prompt.
  - Optionally provide a YouTube URL for context character analysis.
  - Generates an authentic comic dialogue script using Gemini (`gemini-2.5-pro`).
  - Renders a visually stunning multi-panel comic strip page from that script using Nano Banana 2.
- **Home Feed**: A continuously scrolling social feed of all generated comics from users, formatted playfully like Twitter/X.
- **Nested Commenting System**: 
  - Click on any comic to dive into its dedicated discussion page.
  - Read, reply, and upvote comments in an infinitely deep, recursive Reddit-style thread structure.
- **Sleek UI/UX (Dark Mode)**: 
  - Fully responsive layout built with Tailwind CSS.
  - Native dark mode support out of the box (`dark:bg-black`). 
  - Modern, responsive sidebar navigation.

---

## 🛠️ Tech Stack

- **Framework:** [Next.js](https://nextjs.org/) (App Router)
- **Styling:** Tailwind CSS 
- **Icons

Team