website readme

examples/Website/README.md

@@ -0,0 +1,71 @@
+# Website Example
+
+This example demonstrates a full-stack web application using Crafter.CppDOM with both frontend and backend components.
+
+## 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.