Quickstart: How to build To-Do App using Next.js & Altogic?

Quickstart ToDo Tutorial with Next.js and Altogic

Introduction

This article will cover how to code simple CRUD operations in a todo app using Next.js, and Altogic, a Backend-as-a-Service platform using its client library.

You can check out the demo.

What are the features of the todo app?

1. Create todos
2. Update todos
3. Delete todos
4. Read todos

Set up the backend

Create App

We can create an app with the Altogic Designer fast. To create an app via the Designer:

1. Log in to Altogic with your credentials.
2. Select New app.
3. In the App Name field, enter a name for the app.
4. And click Next.

Create App

1. Choose Blank App template, and click on Next.
2. Click Create on the “Confirm & create” tab.

Choose Template

Here, you can customize your subdomain, but not necessarily to do, Altogic automatically creates one for you, your envUrl. You don’t need to worry if you lost your envUrl; you can get it from the Environments view of Designer.

Get Environment Url

After creating our app, we need envUrl and clientKey to access our app via Altogic Client Library to create a web application.

To get the clientKey we need to enter the app which we have created before and;

1. Click on App Settings at the left-bottom of the Designer.
2. And click on the Client library keys section.

Get Client Key

We can create new clientKey from that page, but thanks to Altogic for creating one clientKey automatically for us, so let’s copy the existing clientKey from the list.

Create todo model

1. Click on Models on the left sidebar.
2. Click New on the right of the screen and select model.
3. Set model name as todo
4. Ensure that Enable timestamps are selected to store the creation date of the blog post.
5. Click Next.

Create model

Altogic provides basic CRUD endpoints and services with the related model by default when you create a new model. Since we use Altogic Client Library, we won’t use these endpoints.

Create Model

We created our first model, ”todo”. We have to define the model properties name, dateTime for the due date, and status. Since we created the todo model, we should define the name property as Text, dateTime as Date-time, and the status as Boolean.

1. Click on the todo model on the Models page.
2. Click on New Field on the right-top of the page.
3. Select Text Field→ Text.
4. Set model name name.
5. Ensure that the Required field is selected.
6. Click Create.

Create Name Field

1. Click on New Field on the right-top of the page.
2. Select Boolean.
3. Set model name status.
4. Ensure that the Required field is selected.
5. Set default value expression false.

Create boolean field

1. Click on New Field on the right-top of the page.
2. Select Date-time.
3. Set model name dateTime.
4. Ensure that the Required field is selected.
5. Set default value expression DATEADD(NOW(),5).

Datetime field

We completed the database design and the model definition on Altogic without any coding and complex configuration. Let’s move on to the front-end development.

Set up the front-end

Initialize a Next.js app

We can use create-next-app​to initialize a Next.js app:

npx create-next-app quickstart-todo

Then, install the Altogic package.

cd quickstart-todo
npm install altogic

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

Now, install Tailwind CSS and create tailwind.config.js

cd ../
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.

How to fetch todos

Inside your useEffect() hook, send a get request to Altogic using altogic.db.model(modelName).get() function of Altogic Client Library. Then, set the data you fetched inside the todos state.

How to add todo

Implement a function called handleAddTodo to send a request to Altogic for creating objects using altogic.db.model(modelName).create({}) function of Altogic Client Library. Then, add the object you just created to todos state using setTodos.

How to toggle todo status

We need to be able to update the status of our todos. We will implement a function called toggleTodo to send an update request to Altogic for updating objects using altogic.db.model(modelName).object(objectId).update({}) function of Altogic Client Library. Then, we will update the todo in the todos state by iterating the array.

How to delete todo

We might also want to delete our todos. We will implement a function called handleDeleteTodo to send a delete request to Altogic for deleting objects using altogic.db.model(modelName).object(objectId).delete() function of Altogic Client Library. Then, we will delete the todo in the todos state by filtering the array.

You can check out the repository for how to show the data we fetch and implement creating/deleting todos.

Conclusion

This article covered how to implement simple CRUD operations 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 the rest of the code. You can also clone it and build your app on top of it.