Frontend Technology Stack

Relevant source files

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

• testgen/package.json
• testgen/README.md
• testgen/src/pages/Dashboard.tsx
• testgen/src/lib/backend.ts
• testgen/src/index.css
• CLIENT_BACKEND.md
• README.md

The testgen frontend is a modern web application built with React, TypeScript, and Vite. It provides the user interface for interacting with the TestGen AI platform, allowing users to input GitHub repositories, configure API keys, generate test cases, and view results. The architecture is notable for its "client-side backend" approach, where the browser directly communicates with external services like the GitHub and Gemini APIs, eliminating the need for a dedicated backend server for these operations.

This architecture simplifies deployment and maintenance, as the entire application can be served as a static site. The UI is constructed using a combination of Tailwind CSS for styling and shadcn/ui for a pre-built, accessible component library.

Sources: README.md:29-35, testgen/README.md:31-36, testgen/CLIENT_BACKEND.md:5-11

Core Technologies & Build Process

The foundation of the frontend is built upon a standard yet powerful set of tools for modern web development.

Sources: testgen/package.json, testgen/README.md:31-36

Frameworks and Language

• React 18: The core UI framework used for building the component-based interface. The project utilizes React Hooks like useState for state management within components like Dashboard.tsx.
  Sources: testgen/package.json:17, testgen/src/pages/Dashboard.tsx:1
• TypeScript: Provides static typing for the entire codebase, enhancing developer experience and code quality. All major components and logic files are written in TypeScript (.ts, .tsx).
  Sources: testgen/package.json:76, testgen/src/pages/Dashboard.tsx, testgen/src/lib/backend.ts
• Vite: Serves as the build tool and development server. It offers a fast development experience with Hot Module Replacement (HMR) and builds the final static assets for production. The project's scripts in package.json are configured to use Vite.
  Sources: testgen/package.json:5-8, testgen/package.json:77

Build and Development Scripts

The package.json file defines the primary scripts for managing the application lifecycle.

Script	Description
dev	Starts the Vite development server on localhost.
build	Creates a production-ready build of the application.
lint	Runs ESLint to analyze the code for potential errors.
preview	Serves the production build locally for previewing.

Sources: testgen/package.json:5-9

The diagram below illustrates the development and build workflow using Vite.

UI and Styling

The visual layer of the application is crafted using a utility-first CSS framework and a component library, allowing for rapid and consistent UI development.

Styling Engine

• Tailwind CSS: A utility-first CSS framework used for all styling. It is configured in tailwind.config.ts and its base styles and utilities are imported in src/index.css.
  Sources: testgen/package.json:74, testgen/src/index.css:1-3
• CSS Variables: The application defines a comprehensive design system using HSL-based CSS variables for both light and dark themes, covering colors, borders, and radii. This is defined in src/index.css.
  Sources: testgen/src/index.css:9-106

Component Library

• shadcn/ui: A collection of re-usable UI components built on top of Radix UI and Tailwind CSS. The Dashboard.tsx component heavily utilizes shadcn/ui components like Tabs, Card, Button, Input, and Badge.
  Sources: testgen/package.json:11-35, testgen/src/pages/Dashboard.tsx:2-17
• Lucide React: Provides the icon set used throughout the application, such as the Github, Play, and Settings icons in the Dashboard.tsx tabs.
  Sources: testgen/package.json:40, testgen/src/pages/Dashboard.tsx:10-20

The following diagram shows the hierarchy of UI technologies.

Application Architecture & Data Flow

The frontend employs a "client-side backend" architecture, which is a defining characteristic of this project. The ClientBackend class encapsulates logic that would typically reside on a server.

Sources: testgen/src/lib/backend.ts, testgen/CLIENT_BACKEND.md:5-11

Client-Side Backend

The ClientBackend class, defined in src/lib/backend.ts, is responsible for:

1. Parsing GitHub URLs: The parseGitHubUrl method extracts the owner and repository from a URL string.
2. Fetching Repository Files: The cloneRepository method uses the GitHub API to recursively fetch file contents from a public repository. It includes filtering logic to exclude irrelevant files and directories based on EXCLUDE_PATTERNS.
3. Generating Prompt Context: The generatePromptContext method assembles the content of fetched files into a single string formatted for the Gemini API.
4. Calling Gemini API: The generateTests method constructs a prompt and sends it directly to the Gemini API to generate test cases.

This class allows the Dashboard.tsx component to perform complex operations directly in the browser.

Sources: testgen/src/lib/backend.ts:100-117, 230-249, 360-381, testgen/CLIENT_BACKEND.md

Data Flow for Test Generation

The sequence diagram below shows the interaction between the user, the Dashboard component, the ClientBackend, and external APIs during the test generation process.

Key Dependencies

The package.json file lists all project dependencies. The table below highlights the most critical ones for the frontend stack.

Dependency	Version	Description
react	^18.3.1	Core library for building the user interface.
vite	^5.4.19	Build tool and development server.
typescript	^5.8.3	Language for static typing.
tailwindcss	^3.4.17	Utility-first CSS framework for styling.
@radix-ui/react-tabs	^1.1.12	Foundation for the Tabs component used in shadcn/ui.
lucide-react	^0.462.0	Library for SVG icons.
react-router-dom	^6.30.1	Handles client-side routing.

Sources: testgen/package.json:10-77