↩ 6/5/2023

Boosting Productivity with Automated Encouragement!

Intro to your “Courier Cheerleading Catalyst”

I absolutely ADORE a good todo app. Todo apps can be an invaluable tool for improving productivity, helping you stay organized and manage tasks effectively. They are the ultimate solution for decluttering the mind and ensuring nothing slips through the cracks.

One of the biggest struggles I faced with other productivity tools was their complexity and lack of user-friendliness. Instead of actually getting things done, I found myself getting lost in confusing interfaces and tangled features. It was incredibly frustrating and counterproductive. That’s why I was determined to create a todo app that prioritized simplicity and intuitive functionality. I envisioned a clean and minimalistic app that allowed me to effortlessly add tasks, organize them according to my own logic, and easily mark them as complete. This newfound simplicity has truly revolutionized my productivity routine and made task management a breeze.

But I didn’t stop there—I wanted to take the sense of accomplishment to the next level. Introducing the “Courier Cheerleading Catalyst”! This feature adds a delightful touch of motivation by sending cheerful notifications to encourage users as they complete their tasks. Celebrating small victories is crucial for maintaining momentum, and these notifications play a pivotal role in reinforcing a sense of accomplishment and progress. With visual and auditory cues acting as rewards, completing tasks becomes even more rewarding, boosting our motivation and fueling our productive streak.

To bring these cheerful notifications to life, we need three key components:

• 1. An app: in our case a task tracker
• 2. Segment: a tool to track events, such as completing a task
• 3. Courier: a tool that sends notifications based on those events

By combining these three essential components, we create an exceptional todo app experience that not only keeps us organized but also adds a delightful touch of motivation and celebration along the way. So let’s get started and embrace the power of cheerful notifications to supercharge our productivity!

I invite you to visit the Github Repo for this app to see all the code. If you find the repository helpful or inspiring, don’t forget to show your support by giving it a star! Your star would be greatly appreciated and would motivate me to continue improving the app and sharing more useful resources in the future. Thank you in advance for your support!

Step 1: Adding Courier as a Destination in Segment

Create a Segment account and workspace then follow the below:

• 1. Go to your sources tab & click on the source you want to add courier to
• 2. Click “Add Destination” & then search for “Courier”
• 3. Now you can click “Configure Courier” and add your destination name
• 4. To finish setup you will need your Courier API key, which you can find here

Now that it is connected you will be able to see all events that Segment is tracking though the Courier app!

Step by step instructions for configuring Segment

Step 2: Importing Segment Analytical Tracking

For this step, I followed closely along to the Quickstart: Analytics.js Tutorial in the Segment Docs. In there they show you two different ways to add the necessary analytic tracking code.

1. You can paste the given code snippet into the tag of your site, or
2. Add Segment to your project as an NPM package: 'install @segment/snippet'

Segment offers a wide range of events that you can keep track of. In my case, I wanted to use Segment’s analytics tracking capabilities to monitor when I finish my todos. To make it happen, I created a special function that checks if all my todos are completed.

const allCompleted = todos.every(todo => todo.status);

function allTodoDone() {
analytics.track("todos completed");
}

return (
	<div>
		.
		.
		.
		<div>{allCompleted ? allTodoDone() : null}</div>
	</div>
)

This function helps me see if I’ve finished everything on my list or if there’s still work left to do. It’s a simple yet effective way to keep tabs on my progress and make sure I stay on top of my tasks.

Note: Please be aware that if you have any ad-blocking extensions enabled, they might interfere with the events being tracked by Segment. As a result, the tracked events may not be sent through and won’t be visible in the logs. Consequently, notifications based on these events will not be sent as well.

Step 3: Importing Courier’s Inbox and Toast Notifications

Oooh the fun part! Adding the Inbox and Toast functionalities. It was incredibly simple to incorporate them into my project. I found all the necessary information this section of the docs.

Literally as easy as:

• 1. npm i @trycourier/react-provider
• 2. npm i @trycourier/react-inbox
• 3. npm i @trycourier/react-toast

Once you’ve completed these steps, you’ll have a cute little ”🔔” icon wherever you choose to place it. This icon will serve as your inbox, hosting all your incoming notifications!

import { CourierProvider } from "@trycourier/react-provider";
import { Inbox } from "@trycourier/react-inbox";
import { Toast, useToast } from "@trycourier/react-toast";

return (
		.
		.
		.
		<CourierProvider userId={USER_ID} clientKey={CLIENT_KEY}>
        <Inbox />
        <Toast />
     </CourierProvider>
)

Step 4: Putting it All Together!

Now you have a fully functional app that sends all your chosen tracking events to a centralized location! However, there is one final step remaining: creating the automations to bring those wonderful notifications to life.

To begin, navigate to the designer section within your Courier app. Here, you can design how you want your notifications to look and what message they should convey. Once you have finalized the design, proceed to the automations tab.

In the automations tab, you will set up the triggers for your notifications. Choose “Segment” as the trigger and specify the name of the event you previously tracked. Next, add the Courier UserID to determine who will receive the notification. From the dropdown menu, select the notification you designed earlier.

And just like that, voila! 🎉

The automation is now set up, and your carefully crafted notification will be sent to the intended recipient.

Exploring how Courier collaborates with Segment to send notifications was an incredibly enjoyable learning experience for me. If you’re interested in delving further into the code or experimenting with the app, feel free to visit the Github Repo and Todo App. Please note that this project is still a work in progress, so be sure to stay tuned for future updates and enhancements!