Build a task manager from scratch

Build a complete app in WeWeb, from an empty project to a published task manager.

In this guide, you build a small app where your users sign in, add tasks, check them off and delete them. Each user only sees their own tasks. Along the way, you use the main parts of WeWeb: sign-in for your users, a table to store data, API endpoints to change it safely, a view to read it, a page to show it, and workflows to make the page react.

You build everything by hand, without AI, so you see how each piece fits with the others. Most steps link to the WeWeb 101 page that explains the feature in more detail.

What you'll build

• A Login, Signup and Forgot password page, created for you by WeWeb.
• A tasks table, where each task stores its name, whether it's done, and the user who owns it.
• Three API endpoints to add, update and delete a task, which only work for the signed-in user's own tasks.
• A My tasks view that only returns the signed-in user's tasks.
• A Home page that lists the tasks, with workflows to add, check off and delete them.

Create the project

1. In the WeWeb dashboard, click New project.
2. Type a Project name, for example Task manager.
3. Click Create project.

The editor first asks What would you like to build?, so WeWeb AI can build a first version for you. In this guide, you build the app yourself:

4. Click Go to Editor (skip) at the top right.

The editor opens on an empty page called Home.

Learn more about creating a project →

Add sign-in for your users

Your users need an account so the app knows whose tasks to show. WeWeb Auth handles sign-up, sign-in and passwords for you.

WeWeb sets up your server and database the first time you add authentication or a table. Since sign-in comes first in this guide, that happens now.

1. Open the Data & API tab at the top of the editor.
2. In the left bar, click the Authentication icon.
3. Choose WeWeb Auth.

4. In Location, choose where your app and its data are hosted. Most builders pick the one closest to them, or to their users.
5. Click Continue.

6. In Auth pages, choose Setup automatically.

WeWeb then creates the database, sets up sign-in, starts the server and adds a few test users. It can take a few minutes. It also adds a Login, a Signup and a Forgot password page to your project, in an Auth folder.

Learn more about securing your application →

Create the tasks table

A table stores your data in rows and columns, like a spreadsheet. Each row of the tasks table is one task.

1. In the Data & API tab, click the Tables icon in the left bar.
2. Choose WeWeb Tables.

3. In Name, type tasks.
4. Leave Create API endpoints to access or update table data on. WeWeb then creates the endpoints your app needs to add, update and delete tasks.
5. Click Continue.

The table already has an id, a name, a createdAt and an updatedAt column. The name column holds the text of each task. Add a column to know whether a task is done:

1. Click + at the end of the column headers.
2. In Column Name, type done.
3. In Column Type, choose True/False.
4. In Default Value, choose False, so new tasks start unchecked.
5. Click Add Column.

Then add a column to know who owns each task. Click + again, and:

2. In Column Name, type owner.
3. In Column Type, choose Link to Users. This links each task to one of your app's users.
4. Turn on Default to current user, so a new task belongs to the user who creates it.
5. Click Add Column.

Learn more about working with data →

Secure the API endpoints

An API endpoint is a link your app calls to create, change or delete data on the server. When you created the table, WeWeb added four endpoints under Table: tasks: Add Row, Delete Row, Get Row and Update Row. They all start as Public, which means anyone who has the link can use them, even without an account. In this step, you make sure only signed-in users can use them, and only on their own tasks.

Delete the endpoint you don't need

Your app reads tasks through a view (you create it in the next step), so it doesn't need Get Row. An endpoint you don't use is one more way into your data, so delete it:

1. In the Data & API tab, click the Backend Workflows icon in the left bar, then API Endpoints. Hover Get Row and click its ⋮ menu.
2. Click Delete, then confirm.

Only allow signed-in users

1. Click Add Row in the list.
2. Under the endpoint name, click Public.
3. Choose Authenticated.

Do the same for Delete Row and Update Row.

Make each new task belong to the signed-in user

Your app sends the data of the new task to Add Row. To be sure nobody can create a task for someone else, set the owner on the server instead:

1. In Add Row, click the Insert rows action.
2. In Data, click the bind icon next to owner, then Edit formula.
3. In the formula window, open the user tab.
4. Open user and click id.

The owner field now shows Auth['user'].id: the ID of the user who calls the endpoint. Set owner the same way in the Update rows action of Update Row, so nobody can give a task to another user.

Only change the signed-in user's own tasks

By default, Update Row and Delete Row change the task whose ID they receive, whoever it belongs to. Add a filter so they only change it when it belongs to the signed-in user:

1. In Update Row, click the Update rows action.
2. In Update mode, choose By Filters.
3. Click Configure Filter.

4. Set the first condition to Where id Is, and bind its value to the Row ID parameter of the endpoint.
5. Click Add condition and set it to And owner Is, then bind its value to the user's id, as you did for Add Row.

Do the same in the Delete rows action of Delete Row: choose By Filters in Delete mode, and add the same two conditions.

Learn more about creating secure logic →

Create a view of the user's tasks

A view is a saved way to read a table: which rows, which columns, and who can read them. Your page uses it to list the tasks.

1. In the Data & API tab, open the tasks table and click New view.
2. Click the ⋮ menu of the new view, rename it My tasks, and click Save.
3. Click Public in the view toolbar and choose Authenticated, so only signed-in users can read it.

4. Click Filter, then Add condition, and set it to Where owner Is. Bind its value to the user's id, as you did for the endpoints.
5. Click Save.

The view now only returns the tasks of the user who asks for them.

Learn more about views →

Build the page

Open the Interface tab. You build the page on Home.

Add the elements

1. Click the + icon at the top of the left bar to open the Add panel.
2. Drag a Section onto the page.
3. Drag a Heading, an Input, a Button and a Container into the section, in this order.
4. Drag an H Flex into the container.
5. Drag a Checkbox and another Button into the H Flex.

Double-click the texts to change them: My tasks for the heading, Add task for the first button, and Delete for the second one. To place an element in the right spot, you can also drag it in the Layout panel, which shows the page as a tree:

OPTIONAL STYLING

Select the H Flex and, in Layout, change Justify so the Delete button sits at the right end of each row.

Learn more about adding elements to the page →

Show one row per task

The container repeats its content once for each task of the view.

1. Select the Container. In Specific, turn Repeat Items on. WeWeb shows three example rows until you bind the data.
2. Click Items to bind it.
3. In the formula window, open the data tab.
4. Open tasks - My tasks and click data.

The list now shows one row per task. In the Layout panel, the H Flex shows a Template label: it's the row that WeWeb repeats.

Show the task in each row

The text of the checkbox shows the task name.

1. In the Layout panel, open the Checkbox and select the Text inside it. Click Edit formula next to its text.
2. Under item.data, click name. item is the task of the row.

Then check the box when the task is done:

1. Select the Checkbox itself and open its Settings tab.
2. In Specific, click the bind icon next to Init value, and bind it to item.data.done.

Add a task

A workflow is a list of actions that runs when something happens on the page, here a click on the Add task button.

1. Select the Add task button and open its Workflows tab.
2. Click New.

3. Choose On click.

4. Name the workflow Add task and click Continue.

Then add the action that calls your Add Row endpoint:

1. Click Add an action.
2. Choose From Data & API.
3. Choose API.
4. Choose Table: tasks.
5. Choose Add Row.

In the Add Row action:

1. Bind name to the value of the field: in the formula window, under the components of the page, click Input - value.
2. Set done to False.

Leave owner empty: the endpoint sets it to the signed-in user.

Last, refresh the list so the new task shows up:

1. Click Add an action under Add Row, choose From Data & API, then Table View: Fetch.
2. In Table View, choose My tasks.

Learn more about adding interactivity →

Check off a task

When a user checks or unchecks a task, save it in the table.

1. Select the Checkbox, open its Workflows tab and click New.
2. Choose On change, name the workflow Toggle task and click Continue.
3. Add an action: From Data & API, then API, Table: tasks and Update Row.

In the Update Row action:

1. Bind Row ID to item.data.id, the ID of the task of the row.
2. Bind name to item.data.name, to keep the name as it is.
3. Bind done to the new value of the checkbox: in the formula window, open the event tab and click value under Event.

Delete a task

1. Select the Delete button, open its Workflows tab and click New.
2. Choose On click, name the workflow Delete task and click Continue.
3. Add an action: From Data & API, then API, Table: tasks and Delete Row. Bind its Row ID to item.data.id.
4. Add a second action: From Data & API, then Table View: Fetch, and choose My tasks.

Make the page private

Your data is already safe: the view and the endpoints only work for signed-in users. Now send visitors who aren't signed in to the Login page, instead of showing them an empty list.

1. Click the gear icon next to Home at the top of the page, then Private access.
2. In Who can access this page, choose Authenticated users.
3. In Page for unauthenticated users, choose Login. In Page for unauthorized users, choose Login too.

Learn more about private pages →

Test and publish your app

Click Preview at the top of the editor and try your app: add a task, check it off, and delete it.

When everything works, publish your app to put it online:

1. Click Publish at the top right of the editor.
2. Click Publish your app.

3. Add a comment if you want, then click Publish.

Since your app uses the WeWeb database, WeWeb then asks what to do with your data. On the first publish, it copies your editor data to the live app. When it's done, open your app: since Home is private, you land on the Login page first.

Learn more about publishing your application →

CONTINUE LEARNING

Now that your first app is live, see more examples of what you can build with tables, API endpoints and backend workflows:

Data & API build guides →