How to create a task management system: prepare a project structure. Part 1

In this article, we will show you how to create a task management system quickly with the help of the UI Bakery internal tool 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.

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. 

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

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

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.

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

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.