Getting Started

Relevant source files

The following files were used as context for generating this wiki page:

• README.md
• backend/main.py
• web/package.json
• backend/database.py
• web/src/config/api.js
• web/src/app/forum/page.js
• backend/api/questions.py
• web/src/context/WebSocketContext.js

This guide provides a comprehensive overview of the Real-Time Q&A Dashboard project, including its architecture, technology stack, and setup instructions. The platform is a full-stack application featuring a Next.js frontend, a FastAPI backend, and a PostgreSQL database, designed for users to post questions and answers in real-time. Key features include user authentication, real-time updates via WebSockets, and AI-powered answer suggestions.

The project is divided into two main parts: a backend directory containing the FastAPI server and a web directory for the Next.js client application. This document will walk you through setting up both components to run the application locally.

Sources: README.md

Architecture Overview

The application follows a classic client-server architecture. The Next.js frontend communicates with the FastAPI backend via a REST API for standard CRUD operations and a WebSocket connection for real-time updates. An AWS RDS instance running PostgreSQL serves as the database.

Sources: README.md:1-5

This diagram illustrates the high-level architecture of the Q&A Dashboard.

Tech Stack

The project utilizes a modern technology stack for both frontend and backend development.

Layer	Technology	Description
Frontend	Next.js 16.0	React framework for server-side rendering.
	React 19.2	UI library for building components.
	Tailwind CSS 4	Utility-first CSS framework.
Backend	FastAPI	High-performance Python web framework.
	SQLAlchemy	ORM for database interaction.
	PostgreSQL	Relational database.
	Pydantic	Data validation and settings management.
Real-time	WebSockets	For live updates of questions and answers.
AI/ML	Langchain	Framework for developing LLM-powered applications.

Sources: README.md:17-41, web/package.json:11-14

Installation and Setup

To run the project locally, you need to set up both the backend and frontend services.

Prerequisites

• Python 3.8+
• Node.js 16+
• PostgreSQL (or an AWS RDS instance)
• Git

Sources: README.md:92-96

Backend Setup

1. Clone the repository and navigate to the backend directory:

   git clone https://github.com/Lavesh-Akhadkar/qa-dashboard.git
   cd qa-dashboard/backend
   

2. Create a virtual environment and activate it:

   python -m venv venv
   source venv/bin/activate  # On Windows: venv\Scripts\activate
   

3. Install Python dependencies:

   pip install -r requirements.txt
   

4. Configure Environment Variables: Create a .env file in the backend directory and populate it with your database credentials and a secret key.

   DB_HOST=your-rds-endpoint.rds.amazonaws.com
   DB_PORT=5432
   DB_NAME=qa_dashboard
   DB_USER=admin
   DB_PASSWORD=your-secure-password
   SECRET_KEY=your-secret-key
   DEBUG=True
   

5. Run the backend server:

   uvicorn main:app --reload
   

   The backend API will be available at http://localhost:8000. The database tables are initialized on application startup.

Sources: README.md:98-124, backend/main.py:12-15

Frontend Setup

1. Navigate to the web directory:

   cd ../web
   

2. Install Node.js dependencies:

   npm install
   

3. Configure Environment Variables: Create a .env.local file in the web directory to specify the backend API and WebSocket URLs.

   NEXT_PUBLIC_API_BASE_URL=http://localhost:8000
   NEXT_PUBLIC_WS_BASE_URL=ws://localhost:8000
   

4. Run the development server:

   npm run dev
   

   The frontend will be available at http://localhost:3000.

Sources: README.md:126-145, web/src/config/api.js:2-3

Database Schema

The application uses three main tables: users, questions, and answers. The relationships are managed by SQLAlchemy in the backend.

This ER diagram shows the relationships between the database tables.

Table Definitions

Table	Column	Type	Constraints
users	id	UUID	Primary Key, Default: uuid4
	username	String	Unique, Not Null
	email	String	Unique, Not Null
	password	String	Not Null
	is_admin	Boolean	Default: False
questions	id	UUID	Primary Key, Default: uuid4
	user_id	UUID	Foreign Key to users.id
	message	Text	Not Null
	status	Enum	Default: Pending (Pending, Escalated, Answered)
	created_by	Text	Not Null, Default: Anonymous
answers	id	UUID	Primary Key, Default: uuid4
	question_id	UUID	Foreign Key to questions.id
	user_id	UUID	Foreign Key to users.id
	message	Text	Not Null

Sources: backend/database.py:30-86

API and Real-time Communication

The frontend and backend interact through a set of REST endpoints and a WebSocket connection for real-time features.

Key API Endpoints

Method	Endpoint	Description
POST	/auth/register	Register a new user.
POST	/auth/login	Log in and receive a JWT token.
POST	/questions	Create a new question.
GET	/questions	Get all questions.
PATCH	/questions/{id}	Update a question's status (admin only).
GET	/questions/{id}/suggest-answer	Get an AI-generated answer suggestion.
POST	/answers/{question_id}	Post an answer to a question.
WS	/questions/ws	Establish a WebSocket connection.

Sources: README.md:147-170, web/src/config/api.js:8-25, backend/api/questions.py

Real-time Updates via WebSocket

The application provides real-time updates for new questions and status changes using WebSockets.

The following sequence diagram illustrates the WebSocket connection and event flow:

The client-side logic for managing the WebSocket connection is encapsulated in WebSocketProvider. It connects to the /questions/ws endpoint, listens for question_created and question_updated events, and updates the application state accordingly.

Sources: web/src/context/WebSocketContext.js