How to code a complete task management tool with Next.js and Altogic?
Tags: javascript, tailwindcss, webdev, react
Published: 2022-05-24 12:22:01


## Introduction
This article will cover how to code a **complete task management tool** using [Next.js](https://nextjs.org/), and [Altogic](https://altogic.com/), a Backend-as-a-Service platform using its client library.
You can check out the [source code](https://github.com/altogic/altogic/tree/main/examples/nextjs-task-management-app) and [demo app](https://altogic-nextjs-task-management.vercel.app/).
### What are the features of the task management tool?
 1. Create projects.
 2. Create tasks.
 3. Update tasks.
 4. Remove tasks.
 5. Remove projects.
 6. Get all tasks.
 7. Get all projects.
 8. Toggle the done status.
 9. Compute stats using Altogic.

### Youtube Showcase Video
{% embed https://www.youtube.com/embed/BsRWLwo0YWk  %}

## Set up the backend
### Create an app in Altogic
First things first: To use Altogic, we need to create an app in Altogic. We can create an app in [Designer](https://designer.altogic.com/) easily. All you need to do is enter a name for your app.
![Create App](https://cdn-images-1.medium.com/max/2000/0*LIuN0SVRMmSNOHK-.png)
How to create an application in Altogic Designer.
We need envUrl and clientKey to access our environment via Altogic Client Library. envUrl is specific to each environment, and Altogic initially creates one environment for you when you create your app. Here is how to get the envUrl from environment details page.
![Environment variables](https://cdn-images-1.medium.com/max/2800/1*BOnJiPbxiDdhw1JHI91t4Q.png)
We can get the clientKey by clicking on the **App Settings** button in the left-bottom corner of the **Designer** and clicking on the **Client library keys** section.
![Client Library Keys](https://cdn-images-1.medium.com/max/2000/0*2h39MCMzJIP7b-fm)
Here, Altogic already created one for us, but we can create more client library keys and configure the permissions for different keys.
### Create models in Altogic
Models define the **data structure and data validation rules** of your applications. A model is composed of **basic**, **advanced,** and **sub-model** **fields**. As an analogy, you can think of models as tables and fields as columns in relational databases or models as documents and fields as document properties in non-relational databases.
![Create Models](https://cdn-images-1.medium.com/max/2800/0*vzMUDdgKkXhczuEU)
We need to create two models called **todos** and **projects** to keep information of them in the database.
To create a model via the Designer, you have two options. You can either create a model from scratch or a sample JSON document. In either case, first, you need to navigate to the **Models view** in designer and select **+New**.
![Model view](https://cdn-images-1.medium.com/max/5932/1*6uVzdc0nJjFItlet0XbGpQ@2x.png)
After, you can pick a **Model**.
![Model Create Complete](https://cdn-images-1.medium.com/max/2372/1*RN5fkXbY3vIkCAEcUe_eNA@2x.png)
Now, you need to add some fields to your model.
To create a field via the Designer, you need to **Navigate to Models** view and select the model you would like to add the new field. You will be directed to the model details view.
![Model Details](https://cdn-images-1.medium.com/max/5936/1*-Z6egSB_C_ictA8Im2qkPA@2x.png)
 1. In the model details view, select **New field.**
 2. From the dropdown menu, select the **Boolean** that you would like to create.
 3. In the field name, type the name.
 4. Select **Create**
You need to add the following fields:
![Todo Model Fields](https://cdn-images-1.medium.com/max/7456/1*JOcyvPlEiml6QLaAoczEpQ@2x.png)
 1. **name**, which is a **Text.**
 2. **userId**, which is an **Object reference** to the **users** model.
![Model](https://cdn-images-1.medium.com/max/2384/1*OobyOMF-4nNv9UXzGII0Ug@2x.png)
After, you can create the **todos** model in the same way. And add the following fields:
 1. **title**, which is a **Text.**
 2. **description**, which is a **Rich Text**.
 3. **dueDate**, which is a **Date-time**.
 4. **priority**, which is a **Option list** with values “1,2,3”
 5. **userId**, which is an **Object reference** to the **users** model.
 6. **status**, which is a **Boolean**.
 7. **projectId**, which is an **Object reference **to the **projects** model.
 8. **tags**, which is a **Basic values list** of type **Text**.
## Set up the Frontend
### Install the packages
Before you start to use the npx command, make sure you have NodeJS installed in your development environment. Also, installing VSCode and some extensions might be better for faster development.
:bulb: You can visit [https://nodejs.org/en/download/](https://nodejs.org/en/download/) to **download**.
To get started, open the terminal and create a new Next.js project.
    npx create-next-app@latest
Next.js will ask you to name the project. Name it whatever you want; I will use “altogic-task-mgmt-app” for this example. Move to the folder just created and **install the Altogic Client Library**.
    cd altogic-task-mgmt-app
    npm i altogic
Open the project in VSCode.
Install **tailwind CSS** and create tailwind.config.js
    npm install -D tailwindcss postcss autoprefixer
    npx tailwindcss init -p
Add the paths to all of your template files in your tailwind.config.js file.
{% gist https://gist.github.com/myerekapan/50b3f9672e889bf88fa38f46ec5d17f2.js %}
Add the following directives to your globals.css file.
{% gist https://gist.github.com/myerekapan/eab86ff168b0ce5f2620b08f17f2f44c.js %}
Install **Font Awesome** to use the icons.

    npm i --save [@fortawesome/fontawesome-svg-core](http://twitter.com/fortawesome/fontawesome-svg-core)
    npm install --save [@fortawesome/free-solid-svg-icons](http://twitter.com/fortawesome/free-solid-svg-icons)
    npm install --save [@fortawesome/react-fontawesome](http://twitter.com/fortawesome/react-fontawesome)
    npm i @fortawesome/free-brands-svg-icons
Install **@headlesui/react **for styling.
    npm i @headlessui/react

Update the next.config.js file to allow the Next.js Image component to load images from Altogic’s storage. “c1-na.altogic.com” value is retrieved from the envUrl which starts with c1-na.altogic.com in my case.
{% gist https://gist.github.com/myerekapan/54b0d80b8c5e725c0649fec518b8e02f.js %}

### Set up the environment variables

Environment variables are used to **secure** your secret keys, **reuse** them in different places and **reduce** production mistakes. Create a `.env.local` file in the root directory of your application, open the file in your editor and paste the following. You can check more about environment variables in Next.js [here](https://nextjs.org/docs/basic-features/environment-variables).
{% gist https://gist.github.com/myerekapan/ae9bf63d0539388b41dbe9aaccaa677b.js %}
Replace YOUR-APPLICATION-ENV-URL and YOUR-APPLICATION-CLIENT-KEY with the envUrl and clientKey values you retrieved while setting up your backend.
Next, create a file to create the **Altogic Client Library** instance.
    mkdir helpers
    cd helpers
    touch altogic.js
This creates a altogic.js file in the **helpers directory**. Open the file in your editor and paste the following.
{% gist https://gist.github.com/mertyerekapan/f25ea820023879fb19abf54d197bc935.js %}
Here, you need to enter the envUrl and clientKey. Optionally you can paste signInRedirect to redirect your users to the specified sign-in page in some cases. This works in a way that if users try to perform a session-required action while their session has been destroyed, **Altogic** redirects them to the signInRedirect route.

## Let’s start coding!

Now we can start integrating the backend into the frontend. For this, we will create a context for managing the tasks and projects. Inside the context, there will be following and more functionalities.

### Create project objects
Our data models are defined as every task has a project. To create a task, first, we need to create a project. Here is the code for that.

{% gist https://gist.github.com/mertyerekapan/e06848ee7e312070ee30665ea36ec553.js %}

### Create task objects
Later, we can create a task in the database.
{% gist https://gist.github.com/mertyerekapan/8775cdcba06a07c342fa979a723b77dc.js %}

### Manage the states
In the first **useEffect**, we fetch all the projects and tasks from the database. It runs every time when user changes, in other words when they sign in and sign out.
In the second **useEffect**, we clear the filters we applied before, compute the stats from the database, and set the selectedTodos array accordingly. This runs when currentProject or todos changes.
In the third **useEffect**, we set the current project when projects change.
{% gist https://gist.github.com/mertyerekapan/d45a6e2f413b570600ebc7dc305c71b3.js %}

### Compute stats using Altogic

In apps like task management apps, we need to show some statistics to the user. **Altogic** makes it much easier to compute complex statistics in the backend. For this we will use `altogic.db.model(“todos”).group(“priority”).compute({name:“count”,type:“count”})` function. This function groups the **todos** objects by priority and counts them by their group and returns the count of each group in a field named “count”.
You can [check out the documentation](https://clientapi.altogic.com/v1.3.1/classes/QueryBuilder.html#compute) for more information.

{% gist https://gist.github.com/mertyerekapan/e548c99efc0b97af4135f9d9f32598da.js %}

### Toggle the done status

Now we have created projects and tasks, we should implement a function to update the status of the tasks.
We will use update method of the **ObjectManager** in Altogic Client Library.
{% gist https://gist.github.com/mertyerekapan/7024f6a87d1b6bb31a6374c06c54852a.js %}

### Remove a task

To remove a task, we will use the delete method of the **ObjectManager** in Altogic Client Library.

{% gist https://gist.github.com/mertyerekapan/ed53c4a6ddd3d2720ada43c218c00e8b.js %}

### Remove a project

When we remove a project, we need to remove all the tasks in it as well.
To remove a task, we will use the delete method of the **ObjectManager** and the delete method of the **QueryBuilder** in Altogic Client Library.
{% gist https://gist.github.com/mertyerekapan/d766324946b6732fe6ab532171c76ad4.js %}

### Update a task

Users might want to update the title, description, due date, or priority fields of a task.
To update a task, we will use the update method of the **ObjectManager** in Altogic Client Library.

{% gist https://gist.github.com/mertyerekapan/cd227dd88122a14e26590871175d77e4.js %}

### Get all projects

Get all project objects from the database using the get method of **QueryBuilder** in Altogic Client Library.

{% gist https://gist.github.com/mertyerekapan/ffd6d86bfbef21e9b33397dcc19fa179.js %}

### Get all tasks

Get all task objects from the database using the get method of **QueryBuilder** in Altogic Client Library.

{% gist https://gist.github.com/mertyerekapan/b9af56a604c1bf1ff6ecc499f8555aee.js %}

### TaskContext Full Code

In the above, we have connected our frontend application with **Altogic**. There are more functions for sorting, toggling modals, etc. and you can check them from [our repository](https://github.com/altogic/altogic/blob/main/examples/nextjs-task-management-app/context/taskContext.js).

## Conclusion
This article covered how to implement a task management app using [Next.js](https://nextjs.org/), and [Altogic Client Library](https://clientapi.altogic.com/v1.3.1/modules.html). Thanks to [Altogic](https://altogic.com/), we can build most of the functionality with just a few lines of code.
You can check out the [GitHub repository](https://github.com/altogic/altogic/tree/main/examples/nextjs-task-management-app) for other functionalities and the rest of the code. You can also clone it and build your app on top of it.