apiVersion: capsule.dev/v0.1
kind: Capsule
name: f4c-nextjs-app-template
version: 0.1.0
type: template
purpose:
summary: 'A Next.js application template providing the full user interface for the
chat application, integrating various backend services and reusable UI components.
It includes all pages, main UI layouts, styling, and branding.
'
owns:
- All Next.js pages (_app, _document, index, room)
- Main application UI layout and styling (Tailwind CSS configuration)
- Application branding (favicon, logo, 'Free4Chat' strings)
- Orchestration of other frontend capsules (e.g., TurnstileGate, RealtimeCore components)
- Project-specific scripts and dependencies (via package.json)
does_not_own:
- Core real-time communication logic (delegates to f4c-realtime-core)
- Bot logic (interacts with f4c-bot-service API)
- Room management APIs (interacts with f4c-room-api)
- Turnstile integration (uses f4c-turnstile-gate)
interfaces:
provides:
- kind: http_api
name: frontend_assets
description: Serves the Next.js frontend application and its static assets.
- kind: library
name: ReactComponents
description: Provides the full set of React components for the chat application
UI.
requires:
- kind: library
name: TurnstileGate
from_capsule: f4c-turnstile-gate
description: Requires the TurnstileGate component for bot verification.
- kind: library
name: useChatRoom
from_capsule: f4c-realtime-core
description: Requires the useChatRoom hook for real-time communication.
- kind: http_api
name: /api/bot
from_capsule: f4c-bot-service
description: Interacts with the bot API for AI responses.
- kind: http_api
name: /api/token
from_capsule: f4c-room-api
description: Interacts with the token API for room joining and authentication.
- kind: env
name: Google Analytics ID
description: Google Analytics tracking ID.
- kind: env
name: Umami Analytics Website ID
description: Umami Analytics website ID.
dependencies:
capsules:
- name: f4c-realtime-core
version: '>=0.1.0'
- name: f4c-bot-service
version: '>=0.1.0'
- name: f4c-turnstile-gate
version: '>=0.1.0'
- name: f4c-room-api
version: '>=0.1.0'
agent:
summary_for_ai: 'This is the main Next.js application. Agents working here will
primarily focus on UI/UX, page flows, and integrating various backend services.
Customization of branding, content, and specific UI elements is expected. Be mindful
of analytics integration.
'
avoid:
- Re-implementing core real-time or bot logic.
- Modifying shared utility functions or components in `f4c-realtime-core` directly
without considering wider impact.
verification:
invariants:
- All pages must be accessible and functional.
- The application must correctly pass room and nickname parameters to the real-time
core.
x-reuse:
notes: 'Heavily branded with ''Free4Chat'' name and logo (`app/public/free4chat.svg`,
`app/src/components/Header.tsx`). `app/src/pages/_document.tsx` contains hardcoded
Umami (`data-website-id=''656d3289-e627-409c-a9d7-a272cf789f0b''`) and Google
Analytics IDs (`G-J1JHM0XNR4`). `app/src/components/RoomContent.tsx` and `app/src/components/TextChatCard.tsx`
contain hardcoded game links and specific UI elements. `app/src/pages/index.tsx`
contains hardcoded marketing copy. `app/package.json` contains project-specific
scripts and dependencies for the entire application, which might need pruning
for reuse.
'
x-reconstruct:
install: install.json