To-do App Build Along (PART 3): CRUD & External API Services

Welcome to this step-by-step guide on how to build a fully-functional to-do app using Xano, a powerful no-code platform for creating backend services. In this tutorial, we'll cover querying and manipulating data, implementing CRUD (Create, Read, Update, Delete) operations, handling authentication, and integrating with third-party APIs for email notifications.

Setting Up the Data Model

First, let's set up the data model for our to-do app. In Xano, we'll create the following data tables:

1. Users: This table will store user information, such as username and email.
2. Tasks: This table will hold the details of each task, including the task name, description, due date, and completion status.
3. ToDo Lists: This table will associate each user with their respective list of tasks.
4. Subscriptions: This table will keep track of which users are subscribed to receive notifications for specific tasks.

With the data model in place, we can now start building the app functionality.

Querying and Manipulating Data

Our app will display a list of tasks for the authenticated user, grouped by due date. To achieve this, we'll create a custom endpoint that queries the relevant data from the database.

1. Start by creating a new endpoint and adding the necessary inputs, such as username and show_completed (a boolean to determine whether to display completed tasks or not).

2. Retrieve the user record based on the provided username. If the user doesn't exist, return a 404 error.

3. Use the retrieved user record to find the associated to-do list and fetch all tasks belonging to that list.

4. Aggregate the tasks by due date and order them in ascending order.

5. Update the task due dates to a more human-readable format using Xano's format_timestamp filter.

6. Iterate through the aggregated tasks and retrieve the individual task details, such as task name, description, and completion status.

7. Implement a conditional statement to include or exclude completed tasks based on the show_completed input.

By following these steps, you'll have a custom endpoint that retrieves and manipulates the task data for the authenticated user, grouping tasks by due date and respecting the user's preference for viewing completed tasks.

Implementing CRUD Operations

CRUD operations allow users to create, read, update, and delete tasks. Let's implement these functionalities in our app.

Creating Tasks

To create a new task, you can leverage Xano's built-in functionality for adding records to a database table. Set up an endpoint that accepts the necessary inputs (e.g., task name, description, due date) and create a new record in the Tasks table with the provided information.

Reading Tasks

We've already covered reading tasks in the previous section when querying and manipulating data. The custom endpoint we created retrieves and displays the tasks for the authenticated user.

Updating Tasks

To update an existing task, create a new endpoint that allows users to modify task details. Use Xano's expressions to update only the fields that have been provided in the input, leaving the rest of the fields unchanged.

Deleting Tasks

Implement a separate endpoint for deleting tasks. This endpoint should accept the task ID as input, authenticate the user, and remove the corresponding task record from the database.

Handling Authentication

To ensure that only authorized users can access and modify their tasks, we'll implement user authentication using Xano's built-in authentication system.

1. Enable user authentication for the relevant endpoints (e.g., querying tasks, creating tasks, updating tasks, deleting tasks).

2. Set up pre-middleware to validate the user's access rights before executing the endpoint logic.

3. Utilize Xano's auth token to identify the authenticated user and associate them with their tasks and subscriptions.

By implementing proper authentication, you'll ensure that users can only access and modify their own tasks, maintaining data integrity and privacy.

Integrating with Third-Party APIs for Email Notifications

To enhance our app's functionality, we'll integrate with the Postmark API to send email notifications to subscribed users whenever a task is completed.

1. Set up a Postmark account and obtain the necessary API credentials.

2. Create a new data table (Subscriptions) to store information about users subscribed to specific tasks.

3. Implement endpoints to allow users to subscribe and unsubscribe from task notifications.

4. Set up a database trigger in Xano that will be executed when a task is marked as completed.

5. Within the trigger, query the Subscriptions table to retrieve the list of users subscribed to the completed task.

6. Iterate through the list of subscribed users and send an email notification to each user using the Postmark API.

7. Update the Subscriptions table to mark the email as sent for each user, preventing duplicate notifications.

By integrating with the Postmark API and setting up a database trigger, your app will automatically send email notifications to subscribed users whenever a task is completed, keeping them informed and up-to-date.

Conclusion

Congratulations! You've successfully built a fully-functional to-do app using Xano. This app demonstrates Xano's powerful capabilities, including querying and manipulating data, implementing CRUD operations, handling authentication, and integrating with third-party APIs.

Feel free to explore and expand upon this app by adding additional features, such as task prioritization, due date reminders, or collaboration features. The possibilities are endless with Xano's no-code platform.

If you have any questions or need further assistance, don't hesitate to reach out to the Xano community or support team. Happy coding!