# System Patterns

This document describes the system architecture, key technical decisions, design patterns in use, component relationships, and critical implementation paths.

## System Architecture

The application is a Single Page Application (SPA) built with React and Vite. It uses a component-based architecture.

## Key Technical Decisions

-   Using Vite for a fast development experience.
-   Using Tailwind CSS for utility-first styling.
-   State management is handled within individual components using React Hooks.

## Design Patterns In Use

-   **Component-Based Architecture:** The UI is broken down into reusable components.
-   **Stateful and Stateless Components:** Using React functional components with and without state.

## Component Relationships

-   `main.jsx`: The application entry point, renders the `App` component.
-   `App.jsx`: The root component, currently renders the `AuthPage`. It will be updated to handle routing.
-   `AuthPage.jsx`: Manages the display of different authentication forms (`LoginForm`, `SignupForm`, etc.).
-   `ChatbotPage.jsx`: A new page that will contain the `Chatbot` component.
-   `Chatbot.jsx`: A new component for the chat interface.

## Critical Implementation Paths

-   User authentication flow.
-   Chatbot interaction and response handling.