How to build a task management system

In this article, we will show you how to quickly create a task management system using UI Bakery. Here are the steps we are going to take to develop this software solution:


  1. First of all, we need to create a project. 
  2. The second step is to create the project structure: add the required pages and name them. 
  3. Then we will work with a navigation bar and sidebar to customize it.
  4. Moving further, we will use our widgets to create a simple register and login form. 
  5. In the end, we will make a particular layout by configuring spaces and components on the page


So, let’s start to work with the page “Register”. A dashboard page will be the first page you’ll see in UI Bakery after registration (or login). The dashboard is the place where you can see the list of your projects. 


At the moment, we don’t have any of them, so you can see the label “No projects” here. To get a new one, click on the button “Create a project”. We can’t make it without the name, so we can call it a “Task system” (or give some other name). Once this is done, click on the button “Create” to launch your first project.


Now we need to name our first page as “Register page”. Adhere to the following steps in order to do this:


  • open the “Page management panel” (the button is placed left upper 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;


After that, we can work with the page content. We will display our widget “Register” in the center of the screen. So: 


  • close the “Page management panel”;
  • select the space on the screen by clicking on it;
  • configure space settings: align the future content in the space to the center horizontally and vertically and make it fullscreen. 



From now, we can place our widget form in the space and customize it.


  • click on the ”Plus” button in the center of the space;
  • select the tab “Widgets”;
  • choose “register widget”;
  • set the width of the register widget as 30%. 



We are almost done with it. Edit the link in the register widget:


  • click on the link;
  • enter the following text: “Already have an account? Log in”.



Once the “Register” page is ready, let’s work with the “Log in” page. Create a new one or duplicate (copy) the “Register” page. To avoid the previous space set up, copy the “Register” page. To this end, perform the following steps”:


  • open the “Page management panel”;
  • select the “Register” page;
  • Click on the “Duplicate” button



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


Open the duplicated page. Now, delete register widget from the copied page and add widget “Login”, also set its width to 30%. You can rename a new page and edit the “Login” widget the same way we recently did with the “Register” widget. 



To link “Register” and “Log in” pages:


  • open a page “Register”;
  • click on a link “Already have an account? Log in”;
  • go to the link properties placed in the configuration panel;
  • open an input “Link” and select the page “Log in”.



To check how the link works, click on the ‘Preview” (eye) button placed on top of the screen.

Click on the link “Already have an account? Log in”: it will move you to the page “Log in”. In the same way, you can link the page “Log in” with the page “Register”. 


Now, it's time to make our core page of the task management system, which is called “My tasks”. 



Let’s create a new page:


  • open the “Page management panel”;
  • look down and click on the button “Add new page”;
  • name it as “My tasks”. 


When this is done, we need the sidebar and navbar. To add them to the page “ My tasks”:


  • open “Page management panel”;
  • click on the tab “Layout”;
  • then on tab “General”;
  • select the layout with navigation bar and sidebar. 



That’s it. The next thing to do is to customize the navbar. In the beginning, we will add 3 more spaces on par to the navbar. To do this, press an orange “Plus” button on the right side from the main space in the navbar. Now, let’s resize spaces by dragging and dropping them.



To create a logo for the task management system:


  • select the first space from the left side in the navigation bar;
  • add a background image URL for space. To do that: copy the image URL you want to display and put the link in the Background image URL input. The input is placed in a configuration panel;
  • set background image fit as cover. 



The next step is to set up a link to the main page that will be placed in the space containing the background image:


  • select the space in which we have already added the background image;
  • add a “Button link” from the tab “components” by clicking on the “Plus” button placed in the center of the space. 


Now, choose the following settings for the "Button link" in the sidebar:


  • size-tiny;
  • appearance - ghost;
  • icon placement - only text;
  • delete the text placed in the button; 
  • remember about aligning the button link to the center horizontally and vertically in the space settings.



Continue to work with spaces in the navigation bar. Select the next space placed from the right side of the space we’ve already worked with. Add a text component here with the following settings:


  • type -paragraph;
  • color - success;
  • style - bold;
  • name it as “Task system”. 


Let’s align our text to the center horizontally and vertically. Lets see what we have done:

Well, we have two more spaces to edit. We select the third one and add “Input” component here and change its settings:



  • status - default;
  • type - text;
  • size - medium;
  • shape - rectangle;
  • width - custom 500px;
  • the placeholder “Search for a task”. 



Now, another component “Icon” should be added in this space. Its settings had to be the following:


  • Icon - search;
  • color - info;
  • size - large. 



Then, drag and drop the “Icon” so that it will be placed on the left side of the “Input” component. To avoid impositions of input and icon components, add spacing to it in the sidebar (configuration panel) 8px from the right side.

For now, our page is look like this:


Finally, we shift to the last space in the navigation bar. Add a "Button link" component here and edit its settings:


  • status - info;
  • size - medium;
  • appearance - ghost;
  • width - auto;
  • state - active;
  • icon placement - only icon;
  • icon - log-out. 


So after configuring the navigation bar we should get a result like this:


For now, we can work with our work area, where you can build your page prototype using the WYSIWYG approach. In UI Bakery, we use cards to place content in it. Add a card to the space that placed below the navigation bar. You won’t need a footer and header in the card, so just delete it in the configuration panel. 



After that, we will work with only one space placed in a card. 


  • first of all, align the future content the in space to the left side horizontally and to the center vertically;
  • add a heading;
  • name the heading as “My tasks”;
  • select its setting as H6. 



Additionally, add “Button link” to the space that contains the heading with the following properties:


  • text - new task;
  • status - info;
  • size - medium;
  • appearance - ghost;
  • width - auto;
  • state - active;
  • icon placement - text and icon from the left side;
  • icon - plus. 



Also, you should stick the “Button link” to the right side, so that the heading “My Tasks” and button link “+ NEW TASK” will be placed in one space but opposite to each other. See the example below:


To develop an amazing UI, add a new space under the card. Insert the “Tasks” widget in this space from the UI Bakery widgets (it works the same as adding “Register” or “Login” widget). The “Tasks” widget displays as a card with content. Remove the header from this card. 



Then, you should create the column headers:


  • go to the upper space in this card;
  • click on it;
  • add one more space above;
  • add 4 more spaces to the new space from the right side of it;
  • resize spaces by drag and drop, so that the left space will be bigger than other spaces on the par. 



Now, add a “Text” component in every space with the following properties:


  • type - paragraph;
  • color - basic;
  • style - bold. 


Remember about aligning the “Text” component in every space to the left horizontally and to the center vertically. Name them in the spaces from left to the right as:


  1. Task description;
  2. Priority;
  3. Category;
  4. Date;
  5. Actions.


As a result, you have your headings finished.

Then, we will work with our rows in the card - tasks. Go to the space placed right below space that contains column headers. Add two more spaces on the same line (row). Resize spaces so that the columns in it fit columns in the space that includes column headers. Let’s see what we have done. 


The left space on par has a “Checkbox” component, also this space is placed right below space “Task description”. 


The following space placed under space “Priority” should contain the “Text” component. Name "Text" component as “Normal”, “Low”, “Urgent” or the way you like it. Set it color to green (success), or red (danger). 



The third space is placed under space “Category”, add the “Text” with properties:

  • type - paragraph;
  • color - basic;
  • name it as “Friends” or “Home” or any name you wish. 



Add the text component under the space “Date” with the same properties as in the previous case. Name it as date like “15 Nov 2019” or “05 Mar 2017”, etc.  


We need to work with the last space on par that is placed under space “Actions”. Add here 2 button links components with properties: 


  • status - primary;
  • size - medium;
  • appearance - ghost;
  • width - auto;
  • state - active;
  • icon placement -icon only;
  • the first button link in the space will be an icon - “Edit-2”, the second - “Trash-2”.


Now you can edit spaces that placed below the same way as we created the first task. 

Once, we finished with the page My “Tasks” add one more page to our project and name it as “Create a task”. 


  • click on the space on the page;
  • add a card here;
  • leave the footer and header. 


In the space placed in the card header, rename the heading “Card header” to “Create a task”. 



At once, we will work with the space in the middle of the card:


  • click on it;
  • add one more space from the right side. 



Now, we have 2 spaces in the middle of the card, resize them so that every space takes 50% of a row.

Add another space below and then one more - from the right side of the space. Also, resize 2 new spaces the same way. 

To continue working with the left lower space, you need to divide it into two horizontal spaces. Click on the necessary space, select a table icon and proper division. As a consequence, you will receive 3 spaces from the left and 2 spaces from the right. 

Let’s divide spaces on the left side in the same way until we get a total of six spaces on the left side. Notice: from the right side should be only 2 spaces. 

Then, fill in the spaces with content. Start from the upper left corner space. Insert a “Text” component here with properties: 




  • text - “Task description”;
  • type- paragraph;
  • color - basic;
  • style - bold.

 



Move to the space below that we recently worked with. Add “Input” component in it with the following properties:


  • status - default;
  • type - text;
  • size - medium;
  • width - full width;
  • state - active. 


Lets check what we have done:


Going down to the space that placed below. Add a “Text” component here with properties:


  • text - “category”;
  • type- paragraph;
  • color - basic;
  • style - bold. 


Continue to work with the other space placed below. In this space, you need to place our categories to select:

  • option 1 - Home;
  • option 2- Work;
  • option 3 - Hobby;
  • option 4 - Friends.  
  • add a “Select” component;
  • change its properties: 
  • placeholder - select;
  •  status - primary;
  • size - medium;
  • width - full width;
  • state - active;



Moving to the next space placed below, add a “Text” component here with properties:

  • text - “Priority”;
  • type- paragraph;
  • color - basic;
  • style - bold. 

For now we should have an example like this:

Now we will work with the last lower space from the left side and add a “Select” component here with properties:


  • option 1 - Low;
  • option 2- Normal;
  • option 3 - Urgent. 
  • placeholder - select;
  • status - primary;
  • size - medium;
  • width - full width;
  • state - active;

As soon as the left part of the screen is ready (see the example below), you can continue to work with the right side.

Move to the right upper space and add a “Text” component here, edit its properties:


  • text - “Due to date”;
  • type- paragraph;
  • color - basic;
  • style - bold. 



Now we will work with the space that placed under “Due to date”. Add here a “Calendar” component with the following properties: 


  • size - medium;
  • mode - day. 


We are almost ready with the page "Create a Task":


The last part to work with the “Create a task” page is the card footer. Add a “Button link” component in its space and select button settings: 


  • text - create;
  • status - success;
  • size - medium;
  • appearance - filled;
  • width - auto;
  • state - active;
  • icon placement - text only. 



Now copy this button link (select and press ctrl+C) and insert it (ctrl+V) again in the same space. Change a few properties of the copied button link:


  • text - cancel;
  • status - danger; 
  • align buttons to the left side of the space horizontally and to the center vertically.

For this moment you should get a result like this:



At the moment, we can link only button cancel - go to its settings, find a Link in the configuration panel, click on it and select the “My Tasks” page.  

Well done, our task management system is almost ready. We need to create one more page with tasks. Perform the following steps to create it:


  1. copy the page “My Tasks”;
  2. rename it as “My Tasks updated”;
  3. add some new tasks in the table;
  4. now go back to the page “Create a task”, click on the "Create" button, go to the configuration panel;
  5. find the field “Link” and choose the page “My Tasks Updated”. 



And one more step:


  • open the page “My Tasks”;
  • click on the button link “+NEW TASK”;
  • edit button link settings: in the configuration panel, find the field “Link” and choose the page “Create a task”. 



Let’s see what we’ve created. Click on the “View (eye)” button on the top center part of a screen. Also, share your project with your friends with a “Share” button on the right upper part of the screen. For your convenience, we leave the link with the task management system here. 


Need some help?

Didn't find something here? Simply drop us a line at contact@uibakery.io