How to

Building a Task Management System: Create a Project Structure. Part 1

Tatiana Yudina

5 min read

In this article, we will show you how to create a task management system quickly with the help of the UI Bakery visual development platform. Below are the steps we are going to take to develop this software solution.

  1. Creating a project. 
  2. Building a project structure, i.e. adding & naming the required pages. 
  3. Working with a navigation bar and a sidebar to customize our project structure.
  4. Creating a simple register and login form using the widgets available in our apps builder. 
  5. Creating a particular layout by configuring spaces and components on the page.

So let’s start working with a "Register" page.

After your successful registration (or login) in the UI Bakery visual apps builder, you will see a dashboard page. The dashboard is a place where you can see the list of your projects. Currently, we do not have any, so there is a No projects label on the dashboard.

To start making a new project, click Create a project. We can’t create it without any name, so we can name it a "Task system", or give it any other name you like. After that, just click "Create" to launch your first project.

A task management system building from scratch in a low code development platform

Now, we need to build our first page, a Register page. To do this, adhere to the following steps:

  • Open the Page management panel (you can find the relevant button in the upper left corner) of our visual apps builder. The page we are currently working with is selected by default.
  • Click on the pen (edit) button.
  • Name the page as "Register".
  • Save changes.

Now, we can work with the page content. We need to display our Register widget in the center of the screen. 

  • Close the Page management panel.
  • Click on the space on the screen to select it.
  • Configure space settings, i.e. center your future content horizontally and vertically in the space, and make it fullscreen. 
Settings allowing to configure a task system from scratch using a low code development platform

We can place our widget in the space and customize it.

  • Click on the Plus button in the center of the space.
  • Select the Widgets tab.
  • Choose the Register widget.
  • Set the width of the widget as 30%. 
Using predefined register widget to build a task management system

We are almost done! Now, let's edit the link in the Register widget in the following way:

  • Click on the link.
  • Type the following text: “Already have an account? Log in”.
Building a login form for a task management system without coding skills

The "Register" page is ready, and now we can work with the Login page. We can create a new page or duplicate (copy) the Register one. Not to deal with the previous space set-up, copy the Register page following the next steps:

  • Open the Page management panel of our visual apps builder.
  • Select the Register page.
  • Click "Duplicate".
How to create login forms in a task management system

UI Bakery has duplicated the page and placed it at the end of the page’s list. 

Now, open the duplicated page. Delete a Register widget from the copied page, add a Login widget, and set its width to 30%. You can rename a new page and edit the Login widget in the same way we have recently done with the Register widget.

To link your Register and Login pages:

  • Open the Register page.
  • Click “Already have an account? Log in.”.
  • Go to the Configuration panel and select the link properties.
  • Open the Link input and select Log in.
Setting links in a login form of a task management system created in a low code development platform

To check whether the link works properly, click on the Preview (an eye icon) button at top of the screen of the UI Bakery visual development platform.

Click “Already have an account? Log in.” to move to your Login page. You can also link the Login page with the your Register just in the same way.

Now, it is time to create the core page of our task management system – My tasks.

January 28, 2020
Tatiana Yudina
Product manager at UI Bakery since it was founded. Eagers to explore new product frameworks to boost productivity and applies the best one. Having been working since 2012, Tanya has solid Business Analyst and UI/UX expertise in both B2B and B2C fields. She enjoys sharing product management and no-code development experience. Feel free to contact her as a guest blog writer or as a speaker on tech events.

Last articles

Don't want to miss anything?

Get updates on the newest stories, case studies and tips right in your mailbox.