f4c-nextjs-app-template v0.1.0

template

capsule://quake0day/[email protected]

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)

AI orientation

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.

Provides

http_api:frontend_assets — Serves the Next.js frontend application and its static assets.
library:ReactComponents — Provides the full set of React components for the chat application UI.

Requires

library:TurnstileGate from f4c-turnstile-gate — Requires the TurnstileGate component for bot verification.
library:useChatRoom from f4c-realtime-core — Requires the useChatRoom hook for real-time communication.
http_api:/api/bot from f4c-bot-service — Interacts with the bot API for AI responses.
http_api:/api/token from f4c-room-api — Interacts with the token API for room joining and authentication.
env:Google Analytics ID — Google Analytics tracking ID.
env:Umami Analytics Website ID — Umami Analytics website ID.

Dependencies

Capsules

Invariants (must always hold)

All pages must be accessible and functional.
The application must correctly pass room and nickname parameters to the real-time core.

Source files (15)

Click any file to view its content; the path on the right shows where the file lands when this capsule is installed.

src/app/next-env.d.ts → next-env.d.ts
src/app/next.config.js → next.config.js
src/app/package.json → package.json
src/app/postcss.config.js → postcss.config.js
src/app/public/favicon.ico → public/favicon.ico
src/app/public/free4chat.svg → public/free4chat.svg
src/app/src/components/Header.tsx → components/Header.tsx
src/app/src/components/RoomContent.tsx → components/RoomContent.tsx
src/app/src/components/TextChatCard.tsx → components/TextChatCard.tsx
src/app/src/pages/_app.tsx → pages/_app.tsx
src/app/src/pages/_document.tsx → pages/_document.tsx
src/app/src/pages/index.tsx → pages/index.tsx
src/app/src/pages/room.tsx → pages/room.tsx
src/app/src/styles/tailwind.css → styles/tailwind.css
src/app/tailwind.config.js → tailwind.config.js

Plus capsule.yaml and install.json.

Upstream source

https://github.com/quake0day/free4chat-capsules/blob/main/f4c-nextjs-app-template/capsule.yaml

Pull this capsule locally:

capsule pull capsule://quake0day/[email protected]

Or render to your terminal:

capsule man capsule://quake0day/[email protected]