add-frontend-page

What problem does it solve?

This guide removes uncertainty and repetitive setup when adding new frontend pages to Renfield by enforcing project conventions for routing, navigation, styling, translations, and WebSocket connectivity so pages are consistent and production-ready.

Core Features & Use Cases

• Routing & Navigation: Shows how to register a new route in App.jsx and add the page to the main navigation in Layout.jsx so users can reach the feature.
• Dark Mode Styling: Enforces Tailwind dark: variants and reusable component classes (.card, .input, .btn-primary) to ensure components look correct in both light and dark themes.
• Internationalization (i18n): Requires using react-i18next for all user-facing text and adding translation keys to both en.json and de.json to support the household's primary German locale and English.
• WebSocket Integration: Documents the frontend WebSocket endpoints and message patterns for chat, device, and satellite connections so interactive features integrate reliably.

Quick Start

Create a new React page component, register its route in App.jsx, add a navigation entry in Layout.jsx, add translation keys to both en.json and de.json, and follow dark-mode classes and WebSocket references.