Web Application Development Standards

Relevant source files

• Qoder/prompt.txt
• README.md

Purpose and Scope

This document defines Qoder's standards and procedures for web application development tasks. It covers framework selection, project initialization workflows, testing protocols, and preview setup requirements. For general code editing and validation workflows, see Code Change Validation Pipeline. For terminal operation details, see Tool Ecosystem and Categories.

Sources: Qoder/prompt.txt98-106 Qoder/prompt.txt212-226

---

Framework Selection and Initialization

Default Framework Preferences

When the user does not specify which frameworks to use, Qoder defaults to modern JavaScript frameworks with the following priority:

Framework	Use Case	Initialization Command
React with Vite	Single-page applications, component libraries	npm create vite@latest
Next.js	Full-stack applications, SSR, static sites	npx create-next-app@latest

The selection principle is to always use CLI initialization tools rather than writing project structure from scratch. This ensures proper configuration, dependency management, and build tooling setup from the start.

Sources: Qoder/prompt.txt102 Qoder/prompt.txt214-216

Initialization Workflow

Diagram: Web Application Initialization Process

Sources: Qoder/prompt.txt102-103 Qoder/prompt.txt215

---

Testing and Validation Procedures

Pre-Display Testing Protocol

Before presenting a web application to the user, Qoder must execute a validation workflow using curl to access the website and check for runtime errors. This mandatory step catches issues like:

• Server startup failures
• Route configuration errors
• Build/compilation problems
• Port binding conflicts
• Missing dependencies

Diagram: Web Application Testing Workflow

Sources: Qoder/prompt.txt104 Qoder/prompt.txt217

curl Command Pattern

The typical validation command pattern is:

This is executed via the run_in_terminal tool, not by outputting the command to the user.

Sources: Qoder/prompt.txt104 Qoder/prompt.txt19

---

Preview Browser Setup

run_preview Tool

After starting a web development server, Qoder must set up the preview browser using the run_preview tool. This enables visual monitoring and interactive testing.

Diagram: Preview Setup Architecture

Sources: Qoder/prompt.txt222-225 Qoder/prompt.txt334

Preview Setup Requirements

1. Always set up preview browser after web servers start successfully
2. Provide clear instructions for user interaction with the preview
3. Monitor the preview environment for runtime errors
4. Maintain preview connection during iterative development

Sources: Qoder/prompt.txt222-225

---

Hot Reload and Development Servers

Hot Reload Behavior

Modern frameworks like Next.js implement hot reload (Hot Module Replacement), which means:

• Development server keeps running in the terminal
• Code changes automatically reflect in the browser
• No manual refresh required by the user
• The server process runs continuously until explicitly stopped

This behavior affects workflow:

• Use run_in_terminal with background mode for dev servers
• Do not restart the server for every code change
• Monitor terminal output for compilation errors via get_terminal_output

Sources: Qoder/prompt.txt105-106 Qoder/prompt.txt218

---

Web Operation Tools

Tool Inventory

Qoder provides three web-specific tools:

Tool	Purpose	Usage Context
run_preview	Set up preview browser for web servers	After starting development server
fetch_content	Fetch content from web pages	Research, documentation retrieval
search_web	Search the web for real-time information	Current libraries, API documentation

Sources: Qoder/prompt.txt331-334

Tool Usage Workflow

Diagram: Web Tools Integration with Development Cycle

Sources: Qoder/prompt.txt331-334 Qoder/prompt.txt98-106

---

Framework-Specific Guidelines

React with Vite

• Initialization: npm create vite@latest
• Default port: 5173
• Hot reload: Automatic via Vite HMR
• Build command: npm run build

Next.js

• Initialization: npx create-next-app@latest
• Default port: 3000
• Hot reload: Fast Refresh enabled by default
• Build command: npm run build
• Server-side considerations: Both client and server components supported

Sources: Qoder/prompt.txt102 Qoder/prompt.txt214

---

Integration with Core Workflows

Connection to File Editing

Web application development follows the same strict file editing rules as general development:

1. MUST read file before editing with read_file
2. MUST use search_replace as primary editing tool
3. MUST validate with get_problems after every code change
4. MUST use curl testing before showing to user (web-specific addition)

For detailed file editing rules, see File Operations and Editing Rules.

Sources: Qoder/prompt.txt237-243 Qoder/prompt.txt104

Connection to Terminal Operations

Web development heavily relies on terminal operations:

• CLI initialization tools
• Package manager commands (npm, yarn, pnpm)
• Development server management
• curl testing commands

All terminal operations must use run_in_terminal tool, never output commands as code blocks to user.

Sources: Qoder/prompt.txt19 Qoder/prompt.txt103

---

Decision Tree for Web Application Tasks

Diagram: Web App Task Decision Flow

Sources: Qoder/prompt.txt98-106 Qoder/prompt.txt212-226

---

Summary of Mandatory Requirements

Requirement	Tool/Action	Penalty for Violation
Use CLI initialization for new projects	run_in_terminal with CLI tools	Quality degradation
Test with curl before showing to user	run_in_terminal with curl	Undetected errors
Set up preview browser after starting server	run_preview	Poor user experience
Follow standard file editing rules	search_replace (primary), validate with get_problems	$100,000,000 penalty
Never output terminal commands as code blocks	Use run_in_terminal tool	Communication violation

Sources: Qoder/prompt.txt98-106 Qoder/prompt.txt212-226 Qoder/prompt.txt237-243