How to code a complete task management tool with Next.js and Altogic?

Introduction

This article will cover how to code a complete task management tool using Next.js, and Altogic, a Backend-as-a-Service platform using its client library.
You can check out the source code and demo 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

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 easily. All you need to do is enter a name for your app.

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.

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.

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.

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.

After, you can pick a Model.

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.

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:
5. name, which is a Text.
6. userId, which is an Object reference to the users model. After, you can create the todos model in the same way. And add the following fields:
7. title, which is a Text.
8. description, which is a Rich Text.
9. dueDate, which is a Date-time.
10. priority, which is a Option list with values “1,2,3”
11. userId, which is an Object reference to the users model.
12. status, which is a Boolean.
13. projectId, which is an Object reference **to the **projects model.

14. 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.
    💡 You can visit 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.
    

    Add the following directives to your globals.css file.
    Install Font Awesome to use the icons.

    npm i --save @fortawesome/fontawesome-svg-core
    npm install --save @fortawesome/free-solid-svg-icons
    npm install --save @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.

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.

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.

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.

Create task objects

Later, we can create a task in the database.

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.

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 for more information.

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.

Remove a task

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

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.

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.

Get all projects

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

Get all tasks

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

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.

Conclusion

This article covered how to implement a task management app using Next.js, and Altogic Client Library. Thanks to Altogic, we can build most of the functionality with just a few lines of code.
You can check out the GitHub repository for other functionalities and the rest of the code. You can also clone it and build your app on top of it.