Imported from Hermitxxx/otaku-client (
AGENTS.md). Install upstream withnpx skills add Hermitxxx/otaku-client. Copyright stays with the author.
This is NOT the Next.js you know
This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in node_modules/next/dist/docs/ before writing any code. Heed deprecation notices.
Project Requirements or Planning:
Project Idea
AnimeVerse Marketplace (placeholder name)
A full-stack marketplace where collectors can buy and sell anime action figures. Sellers manage their own stores, buyers purchase collectibles securely, and admins oversee the entire platform.
Tech Stack
Frontend
- Next.js 16.2.10
- Javascript ( no typescript)
- React js
- Tailwind CSS v4
- HeroUI v3
- Framer Motion
- Better Auth
- Stripe
Backend
- Node.js
- Express.js
- MongoDB
Roles
👤 Buyer
Can:
- Register/Login
- Google Login
- Browse products
- Search products
- Filter
- Sort
- Wishlist
- Cart
- Checkout
- Stripe Payment
- View purchase history
- Review purchased products
- Track orders
- Update profile
- Manage addresses
🛍 Seller
Everything buyer has +
Seller Dashboard
Can:
- Add products
- Edit products
- Delete products
- Upload multiple images
- Inventory management
- Stock update
- Sales analytics
- Earnings
- Pending orders
- Completed orders
- Respond to reviews
- Coupons
- Discounts
👑 Admin
Admin Dashboard
Can:
- Manage users
- Manage sellers
- Ban users
- Suspend sellers
- Delete products
- Feature products
- Manage categories
- Approve reported products
- View all transactions
- Refund management (optional)
- Dashboard analytics
- Website settings
Authentication
- Email Login
- Google Login
- Protected Routes
- Role Based Access
- JWT
- Refresh Token
- Middleware
- Session Management
Homepage
Hero Section
Animated hero
Featured anime characters
CTA
Categories
Naruto
One Piece
Dragon Ball
Bleach
Attack on Titan
Demon Slayer
Jujutsu Kaisen
Marvel
DC
Gaming
Movies
Limited Edition
Featured Products
Trending figures
New Arrivals
Latest uploaded figures
Best Sellers
Highest sales
Deals
Discount section
Reviews
Customer reviews
Newsletter
Email subscription
Product Page
Product Images
Image Gallery
Zoom
Name
Description
Specifications
Character
Anime
Manufacturer
Series
Material
Height
Release Date
Price
Discount
Stock
Seller
Reviews
Rating
Related Products
Search
Search by
- Character
- Anime
- Brand
- Seller
Filters
Category
Price
Brand
Rating
Availability
Condition
Scale
Material
Sorting
Newest
Oldest
Highest Price
Lowest Price
Highest Rated
Most Popular
Best Selling
Wishlist
Heart button
Save for later
Cart
Quantity
Coupon
Subtotal
Tax
Shipping
Grand Total
Checkout
Shipping Information
Address
Stripe Payment
Order Summary
Receipt
Invoice
Seller Dashboard
Overview
Products
Orders
Customers
Revenue
Analytics
Messages
Coupons
Settings
Admin Dashboard
Overview
Users
Products
Orders
Transactions
Reports
Categories
Reviews
Featured Products
Site Analytics
Buyer Dashboard
Orders
Wishlist
Reviews
Addresses
Profile
Settings
Notifications
Notifications
Order shipped
Order delivered
Payment success
Stock update
Seller reply
Reviews
Only verified buyers
Star rating
Photos
Like reviews
Seller response
Database Collections
users
products
orders
transactions
reviews
wishlist
cart
categories
notifications
coupons
reports
Product Schema
title
slug
description
category
anime
character
brand
manufacturer
price
discount
stock
images
sellerId
rating
reviewCount
soldCount
status
createdAt
updatedAt
Order Schema
buyerId
sellerId
products[]
totalPrice
paymentStatus
orderStatus
shippingAddress
trackingNumber
createdAt
Analytics
Seller
- Total Sales
- Revenue
- Orders
- Top Products
Admin
- Users
- Sellers
- Revenue
- Orders
- Products
- Sales Chart
Backend APIs
Auth
User
Products
Orders
Payments
Wishlist
Cart
Reviews
Categories
Coupons
Notifications
Analytics
Reports
Admin
Nice UI Ideas
- Dark anime theme
- Glassmorphism cards
- Smooth page transitions
- Skeleton loading
- Infinite scroll
- Lazy loading images
- Image zoom
- Floating cart
- Animated dashboard cards
- Beautiful empty states
- Toast notifications
- Responsive mobile dashboard
Resume-Worthy Advanced Features
These are the kinds of features that help distinguish your project from a standard CRUD app:
- Role-based middleware for buyer, seller, and admin
- Stripe Checkout with webhook-based order confirmation
- Inventory deduction after successful payment
- Seller analytics dashboard (sales, revenue, best-selling items)
- Product reporting system with admin moderation
- Featured products managed by admins
- Multi-image uploads with drag-and-drop reordering
- Slug-based SEO-friendly product pages
- Pagination, filtering, sorting, and full-text search
- Soft delete for products and users
- Audit logging for important admin actions
- Low-stock notifications for sellers
- Related products recommendation based on category or series
- Aggregation pipelines for dashboard metrics (revenue, top sellers, top products)
- Server-side validation and centralized error handling
- Optimistic, responsive UI with loading and empty states
Suggested Development Roadmap
Instead of trying to build everything at once, break the project into milestones:
- Foundation: Authentication, role management, layouts, and routing.
- Marketplace Core: Products, categories, search, filtering, product details.
- Seller Experience: Product management, inventory, seller dashboard.
- Buyer Experience: Cart, wishlist, checkout, order history.
- Payments: Stripe integration, webhooks, transaction records, inventory updates.
- Admin Panel: User management, product moderation, analytics.
- Polish: Animations, responsive design, performance optimization, error handling, SEO, and accessibility.
Design System:
version: "alpha" name: "Horror / Gothic Dark" description: "Horror gothic dark interface. Ideal for landing pages, saas. AI-ready template." colors: primary: "#1A0000" secondary: "#FF5050" tertiary: "#8B0000" neutral: "#800000" surface: "#FFFFFF" accent: "#330000" typography: h1: fontFamily: gothic/blackletter fontSize: 2.25rem fontWeight: 700 body-md: fontFamily: gothic/blackletter fontSize: 1rem fontWeight: 400 label-caps: fontFamily: gothic/blackletter fontSize: 0.75rem fontWeight: 500 components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.neutral}" padding: 12px
Overview
Horror gothic dark interface. Ideal for landing pages, saas. AI-ready template. Gothic design didn't start on screens. It started in cathedrals — pointed arches, grotesques, the deliberate orchestration of shadow to make you feel small. That psychological weight carried straight into print (penny dreadfuls, Hammer Horror posters) and eventually into digital. The tradition is about controlled dread.
When Resident Evil dropped in '96, the UI was part of the horror. That heartbeat monitor, the inventory screen that looked like a blood-stained notebook — every pixel reinforced vulnerability. Bloodborne pushed it further: the HUD barely existed, letting the architecture and fog do the emotional work. Silent Hill's grain and rust. Darkest Dungeon's woodcut stress meters. These aren't decorative choices. They're tension systems.
Dark atmospheric design works because it restricts information. You can't see everything. The palette is suffocating. Typography feels carved, not typed. When done right, the interface itself becomes a source of unease — which is exactly the point.
-
Density: 5/10 — Balanced
-
Variance: 8/10 — Expressive
-
Motion: 6/10 — Expressive
-
Style: Dark, Gothic, Dramatic, Mysterious
-
Keywords: Ominous, dramatic, intense, mysterious, dark textures, dripping effects, gothic typography, grunge, distressed, blood-red, haunted
-
Era: Gothic Horror
-
Light/Dark: ✗ No / ✓ Only
Colors
- Deep Blood (#1A0000) — Primary surface or dominant color
- Blood Red (#FF5050) — Error states, destructive actions
- Dark Crimson (#8B0000) — Dark surface, primary background
- Maroon (#800000) — Supporting palette color
- Pure White (#FFFFFF) — Secondary surface
- Dark Red (#330000) — Deep contrast surface
Typography
- Display / Hero: gothic/blackletter — Weight 700, tight tracking, used for headline impact
- Body: gothic/blackletter — Weight 400, 16px/1.6 line-height, max 72ch per line
- UI Labels / Captions: gothic/blackletter — 0.875rem, weight 500, slight letter-spacing
- Monospace: JetBrains Mono — Used for code, metadata, and technical values
Scale:
- Hero: clamp(2.5rem, 5vw, 4rem)
- H1: 2.25rem
- H2: 1.5rem
- Body: 1rem / 1.6
- Small: 0.875rem
Layout
- Grid: CSS Grid primary. Max-width containment: 1280px centered with 1.5rem side padding.
- Spacing rhythm: Balanced. Base unit: 0.5rem (8px).
- Section vertical gaps: clamp(4rem, 8vw, 8rem).
- Hero layout: Asymmetric composition.
- Feature sections: Asymmetric grid with varied card sizes. No 3-equal-columns.
- Mobile collapse: All multi-column layouts collapse below 768px. No horizontal overflow.
- z-index contract: base (0) / sticky-nav (100) / overlay (200) / modal (300) / toast (500).
Elevation & Depth
Low-key dramatic shadows, blood-red highlights, dripping animations, flicker effects, grunge texture overlays, eerie hover transitions, fog/mist effects
- Physics: Spring — stiffness 120, damping 20. Confident, weighted transitions.
- Entry animations: Fade + translate-Y (16px → 0) over 480ms ease-out. Staggered cascades for lists: 100ms between items.
- Hover states: Scale(1.03) + shadow lift over 200ms.
- Page transitions: Fade + slide (300ms).
- Performance: Only transform and opacity animated. No layout-triggering properties.
Shapes
Base corner radius: 8px. See rounded tokens in front matter for the full scale.
Components
- Primary Button: Subtly rounded (0.5rem) shape. Accent color fill. Hover: 8% darken + subtle lift shadow. Active: -1px translate tactile press. Font weight 600. No outer glows.
- Secondary / Ghost Button: Outline variant. 1.5px border in muted color. Text in primary color. Hover: subtle background fill.
- Cards: Subtly rounded (0.5rem) corners. Surface background. Subtle shadow (0 2px 12px rgba(0,0,0,0.06)). 1px border stroke.
- Inputs: Label above input. 1px border stroke. Focus ring: 2px accent color offset 2px. Error text below in semantic red. No floating labels.
- Navigation: Primary surface background. Active item: accent color indicator. Font weight 500 when active.
- Skeletons: Shimmer animation matching component dimensions. No circular spinners.
- Empty States: Icon-based composition with descriptive text and action button.
Do's and Don'ts
-
No emojis in UI — use icon system only (Lucide, Heroicons)
-
No pure white (#FFFFFF) backgrounds — use off-white or dark surfaces
-
No oversaturated accent colors (saturation cap: 80%)
-
No 3-column equal-width feature layouts — use zig-zag or asymmetric grid
-
No
h-screen— usemin-h-[100dvh] -
No AI copywriting clichés: "Elevate", "Seamless", "Unleash", "Next-Gen"
-
No broken external image links — use picsum.photos or inline SVG
-
No generic lorem ipsum in demos
-
Do Dark background dominant
-
Do Blood-red accents
-
Do Gothic typography
-
Do Grunge textures
-
Do Dramatic shadows
-
Do Eerie atmosphere
Use Case
Landing pages, SaaS
MCP servers:
Read the .mcp.json for the access to the mcp servers available
How action figure data looks like:
{ "_id": "6a59c34fcf55d66cb70a7ba0", "title": "Monkey D. Luffy Gear 5 Figure", "slug": "monkey-d-luffy-gear-5-figure", "description": "Premium Gear 5 Luffy collectible featuring dynamic cloud effects and exceptional sculpt detailing.", "category": "Action Figure", "anime": "One Piece", "character": "Monkey D. Luffy", "brand": "Bandai", "manufacturer": "Banpresto", "price": 149.99, "discount": 10, "stock": 18, "images": [ "/images/luffy1.jpg", "/images/luffy2.jpg", "/images/luffy3.jpg" ], "sellerId": "seller001", "rating": 4.9, "reviewCount": 128, "soldCount": 342, "status": "active", "createdAt": "2026-07-01T10:00:00.000Z", "updatedAt": "2026-07-05T12:30:00.000Z" }
Code Practices :
Use industry standard code practices , make sure the code is clean
Shop page :
Implement the shop page where user's can browse the figures , for that use the products api from the backend