Crafter.CppDOM/examples/Website/README.md

# Website Example

This example demonstrates a full-stack web application using Crafter.CppDOM with both frontend and backend components.

![](https://forgejo.catcrafts.net/Catcrafts/Crafter.CppDOM/src/branch/master/examples/Website/Website.png)

## Features

- Shows how to create a complete web application with HTML/CSS/JavaScript frontend
- Illustrates communication between frontend and backend using HTTP requests
- Shows how to handle form inputs and dynamic content rendering
- Demonstrates CRUD operations (Create, Read, Delete) for notes
- Includes proper error handling and loading states

## Usage

The application consists of two components:

1. **Frontend**: Handles UI rendering and user interactions
2. **Backend**: Manages data storage and API endpoints

### Frontend Code

```cpp
import Crafter.CppDOM;
import std;
using namespace Crafter;
using namespace Crafter::CppDOMBindings;

// Create the UI with HTML and CSS
HtmlElementView* head = new HtmlElementView("head", R"(
    <title>Note Taking App</title>
    <style>
        /* CSS styles for the application */
    </style>
)");
    
HtmlElementView* body = new HtmlElementView("body", R"(
    <div class="app-container">
        <h1>📝 Note Taking App</h1>
        <!-- UI elements -->
    </div>
)");

// Handle user interactions
addNoteBtn->AddClickListener([&](MouseEvent event) {
    std::string noteValue = noteInput->GetValue();
    // Send note to backend
    Fetch("http://localhost:3000/createNote", noteValue, [&noteValue](std::string content) {
        // Update UI with new note
        RenderNotes();
    });
});
```

## Building and Running

First, start the backend server:
```bash
cd backend
crafter-build build executable -r
```

Then start the frontend:
```bash
cd frontend
crafter-build build executable
./run.sh
```

Then navigate to `http://localhost:8080/` in your browser.

If caddy is not installed, you can use your favorite static file server instead.