diff --git a/examples/Website/README.md b/examples/Website/README.md new file mode 100644 index 0000000..af8d3fa --- /dev/null +++ b/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"( + Note Taking App + +)"); + +HtmlElementView* body = new HtmlElementView("body", R"( +
+

📝 Note Taking App

+ +
+)"); + +// Handle user interactions +addNoteBtn->AddClickListener([&](MouseEvent event) { + std::string noteValue = noteInput->GetValue(); + // Send note to backend + Fetch("http://localhost:3000/createNote", noteValue, [¬eValue](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. \ No newline at end of file