Create a task management website

In this example, you will take a look at an example website (task management), which we created just using flowize websites, tables, and flows.

You will see an overview picture of the website building process with databases(tables) and flows. how all the dots are connected to work flawlessly in flowize.

Project overview

This is a task management website where the user will have to register and then log in to use the website. Once the user is registered and logged in, it will take them to the website's dashboard, where they can see the tasks, create a new one, and overview all. However, after logout, they will not be able to access the dashboard content.

How to start

To start, go to your Organization and create a project by importing the starter file download here . Once you will import the project, you will have everything (website, database, flow) automatically set up.

download

Download the file from here click here

Website pages

If you go to the website editor, you will see that we have created three website templates—the dashboard, login and error template.

Thanks to the flowize multipage system, you can use the templates, add as many pages as you need, and customize them.

Dashboard Template

We have created an index, task, task overview, and user page from the dashboard template.

Login Template

From the Login Template, we have created register, thank you, verify, sign-in and loader page.

Tables

We are using two table databases for this project.

User table

The user table is storing the user information such as name, email, password, and level.

Field	name	email	password	level
Example row	flowize	Test@test.com	XXXXX	user

Task Table

The task table stores the task information such as task, due date, status, description, comment, user.

Field	task	due date	status	description	comment	user
Example row	build a website	17-06-2021	open	build a nice website	done	1

Flows

We used three flows for this project. Register, Sign In and Dashboard.

Register Flow

We used this flow to register a new user. Flow explanation:

• Take the form data from the registration form.
• Check if the email already exists on the Users Table
• If the user exists, show them the user exits page
• If the user does not exist, we showed them the thank you page and send the user an email with a link to verify.
• The user clicks the link,
• We show them the loading page
• We insert the user data into our User Table
• We take the user email and move it to the Dashboard flow.
• If the user does not click the link within two months, we end the flow.

Sign In Flow

We used this flow to Sign In.

Flow explanation:

• Take the user input (email and password).
• Query the User Table with the email.
• Verify the password.
• If the password is correct, move to the Dashboard flow.
• If the password is incorrect, load the Sign In page.

Dashboard Flow

We used this flow to manage the Dashboard.

Flow explanation:

First, we set the privacy level of the page. Then we have four website status listeners.

• The first one is listening to the task open.
• The second one is listening to a new task.
• The third one is for deleting a task.
• The last one for sign out.

Task open

With this status, when the user clicks the button, we take them to the edit page, let them add a comment and finish the task.
Later, when the user clicks the finish button, we listen to another website status (task-finish), then we simply update the tasks table database and load the overview page.

New task

For the new task, we take the task name and description from the user input and we automatically set the due date to 21 days. Then insert the data into the tasks table, and we show them the index page.

Delete task

For delete task, we simply delete the task from the tasks table database and take the user to the tasks overview page.

Conclusion:

In this example, you saw that with flowize, you can put minimum effort to build websites with a real database. However, you can build more complicated websites by using more tools, custom apps, triggers, webhooks, databases, and flows. Everything is ready for you to use in flowize.

If you have any problem, doubt or comments, remember flowize team is always here to help.