"Tutorial: Building a Collaborative Task List"

Tutorial: Building a Collaborative Task List

Learn how to build a full-stack, collaborative task list app with Vox. This tutorial covers data modeling, server-side logic, and UI integration using a single .vox file.

1. Project Initialization

Create a new directory and initialize a Vox application:

mkdir vox-task-list
cd vox-task-list
vox init --kind application

2. Define the Data Model

Open src/main.vox. We'll start by defining what a "Task" is. Using the @table decorator, we create a persistent database table.

@table type Note {
    title: str
    content: str
}

3. Implement Server Logic

Next, we add @mutation and @query functions to interact with the database.

@query fn get_notes() -> List[Note] {
    ret db.Note.all()
}

@mutation fn create_note(title: str, content: str) -> Result[Id[Note]] {
    let id = db.Note.insert({ title: title, content: content })?
    ret Ok(id)
}

workflow order(id: str) -> Result[Unit] {
    let status = check_inventory(id)
    ret Ok(Unit)
}

4. Build the UI

Now, we'll create the frontend using the @island decorator. Vox islands use a JSX-like syntax that compiles to high-performance hydrated React components.

component App() {
    view: <div>"Hello Vox"</div>
}

5. Wiring It Together

Finally, we map a route to our TaskList component.

// vox:skip
routes {
    "/" -> TaskList
}

6. Build and Run

Compile your app and start the development server:

vox check src/main.vox
vox build src/main.vox
vox run src/main.vox

Visit http://localhost:3000 to see your collaborative task list in action!

Next Steps: