Frontend Routing and Pages
Relevant source files
The following files were used as context for generating this wiki page:The frontend of the QA Dashboard is built using Next.js and its App Router paradigm. This system uses a file-based routing mechanism where directories within the web/src/app/ folder define the application's URL structure. Each page is a React Server or Client Component responsible for a specific view, such as user login, registration, or the main Q&A forum.
Global state, such as user authentication and WebSocket connections, is managed through React Context providers (AuthProvider, WebSocketProvider) wrapped around the application in the root layout. This ensures that page components have access to necessary data and functions regardless of the current route.
Sources: README.md:29-49, web/src/app/layout.js:3-6
Core Structure and Layout
The fundamental structure of the frontend application is defined in web/src/app/layout.js. This file exports a RootLayout component that serves as the main shell for all pages.
Root Layout (layout.js)
The RootLayout component wraps all child pages and components with essential context providers. This setup ensures that authentication state and WebSocket connectivity are available throughout the entire application.
AuthProvider: Manages user authentication state, including the user object and JWT token. It handles login, logout, and persists session data inlocalStorage.WebSocketProvider: Manages the WebSocket connection for real-time updates on questions and answers.
The layout also imports global styles from globals.css and sets up the Geist font family.
Sources: web/src/app/layout.js:3-29, web/src/context/AuthContext.js:5-10, web/src/context/WebSocketContext.js:6-9
The diagram below illustrates how providers wrap the application's children components.
Sources: web/src/app/layout.js:22-26
Routing and Page Definitions
The application uses the Next.js App Router, where each route corresponds to a directory inside src/app. A page.js file within a directory defines the UI for that route segment.
Main Application Routes
The following table outlines the primary routes defined in the project structure.
| Route | File Path | Description |
|---|---|---|
/ | web/src/app/page.js | The entry point. Redirects users to /login or /forum based on authentication status. |
/login | web/src/app/login/page.js | Renders the user login form. |
/register | web/src/app/register/page.js | Renders the new user registration form. |
/forum | web/src/app/forum/page.js | The main Q&A dashboard page, displaying questions and the submission form. |
Sources: README.md:38-42
Entry Point (/page.js)
The root page at web/src/app/page.js functions as a client-side router guard. It uses the useAuth hook to check the user's authentication status and redirects them accordingly.
- If the user is not authenticated and the auth state is no longer loading, it redirects to
/login. - If the user is authenticated, it redirects to
/forum. - While the authentication status is loading, it displays a loading spinner.
This flow ensures that unauthenticated users are directed to the login page, while authenticated users are taken directly to the main application content.
The following flowchart illustrates the redirection logic in the root page.js.
Sources: web/src/app/page.js:10-16
Authentication Pages
User authentication is handled by two dedicated pages: Login and Register. These pages contain forms that interact with the backend authentication API endpoints.
Login Page (/login/page.js)
This page provides a form for existing users to log in.
- State Management: Uses
useStateto manage form data (email,password), loading state, and errors. - Validation: Performs client-side validation to ensure email and password fields are not empty and the email format is valid.
- API Interaction: On submission, it sends a
POSTrequest to the/auth/loginendpoint with the user's credentials. - Authentication Flow: Upon a successful API response, it calls the
loginfunction fromAuthContextto store the user data and JWT token, then redirects the user to the/forumpage.
The sequence diagram below details the login process.
Register Page (/register/page.js)
This page allows new users to create an account.
- State Management: Manages form data (
username,email,password,confirmPassword), loading state, and errors. - Validation: Includes client-side checks for required fields, username length (>3), password length (>6), and matching passwords.
- API Interaction: On successful validation, it sends a
POSTrequest to the/auth/registerendpoint. - Redirection: After a successful registration, it redirects the user to the
/loginpage to sign in.
Sources: web/src/app/register/page.js:8-80
Main Application Page (/forum/page.js)
The /forum route is the core of the application, where users can view and post questions.
- Data Fetching: It uses the
useWebSockethook to connect to the WebSocket server and receive a real-time list of questions. The page displays a connection status indicator. - Component Composition: The page is composed of several key components:
Header: Displays the navigation bar with user info and logout/login links.QuestionForm: A form for submitting new questions.QuestionList: Renders the list of questions received from the WebSocket.
- Real-time Updates: The
WebSocketContexthandles incoming messages (questions_list,question_created,question_updated) and updates thequestionsstate, which causes theQuestionListto re-render automatically.
The component structure of the forum page is shown below.
Sources: web/src/app/forum/page.js:8-83
Summary
The frontend architecture of the QA Dashboard leverages the Next.js App Router for a clear and maintainable file-based routing system. Pages are defined as components within the src/app directory, with a central RootLayout providing global context for authentication and real-time data via WebSockets. The separation of concerns is evident, with dedicated pages for authentication and a composite view for the main forum functionality, creating a robust and scalable user interface.
Sources: README.md:29-49, web/src/app/layout.js, web/src/app/page.js