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 UI Bakery. Below are the steps we are going to take to develop this software solution.

  1. Firstly, we need to create a project. 
  2. Secondly, we will build a project structure, i.e. add the required pages and name them. 
  3. After that, we will work with a navigation bar and a sidebar to customize our project structure.
  4. Further, we will use widgets to create a simple register and login form. 
  5. And finally, we will create 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 UI Bakery, 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 call it a Task system, or give it any other name you like. After that, just click Create to launch your first project.

Now, we need to create 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 you in the upper left corner). 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, so we follow these steps: 

  • 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. 

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 your Register widget.
  • Set the width of the widget as 30%. 

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”.

The Register page is ready, and now we can work with the Log in 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.
  • Select the Register page.
  • Click Duplicate.

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 Log in 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.

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

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

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

January 28, 2020

More articles

Don't want to miss anything?

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

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.