# 🏗️ Build Agent

Web Build reimagines web development by replacing complex code scaffolding with intuitive, conversational inputs.\
Instead of manually writing setup code, developers describe what they want — and Web Build constructs the application architecture, backend, and frontend automatically.

It’s designed for developers who want to move fast from **idea to implementation**, combining speed with code quality.

### Key Features

* **Conversational Development**\
  Describe your app’s functionality in plain language — Web Build handles the implementation details.
* **Full-Stack Generation**\
  Automatically builds both frontend and backend layers with clean architecture and consistent structure.
* **MongoDB Integration**\
  Seamless database setup with schema creation, connection handling, and CRUD operations — fully optimized for MongoDB.
* **Built-In Authentication**\
  Includes secure user registration, login, and session handling out of the box.
* **Local Development Ready**\
  Generated projects are structured for immediate use in local environments — no external cloud dependencies.

### How Web Build Works

#### 1. Application Conceptualization

Start by describing your web application idea, such as:

* “Create a blog app where users can post articles and comment.”
* “Build a task manager with user authentication and progress tracking.”
* “Develop a notes app with categories and a dashboard view.”

#### 2. Architecture Planning

Web Build processes your prompt and generates a tailored full-stack plan:

* **Frontend Framework** – React-based responsive UI with modern patterns
* **Backend Setup** – Node.js + Express architecture with REST APIs
* **Database Schema** – MongoDB models and collections auto-generated
* **Authentication Flow** – Secure login, registration, and token-based sessions

#### 3. Full-Stack Generation

Web Build then constructs your project:

* Creates the file and folder structure
* Sets up frontend and backend codebases
* Configures MongoDB connections and models
* Generates API routes and authentication logic
* Includes sample components and utilities

#### 4. Feature Expansion

Once the base app is ready, you can enhance it via new prompts:

* “Add profile picture upload with local file storage.”
* “Add task filtering by category.”
* “Create an admin panel for managing users.”

### Core Capabilities (Supported but not limited to)

#### Frontend

* **React + TypeScript** for clean, scalable UIs
* **Responsive Design** with reusable components
* **Routing Support** with React Router
* **State Management** through Context API or Redux (optional)

#### Backend

* **Node.js + Express** for RESTful API development
* **Structured Routing** for organized code
* **Middleware Setup** for authentication, validation, and error handling
* **Environment Management** with `.env` configurations

#### Database

* **MongoDB (Only)** for flexible document storage
* **Mongoose ORM** for schema and model definitions
* **CRUD Operations** auto-generated for core entities
* **Validation & Indexing** included for optimal performance

### Supported Technology Stack

| Layer     | Technology                       |
| --------- | -------------------------------- |
| Frontend  | React + TypeScript               |
| Backend   | Node.js + Express                |
| Database  | MongoDB (via Mongoose)           |
| Auth      | JWT + bcrypt for secure sessions |
| Real-Time | WebSockets (optional)            |

### Getting Started with Web Build

#### Prerequisites

* Modern web browser
* Active CodeMate account
* Basic familiarity with web apps

#### Accessing Web Build

1. Visit [**app.codemate.ai**](https://app.codemate.ai)
2. Select **Web Build** from the dashboard
3. Click **New Project** and describe your application idea
4. Review the generated structure and begin building

#### Your First Web Build Project

Example prompt:

```
Create a to-do list app with user authentication and a dashboard to manage tasks.
```

Web Build will:

* Generate a React + Node.js + MongoDB project
* Set up authentication, routes, and basic UI
* Configure environment variables and local database connections

You can then refine features by prompting:

```
Add due dates to tasks and filter by completion status.

```

### Best Practices

* **Be Descriptive** – Provide detailed prompts for better results
* **Iterate Often** – Add features progressively through smaller prompts
* **Review Generated Code** – Understand and refine the structure to match your needs
* **Maintain Local Testing** – Use MongoDB locally for testing before deployment
* **Version Control** – Use Git for tracking and collaboration

### Integration with CodeMate Ecosystem

Web Build integrates seamlessly with other CodeMate tools:

* **Cora (VS Code Extension)** – Import Web Build projects into VS Code for further AI-assisted development
* **Unified Knowledge Base** – Access shared documentation and patterns across both environments
* **Consistent Workflow** – Continue your project seamlessly between browser and desktop

**Feature Availability**: This feature is accessible via the [CodeMate Build Interface](https://app.codemate.ai/build).