nova-web System Requirements Document

Introduction

The nova-web project is designed to create a simple web application featuring a chatbot interface. This chatbot will serve the internal team by providing straightforward Q&A functionality related to rules and regulations as outlined in the company's brochure. The primary goal is to ensure that all team members can access accurate and relevant information efficiently.

System Overview

The nova-web application will be a web-based platform that hosts a chatbot designed to answer queries related to rules and regulations. The application will be accessible to all internal team members, providing a consistent and reliable source of information. The system will be straightforward, focusing on delivering quick and accurate responses to user queries.

Functional Requirements

• As a User, I should be able to access the chatbot interface from the web app.
• As a User, I should be able to input queries related to rules and regulations.
• As a User, I should receive accurate and relevant answers from the chatbot.
• As a User, I should be able to access the Q&A functionality without any role-based restrictions.

User Personas

• Internal Team Member: Any member of the internal team who needs to access information about rules and regulations.

Visuals Colors and Theme

• primary: #1A73E8 (a deep blue representing trust and reliability)
• primary_light: #E8F0FE (a light blue for hover states and secondary UI)
• secondary: #F9A825 (a vibrant amber for headlines and emphasis)
• accent: #FF7043 (a bright coral for CTAs and active states)
• highlight: #FFC107 (a warm gold for hover states and notifications)
• bg: #FFFFFF (a clean white background)
• surface: rgba(250, 250, 250, 0.8) (a soft grey for card/panel backgrounds)
• text: #202124 (a dark grey for primary text)
• text_muted: #5F6368 (a muted grey for secondary text)
• border: rgba(0, 0, 0, 0.1) (a subtle border color)

Signature Design Concept

The nova-web homepage will feature an interactive "Regulation Map" concept. Users will see a dynamic, clickable map of interconnected nodes representing different categories of rules and regulations. Hovering over a node will display a brief summary, while clicking will expand the node into a detailed view with Q&A related to that category. This interactive map will be built using @react-three/fiber for 3D visualization and framer-motion for smooth transitions and animations. The map will provide an engaging and intuitive way for users to explore the information.

Interaction Model & Motion Direction

The landing page will utilize a "parallax" interaction model, creating a layered depth effect as users scroll through the page. Decorative elements will move at different speeds, enhancing the visual storytelling. The main content will scroll naturally, ensuring clarity and ease of use. Each section of the landing page will feature a distinctive core mechanic, such as kinetic typography or morphing SVGs, to maintain user engagement.

Non-Functional Requirements

• The application should be responsive and accessible on various devices and screen sizes.
• The system should provide quick response times to user queries.
• The chatbot should maintain a high level of accuracy in its responses.

Tech Stack

• Frontend: React for Web
• Backend: Python, FastAPI
• Database: MySQL or MariaDB, using Alembic for migrations
• AI Models: GPT 5.4 for user-friendly responses
• Local Orchestration: Docker, docker-compose

Assumptions and Constraints

• The application will be used exclusively by the internal team.
• The chatbot will handle straightforward Q&A without role-based differentiation.
• The system will rely on the existing brochure for rules and regulations data.

Glossary

• Q&A: Question and Answer
• UI: User Interface
• CTA: Call to Action
• 3D: Three-Dimensional
• SVG: Scalable Vector Graphics