Forem: haimantika mitra

How to Deploy Hermes' Self-Improving AI Agent

haimantika mitra — Tue, 26 May 2026 16:00:00 +0000

Key takeaways

You host Hermes on a DigitalOcean Droplet (Ubuntu 24.04, at least 2 vCPUs and 4 GB RAM), install with the official script, and run hermes setup for your LLM provider.
The Telegram bot uses hermes gateway setup and a persistent gateway service so Hermes stays reachable after you close SSH.
Skills are Markdown files under ~/.hermes/skills/. MCP servers go in Hermes config and expose tools such as grocery search and cart actions.
HTTP MCP with OAuth on a headless server uses the URL Hermes prints plus an SSH tunnel from your laptop browser to the Droplet loopback port.
The grocery walkthrough uses Swiggy Instamart where available; you swap in another MCP URL for your region or stack.

2026 is the year of agents doing the task for us rather than just guiding us to. We saw the rise of OpenClaw and now we have Hermes agent. It is an open-source, self-improving AI agent built by Nous Research. It has a built-in learning loop that creates skills from experience, improves them during use, nudges itself to persist knowledge, and builds a deepening model of who you are across sessions.

In this tutorial, you will deploy Hermes on a DigitalOcean Droplet, connect it to Telegram, and extend it with a custom skill. As a practical example, you will see how to build a grocery tracking agent that monitors daily consumption, alerts you when stock is low, and places orders automatically through a grocery delivery service.

The grocery example uses Swiggy Instamart, which is available in India. But the approach works with any MCP-compatible service, such as a local grocery API, a task manager, a calendar, or a home automation system. The pattern is the same no matter what you connect.

Prerequisites

Before you begin, you will need:

A DigitalOcean account. If you do not have one, sign up here.
A DigitalOcean Droplet running Ubuntu 24.04 with at least 2 vCPUs and 4 GB RAM.
A Telegram account.
API key from an LLM provider. Hermes supports Anthropic, OpenAI, OpenRouter, and others.

What are we building

Hermes is model-agnostic and platform-agnostic. It can connect to any tool that supports the Model Context Protocol (MCP), and it can send and receive messages on Telegram, WhatsApp, Discord, and Slack. You can find more information on their documentation.

The architecture in this tutorial looks like this:

Let’s get started building:

Step 1. Create the Droplet

On the creation page, select:

Region: The one closest to you
Image: Ubuntu 24.04 LTS
Plan: Basic, with at least 2 vCPUs and 4 GB RAM (the s-2vcpu-4gb size)
Authentication: SSH Key

If you need help adding an SSH key, follow the DigitalOcean SSH key guide.

Once the Droplet is created, SSH into it:

ssh root@YOUR_DROPLET_IP

Update the system before installing anything:

apt update && apt upgrade -y

Step 2. Install Hermes Agent

Hermes provides an install script that handles all dependencies including Python, uv, and the hermes binary itself.

curl -fsSL https://raw.githubusercontent.com/NousResearch/hermes-agent/main/scripts/install.sh | bash

Once it finishes, reload your shell so the hermes command is available:

source ~/.bashrc

Run the setup wizard:

hermes setup

The wizard will ask you to choose an LLM provider and enter your API key. Select your provider, paste your key, and Hermes will save it to ~/.hermes/.env.

Verify the installation:

hermes --version

Step 3. Connect Hermes to Telegram

Hermes connects to Telegram through a bot. Run the gateway setup:

hermes gateway setup

When it asks which platform to use, select Telegram. Hermes will walk you through creating a bot with Telegram's BotFather. Follow the steps in your terminal.

Once setup is complete, start the gateway:

hermes gateway start

To keep it running after you disconnect from the Droplet, enable it as a system service:

systemctl enable hermes-gateway
systemctl start hermes-gateway

Open Telegram, find the bot you just created, and send it a message like "hello." If it responds, Hermes is connected and ready.

You can now talk to Hermes from anywhere on your phone. Ask it to check the weather, set a reminder, search the web, or run a command on your Droplet. It handles all of this out of the box.

Step 4. Understand skills and MCP servers

Before building the automation example, let's understand two core Hermes concepts:

Skills - These are Markdown files that teach Hermes how to handle specific tasks. You write a skill file describing what the task is, what triggers it, and what steps to follow. Hermes reads all skill files in ~/.hermes/skills/ at startup and uses them to handle relevant requests.

MCP Servers - It gives Hermes access to external services. MCP (Model Context Protocol) is an open standard that lets AI agents communicate with APIs in a structured way. If a service publishes an MCP server, Hermes can search its products, manage carts, read calendars, create tasks, and more. You add MCP servers to your Hermes config and Hermes uses them automatically when relevant.

Together, skills and MCP servers let you build automations that are specific to your life and the tools you use.

Step 5. Build real-world automation: Grocery tracking

Personally, I am very bad at keeping a tab of groceries and often find myself out of essential stock just when I am about to cook. So I wanted to automate this process for me. I eat similar food everyday and also measure my calories. I used all of this information to automate grocery shopping for me.

The goal of Hermes was to track my daily grocery consumption, alert me on Telegram when something is running low, and place an order through a grocery delivery service when I say yes.

This example uses the Swiggy Instamart MCP server, which is available in India. If you are in a different country, you can swap it out for any MCP-compatible grocery or delivery service. The skill logic stays exactly the same.

Creating the skill file

Create a directory for the skill:

mkdir -p ~/.hermes/skills/grocery

Create the skill file:

nano ~/.hermes/skills/grocery/grocery_tracker.md

Paste the following and edit the groceries: section to match your actual diet and quantities:

# Grocery Auto-Order Skill

### My Daily Grocery List

groceries:
  - name: "Milk"
    unit: "ml"
    daily_consumption: 500
    reorder_quantity: 2000
    alert_threshold_days: 3
    search_query: "fresh milk 1 litre"

  - name: "Eggs"
    unit: "pieces"
    daily_consumption: 2
    reorder_quantity: 12
    alert_threshold_days: 3
    search_query: "eggs 12 pack"

  - name: "Oats"
    unit: "gm"
    daily_consumption: 60
    reorder_quantity: 1000
    alert_threshold_days: 7
    search_query: "rolled oats 1kg"

  # Add your own items following the same format

### Instructions for Hermes

#### Daily check
Read ~/.hermes/grocery_inventory.json. Subtract each item's
daily_consumption from its current quantity. For any item where
quantity / daily_consumption is less than or equal to
alert_threshold_days, send a Telegram alert listing the low
items and ask if the user wants to place an order.

#### On YES
Search each low item using its search_query at the user's saved
delivery address. Add reorder_quantity of each to cart. Send a
cart summary via Telegram with prices and total. Wait for CONFIRM.

#### On CONFIRM
Place the order. Update grocery_inventory.json with the restocked
quantities. Send a delivery confirmation message.

Save with Ctrl+O, then Enter, then exit with Ctrl+X.

Creating the inventory file

The inventory file tracks how much of each item you have at home right now.

nano ~/.hermes/grocery_inventory.json

{
  "last_updated": "2026-05-07",
  "delivery_address": "YOUR FULL ADDRESS HERE",
  "snooze_until": null,
  "items": {
    "Milk": { "quantity": 1000, "unit": "ml" },
    "Eggs": { "quantity": 6, "unit": "pieces" },
    "Oats": { "quantity": 300, "unit": "gm" }
  }
}

Replace the quantities with what you actually have at home. Save and exit.

Connect to an MCP server

Add the grocery service MCP to your Hermes config:

hermes config edit

Scroll to the bottom of the file and add your MCP server. For Swiggy Instamart:

mcp_servers:
  swiggy-instamart:
    url: "https://mcp.swiggy.com/im"
    auth: oauth

For any other MCP-compatible service, replace the name and URL with the values from that service's documentation.

Save and exit, then verify it appears:

hermes mcp list

Step 6. Authenticate with your MCP server

Most MCP servers require OAuth authentication. Because your Droplet is headless, the OAuth callback needs to reach your browser through an SSH tunnel.

Run the login command on your Droplet:

hermes mcp login swiggy-instamart

Hermes will print a URL containing a port number in the redirect URI, like http://127.0.0.1:45123/callback. Note that port number.

On your local machine, open a new terminal and run the SSH tunnel using that port:

ssh -i ~/.ssh/id_ed25519 -L 45123:127.0.0.1:45123 root@YOUR_DROPLET_IP

Keep that terminal open, then immediately open the URL from your Droplet in your browser and complete the login. You have about 30 seconds before the token expires, so have both terminals ready before you start.

When authentication succeeds, your Droplet terminal will show:

✓ Authenticated — tools available

Telling Hermes Your Current Stock

Start Hermes and initialize the inventory:

hermes

Type:

Set up my grocery tracker. Ask me for current stock levels for each item in the grocery_tracker skill.

Hermes will ask about each item one by one. Answer with what you currently have at home and it will update grocery_inventory.json automatically. Once you have given the update, you will receive a message similar to this:

Setting up the daily alert

Still inside Hermes, set up the cron job:

Add a daily cron at 8am: check my grocery inventory using the grocery_tracker skill, subtract daily consumption, and send me a Telegram message if anything is running low.

Hermes will schedule this and confirm. From now on, every morning it checks your stock and messages you on Telegram if you need to reorder. This is how it looks:

Step 7. Test the full flow

Send a test message to your Telegram bot:

Check my groceries and tell me what's running low.

You should receive a Telegram message like this:

Reply YES. Hermes searches your connected grocery service, builds a cart, and sends a summary.

Once everything is set up, you can manage your agent entirely from Telegram:

Message	What Hermes does
`Check my groceries`	Shows all items and days of stock remaining
`I bought 12 eggs`	Updates egg stock in the inventory file
`Order groceries now`	Skips the check and goes straight to ordering
`What's running low?`	Lists items near their alert threshold
`SKIP`	Snoozes today's alert until tomorrow

Conclusion

You now have a self-hosted AI agent running on DigitalOcean that works for you around the clock. Hermes connects to Telegram and more messaging platforms so you can reach it from anywhere, and skills plus MCP servers let you extend it to handle almost anything.

The grocery automation you built in this tutorial is a starting point. The pattern is reusable: write a skill file that describes the task, connect an MCP server that gives Hermes access to the right service, and set a cron job to trigger it automatically. The grocery automation is one example. The same pattern works for any repetitive task in your life. A few ideas to get you started:

Bill reminders- Create a skill that tracks recurring payments, calculates due dates, and alerts you three days before each bill is due.

Health tracking- Log your workouts or meals via Telegram and have Hermes summarize your week every Sunday.

Home automation- Connect Hermes to a smart home MCP server and have it adjust lights, thermostats, or appliances based on a schedule or your location.

Automating onboarding emails with n8n and AutoSend

haimantika mitra — Tue, 23 Dec 2025 04:15:43 +0000

Building a SaaS? The first thing you will build in your SaaS platform is the onboarding process. In my last article, you learned how to build the authentication system, and in this article, you will learn how you can automate the welcome emails during sign-up.

To build this, we will be using n8n and AutoSend, here’s a little about both the tools:

n8n: n8n is an automation tool that lets you connect apps and services without writing glue code everywhere. You build workflows visually, trigger something (like a webhook), run logic, call APIs, transform data, and ship results where you need them. It’s open-source, self-hostable, and flexible enough to power everything from simple automations to production-grade backend workflows.
AutoSend: AutoSend is a developer-first email API that makes sending transactional emails simple and reliable. You define templates once, trigger emails via an API or webhook, and AutoSend handles delivery, retries, and tracking.

Here’s what we will be building today:

Understanding the workflow

What happened above is, as soon as the user signed up with their details, a webhook was triggered which then made a Http call to the AutoSend API and sent the welcome email.

Here’s the entire workflow diagram:

To explain the entire process step-by-step:

User fills signup form

Frontend collects and sends this to n8n Webhook via POST:

{

"name": "Haimantika",

"email": "test@gmail.com"

}
Webhook receives the request

Data lands in:

$json.body.name

$json.body.email
n8n makes an API call to AutoSend:

POST https://api.autosend.com/v1/mails/send

And sends structured email payload:


`{`  
 `"from": { "email": "no-reply@saascode.in", "name": "Team SaaSCode"`   
`},`  
    `"to":   { "email": "test@gmail.com", "name": "Haimantika" },`  
  `"subject": "Welcome to SaaSCode 🎉",`  
  `"html": "<h1>Hello Haimantika</h1>"`  
    `}`

Finally, AutoSend validates the request, renders the template and sends the email

Building the n8n workflow

The n8n workflow is simple, all that it includes is a webhook and a http request.

To build the workflow, here’s how you need to configure them:

Add a webhook, change the HTTP method to POST, give the path a unique name, e.g user-signup and then keep the response timing to Immediate. Copy the production URL and then keep it saved, we will add it to our application later.

Then you need to add a HTTP request, in that add the https://api.autosend.com/v1/mails/send endpoint and keep the method as POST. a. Once this done, you need to add two headers: i. Authorization: Bearer <API key> ii. Content-type: application/json b. Next, you will need to add a JSON body. Copy and paste the JSON below. Update the email and the message:

{
  "from": {
    "email": "test@saascode.in",
    "name": "Team SaaSCode"
  },
  "to": {
    "email": "{{$json.body.email}}",
    "name": "{{$json.body.name}}"
  },
  "subject": "Welcome to SaaSCode 🎉",
  "html": "<h1>Hello {{$json.body.name}}</h1><p>Thanks for joining!</p>",
  "text": "Hello {{$json.body.name}}, Thanks for joining!"
}

The final step is to save and publish the workflow.

Frontend integration

The next step is to connect the frontend to the n8n workflow. For this particular demo, we are using a single index.html file and you can find the reference code here.

The frontend uses the native fetch API to communicate with n8n. When the user submits the sign-up form, we prevent the default browser behavior and aggregate the input values into a JavaScript object:

const formData = {
  name: fields.name.input.value.trim(),
  email: fields.email.input.value.trim(),
  password: fields.password.input.value,
};

Then we send a POST request to the n8n webhook endpoint.

Note: We include the Content-Type: application/json\ header so n8n can automatically parse the body.

const response = await fetch(
  "https://hmitra.app.n8n.cloud/webhook-test/user-signup", //the url we copied from n8n
  {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(formData),
  }
);

Wrapping up

That’s really all there is to it.

With one webhook and one HTTP request in n8n, you’ve automated one of the most important parts of any SaaS: the first email a user receives after signing up. No background jobs, no custom mailer logic, no retry handling code scattered across your backend.

What I like about this setup is the clear separation of responsibility:

The frontend just collects user input and sends it somewhere.
n8n acts as the glue and the control plane.
AutoSend sends emails.

Once this is in place, you can keep extending it without touching your application code. Want to send a follow-up email after 24 hours? Add a Delay node. Want to route enterprise signups to a different template? Add a condition. Want to notify your internal team on Slack? Same workflow, one more node.

This is also why I prefer workflows for things like onboarding. These flows change often, especially early on. Keeping them outside your core codebase makes iteration much faster and much safer.

If you’re building a SaaS, this is one of those “set it up once and forget about it” pieces that pays off immediately.

Here’s some resources if you would like to learn more:

Hope you enjoyed reading this quick tutorial. Will see you next year with more such quick and fun content!

Building OTP based authentication system with Clerk and Autosend

haimantika mitra — Wed, 26 Nov 2025 17:05:17 +0000

Vibe-coding has got us thinking more about security. Earlier this year, we saw Leo’s SaaS under attack, it was experiencing bypassed subscriptions, abused API keys, and database corruption.

Big tech giants are focusing a lot on building applications that are AI+security first. As developers, every solution that we build now needs security to be built into the design phase. The first step to any application (SaaS or not) is authentication, and companies like Clerk, Auth0, etc., have already made it easier for us to build authentication systems that are secure.

While you can also use their pre-built solutions, you might also need to plug and play custom solutions, and this is exactly what we will learn in this blog: how we can use Clerk’s authentication system with Autosend to build a secure authentication system.

To follow this article end-to-end, you will need:

Working knowledge of Next.js
A Clerk account
An Autosend account

What is Autosend?

I recently discovered Autosend on X and thought about playing around with it over the weekend. By definition, Autosend is an email platform for developers and marketers to send and track transactional and marketing emails. If you have used other platforms like Resend and Twilio, it does compare with them. What stood out for me is the developer experience; the product is easy to use with a clear developer journey outlining the steps to follow to send a successful email, and the documentation is very easy to follow as well. Although it does not have a free account, the paid tier for someone like us starts from $1, where you can send up to 3000 emails, which is more than enough for people like us building hobby projects.

Integration flow

To build this entire thing wouldn’t take you more than an hour. To make things easy, we are using Clerk’s Next.js starter guide (you can also copy the prompt and get started faster in your AI IDE of choice/use the Cursor button) and then replace the email verification part with Autosend.

In this implementation, Clerk manages user accounts and sessions, while Autosend handles email delivery for verification codes. Unlike Clerk's built-in email verification, we generate and validate our own codes, giving us complete control over the email content, delivery, and user experience.

Step-by-Step Process: Building the Authentication Flow

The authentication flow consists of six main stages: User Registration, Code Generation, Email Delivery, Code Verification, Validation, and Session Creation. Let's break down each step to understand how Clerk and Autosend work together to create a secure authentication experience.

Step 1: User initiates signup

When a user visits the /signup page and submits their credentials, the process begins.

The signup page (app/signup/page.tsx) presents a beautiful gradient-styled form where users enter their email and password. When they click "Sign Up", the handleSubmit function is triggered:

const handleSubmit = async (e: React.FormEvent) => {
  e.preventDefault();

  // Create the sign-up with Clerk
  await signUp.create({
    emailAddress: email,
    password,
  });

  // Send verification code via Autosend
  const response = await fetch("/api/send-verification", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ email }),
  });

  if (response.ok) {
    setPendingVerification(true); // Show code input screen
  }
};

What's happening under the hood

Clerk's signUp.create() creates a user account in their system
The account is created but not yet verified
A POST request is sent to the /api/send-verification endpoint
The UI switches to show the verification input screen

Important configuration

Disable Clerk’s built-in email verification:

Go to Clerk Dashboard
User & Authentication → Email, Phone, Username
Turn OFF “Verify at sign-up”
Save changes

This allows verification to be handled by Autosend instead of Clerk.

Step 2: Backend generates verification code

The /api/send-verification endpoint generates and stores a verification code.

Code generation

function generateCode(): string {
  return Math.floor(100000 + Math.random() * 900000).toString();
}

Storage with expiration

const code = generateCode();

verificationCodes.set(email, {
  code,
  expiresAt: Date.now() + 10 * 60 * 1000, // 10 minutes
});

Triggering email delivery

const result = await sendVerificationEmail(email, code);

if (!result.success) {
  verificationCodes.delete(email);
  return NextResponse.json({ error: result.error }, { status: 500 });
}

return NextResponse.json({
  success: true,
  message: "Verification code sent via Autosend",
});

Step 3: Autosend delivers the email

The email is constructed and sent through Autosend’s API.

Email construction

export async function sendVerificationEmail(
  email: string,
  code: string,
  name?: string
): Promise<AutosendResponse> {
  return sendEmail({
    to: { email, name },
    subject: `Your verification code: ${code}`,
    html: htmlTemplate,
    text: plainTextVersion,
  });
}

API call

const response = await fetch("https://api.autosend.com/v1/mails/send", {
  method: "POST",
  headers: {
    Authorization: `Bearer ${process.env.AUTOSEND_API_KEY}`,
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    from: {
      email: process.env.AUTOSEND_FROM_EMAIL,
      name: process.env.AUTOSEND_FROM_NAME || "Authentication"
    },
    to: { email },
    subject: `Your verification code: ${code}`,
    html: options.html,
    text: options.text,
  }),
});

Step 4: User enters verification code

The user enters the 6-digit code in the UI.

Verification screen

<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
  <p className="text-sm text-blue-800">
    📧 We've sent a verification code to <strong>{email}</strong> via Autosend.
  </p>
</div>

<input
  type="text"
  value={code}
  onChange={(e) => setCode(e.target.value)}
  placeholder="Enter 6-digit code"
  maxLength={6}
  className="text-center text-2xl font-mono tracking-widest"
/>

Step 5: Backend validates the code

The /api/verify-code endpoint performs strict validation.

Validation logic

export async function POST(req: NextRequest) {
  const { email, code } = await req.json();

  const stored = verificationCodes.get(email);
  if (!stored) {
    return NextResponse.json(
      { success: false, error: "No verification code found. Please request a new one." },
      { status: 400 }
    );
  }

  if (stored.expiresAt < Date.now()) {
    verificationCodes.delete(email);
    return NextResponse.json(
      { success: false, error: "Verification code has expired. Please request a new one." },
      { status: 400 }
    );
  }

  if (stored.code !== code) {
    return NextResponse.json(
      { success: false, error: "Invalid verification code. Please try again." },
      { status: 400 }
    );
  }

  verificationCodes.delete(email);

  return NextResponse.json({
    success: true,
    message: "Email verified successfully",
  });
}

Step 6: Complete signup and create session

After verification, Clerk finalizes signup and creates the user session.

Checking status

console.log(`SignUp status: ${signUp.status}`);
console.log(`Created session ID: ${signUp.createdSessionId}`);

Creating the session

if (signUp.status === "complete" && signUp.createdSessionId) {
  await setActive({ session: signUp.createdSessionId });

  setIsRedirecting(true);
  setError("");
  setLoading(false);

  setTimeout(() => {
    window.location.href = "/";
  }, 1000);
}

And finally, users see a success screen and are then redirected to the homepage fully authenticated.

Complete flow visualization

A visual diagram showing how Clerk, the API routes, Autosend, and the frontend connect together to build the entire authentication system.

Ending Notes

And that’s how you can easily build a fully functional and customizable authentication flow for your applications.

A few things to keep in mind as you build on top of this:

Security enhancements: Consider adding rate limiting to prevent abuse, you don't want someone spamming your verification endpoint. Also, think about implementing attempt limits (maybe 3-5 tries) before requiring a new code.
User experience: The 10-minute expiration works well, but you might want to add a "Resend code" button with a cooldown timer. Users appreciate this when emails take longer to arrive or they accidentally delete them.

This pattern isn't limited to just signup flows either. You can use the same Clerk + Autosend combination for password resets, or magic link authentication. The beauty is that once you understand how these pieces fit together, you can adapt them to whatever authentication pattern your application needs.

If you are interested to learn more about authentication,email platforms, and 2FA here are some helpful resources:

Mood Map - Draw all your feelings

haimantika mitra — Sun, 19 Jan 2025 17:56:53 +0000

This is a submission for the GitHub Copilot Challenge : Transitions and Transformations

What I Built

This year started with being diagnosed with PCOD, which means mood swings are a common part of my life. I go from feeling a ton of emotions in a day to nothing at all. Along with me, 60% of other women have it (yes, PCOD is that common).

But mood swings are not just limited to people with a uterus. Every human being experiences certain moods and emotions daily. So I built the Mood Map app to help turn these moods and feelings into masterpieces.

Sneak peek of the app:
// Detect dark theme var iframe = document.getElementById('tweet-1881038179018690665-252'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1881038179018690665&theme=dark" }

Building the app

I started building the app with listing 12 basic emotions that a human might feel, here’s a list of them:

Happiness
Sadness
Fear
Disgust
Anger
Excitement
Confusion
Envy
Empathetic
Sympathy
Triumph
Satisfaction

And then, asked GitHub Copilot to list me one shape and colour that represents these moods. This is what it suggested:

Mood	Shape	Color
Happiness	Circle	Bright Yellow
Sadness	Teardrop	Deep Blue
Fear	Sharp Triangle	Dark Purple
Disgust	Irregular Blob	Olive Green
Anger	Jagged Spike	Fiery Red
Excitement	Starburst	Electric Blue
Confusion	Spiral	Pale Gray
Envy	Twisting Vine	Deep Green
Empathetic	Interlocking Loop	Warm Peach
Sympathy	Gentle Wave	Light Blue
Triumph	Upward Arrow	Gold
Satisfaction	Square	Earthy Brown

For the final step before coding, I went to Excalidraw to visualize how my app would look like, and then built this structure:

Demo

You may not know how to use a paintbrush, but with technology, everyone can be an artist. So try out the app here 👉 https://mood-mapdraw.vercel.app/ , and when you do, feel free to share and tag me on X @HaimantikaM.

Repo

Haimantika / Mood-map

Mood Map Creator

A web-based interactive tool for creating drawings, based on mood. This can help you relax and relieve stress.

Features

Draw and manipulate shapes on a canvas
Color selection for shapes
Shape customization
- Resize shapes using slider controls
- Rotate shapes with precise angle control
- Copy, cut, and paste shapes
Download created mood maps as PNG files
Fully keyboard accessible
Screen reader friendly

Technologies

Next.Js
Tailwind CSS
Lucide React (for icons)

Installation

# Clone the repository
git clone https://github.com/{username}/Mood-map

# Install dependencies
cd mood-map
npm install

# Start development server
npm run dev

Usage

Select a shape from the shape selector
Choose a color from the color picker
Click on the canvas to place the shape
Modify shapes using:
- Size slider (10-100)
- Rotation slider (0-360 degrees)
- Click on shapes to select them

Keyboard Shortcuts

Ctrl/Cmd + C: Copy selected shape
Ctrl/Cmd + V: Paste copied shape
Ctrl/Cmd…

View on GitHub

Copilot Experience

This entire application was built with the help of Copilot, from ideation to fixing deployment errors.
Here's how I used it:

For generating color and shape for different moods, and the prompt was, I am building a mood based drawing app, I have these moods: happiness, sadness, anger, etc, can you help me suggest a color and shape for each of them.
For improving accessibility in the page.tsx file, and the prompt for it was Make this code more accessible.

To fix deployment errors, and the prompt was:

Got this error while deploying in Vercel:

Type error: Type '{}' is missing the following properties from type 'DrawingCanvasProps': selectedShape, selectedColor, shapes, setShapes, and 4 more.
  17 |           onShapeChange={setCurrentShape}
  18 |         />
> 19 |         <Drawing />
     |          ^
  20 |       </div>
  21 |     </div>
  22 |   )
Static worker exited with code: 1 and signal: null
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Error: Command "yarn build" exited with 1` can you help me fix it?
- To generate the project README using the prompt, `Read the entire project and add a simply Readme for it that includes all about the project and what it does.

GitHub Models

I used two GitHub models for the entire project:

GPT4 - To help in code generation and update
Claude 3.5 - To write the README for the projects

Conclusion

I love building, and when I build for a cause, it is even better. I first discovered the painting concept in 2024, while casually strolling through the streets of Bangalore. Everything seemed to pause and feel peaceful for a moment when I picked up the sketch paints based on my mood and started coloring.

Now that I finally have an opportunity to build something, I want you all to feel that moment of peace with me. Embrace every feeling, every transition that you are going through with my Mood Map app. The application is open-source, and I would love to have your ideas on what else I can add. As for my future plans, I want to make the app more scalable, add more features, and provide an option to generate the sketch while you just sit and paint.

How to become a Microsoft MVP

haimantika mitra — Fri, 17 Jan 2025 14:58:46 +0000

The year started with a good news, I received an email from Microsoft saying that I have been selected as an MVP in the web development category.

// Detect dark theme var iframe = document.getElementById('tweet-1874822880393076830-37'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1874822880393076830&theme=dark" }

For those of you who aren’t aware of the term, Microsoft Most Valued Professionals is a program by Microsoft to recognize the efforts of technical community members who help in building, creating, advocating, and promoting their products. Unlike any other ambassador program, this program adds weight and can help you in your professional life ahead. Getting in is not easy, and you need to prove your merits/contribution to get selected and also continue contributing to stay an MVP.

In this article, I will share how I became an MVP, and hoping it can help you prepare, if you are planning to become one.

How do I apply to become an MVP?

You cannot apply to become an MVP. You have to be nominated by an existing MVP or a Microsoft employee to be able to apply to become one.

If you are interested, you can also DM me with your work on LinkedIn or X(Twitter).

When does the application open?

The MVP application stays open throughout the year. Whenever you are ready, ask your referrer to nominate you.

What does the process look like?

Once you have been nominated, you will receive an email with links to a portal where you need to submit proof of the different kinds of contributions you have made to the Microsoft community. This could be blogs, videos, GitHub contributions, projects, or even social media posts. You can submit a maximum of 24 contributions under various categories. Along with that, you will need to answer a few questions about your interest in the program and how you plan to contribute in the future. You will have around 45 days to complete this, and you will get the decision within 90 days.

For example, I was nominated on September 24th, 2024, had time until November 7th, 2024, to apply, and heard back from the team on January 1st, 2025.

What do I get when I become a Microsoft MVP?

There are a LOT of perks that you get as an MVP. Not sharing them all here (let’s save the best for when you get selected 😉)

Here are some of the perks that I love:

Access to LinkedIn Premium for free for a year.
Discount on Microsoft certification.
The MVP Award kit, the Credly badge, the recommendation letter.
Early access to product releases, invite-only meetups, and Microsoft conferences like Build.
Access to fellow MVPs, Microsoft advocates, and the wider community with an opportunity to build and network with everyone. (I used to be a Microsoft Student Ambassador, and the network can be very helpful. You not only get friends but also people who can motivate you and help you professionally.)

Tips to keep in mind while applying:

Try to contribute to the Microsoft ecosystem for at least a year. If you've been doing it for longer, that's even better. In my case, I worked extensively with Microsoft Power Platform in 2020 and continued through 2021. A few months later, I started working at Microsoft, then moved to different companies, built many projects with web technologies, and refocused on Microsoft technologies in late 2023. I applied for the MVP program in mid-2024.
Even though you can report a maximum of 24 contributions, try to have a few more and keep a list of what you did in a separate sheet for easy tracking.
Keep your contributions paced out throughout the year. Do not try to do a lot of things in a month and then have no activity for months. This is a volunteering role, and what helps is being consistent throughout the year rather than jampacking everything in a month or two.
Try to contribute in multiple areas. Writing blogs might be your forte, but also try to make a social media post out of it, or maybe use this content to help a few folks in the Microsoft forums. While this is not mandatory, it is a good practice and shows that you can contribute in multiple areas.

And that’s a wrap for this article. If you have any followup questions, I am just a DM away @HaimantikaM.

Interpreting Low-Code from the perspective of open-source SPL

haimantika mitra — Thu, 09 Nov 2023 13:15:40 +0000

What kind of code is considered low？

In recent years, the term "Low-Code" has gained popularity, giving rise to numerous entrepreneurial teams. Unlike the binary classification of long and short codes, Low-Code introduces the dimensions of high and low codes. Simply put, Low-Code aims to simplify coding, reducing the workload and lowering the expertise requirements for developers.

In the Low-Code landscape, it's essential to assess the actual codebase. Many self-proclaimed low-code development platforms rely on frameworks and templates, offering simplicity for basic requirements. However, as complexity grows, these platforms often necessitate traditional coding languages like Java or C#.

The essence of Low-Code lies in minimizing the amount of code, not just relying on templates. While templates address straightforward needs, many businesses require intricate coding solutions. The effectiveness of Low-Code is intricately tied to development efficiency.

So, what qualifies as Low-Code? Primarily tailored for information system development (MIS), Low-Code is crucial for handling diverse and ever-changing requirements efficiently. In the realm of MIS, the core tasks revolve around Input, Process, and Output (IPO), with coding focusing on the 'Process' aspect, particularly efficient data processing.

Structured data, prevalent in relational databases, is the primary focus for Low-Code. Java and C# struggle in this domain due to a lack of structured data objects and the inherent complexities of these languages. SQL, while accessible, faces challenges in ordered computation and procedural logic, leading to convoluted code and increased development costs.

Python offers some relief with Pandas' dataframe, serving as a structured data object. However, Python's integration challenges and the dataframe's matrix-like nature limit its applicability. Scala provides a dataframe option but falls short in professionalism and imposes a learning curve, coupled with complex project environments.

In conclusion, Low-Code thrives in simplifying code for structured data processing within information systems, offering efficiency benefits. Choosing the right Low-Code solution involves considering the language's proficiency in handling structured data and its overall suitability for complex business requirements.

SPL is the low code

Is there not a kind of low enough code?

Absolutely, there exists a form of code that meets the criteria of being low enough—enter SPL (Structured Process Language) from the open-source esProc.

SPL emerged from Raqsoft's need for a robust solution in handling intricate operations within reporting tools. Traditional coding in SQL and Java proved challenging, leading Raqsoft to pioneer a new language tailored for these tasks—SPL.

SPL boasts well-defined structured data objects, capable of efficiently managing both big and small datasets. While incorporating a modest amount of object-oriented syntax, SPL sidesteps esoteric concepts, focusing squarely on streamlined data processing. Resembling the simplicity of early BASIC language in program logic, SPL features fundamental constructs like branches, loops, and subprograms, ensuring ease of comprehension. Notably, SPL excels in supporting complex set and ordered operations, enhancing the simplicity of code composition.

Let's move beyond words and delve into code. SPL code is structured in a grid, leveraging cells as variable names, a familiar concept for Excel users. Noteworthy characteristics include seamless support for stepwise operations, clear code hierarchy through grid indentation, and robust debugging functionalities. SPL stands as a testament to practical low-code solutions for intricate data operations.

In SPL, you can even use SQL directly (independent of database):

$select * from d:/Orders.csv where (OrderDate&lt;date('2020-01-01') and Amount&lt;=100)or 
(OrderDate&gt;=date('2020-12-31') and Amount&gt;100)

$select year(OrderDate),Client ,sum(Amount),count(1) from d:/Orders.csv  
group by year(OrderDate),Client  
having sum(Amount)&lt;=100

$select o.OrderId,o.Client,e.Name e.Dept from d:/Orders.csv o  
join d:/Employees.csv e on o.SellerId=e.Eid

$with t as (select Client ,sum(amount) s from d:/Orders.csv group by Client)  
select t.Client, t.s, ct.Name, ct.address from t  
left join ClientTable ct on t.Client=ct.Client

SPL itself has the process control capability similar to Java, therefore, SPL can achieve the effect of Java + SQL whether there is database or not.

Let’s compare it with other codes. For example, we want to calculate the maximum consecutive days that a stock keeps rising.
Write it in SQL is like this:

select max(consecutive_days)
from (select count(*) consecutive_days
      from (select sum(updown_flag) over(order by sdate) no_up_days
            from (select sDate,
                         case when price&gt;LAG(price) over(order by sDate)
                              then 0 else 1 end updown_flag
                  from share))
      group by no_up_days)

This code is a bit difficult to understand, right? You can take it as an exercise and think about how it works.

Coding in Python is as follows:

import pandas as pd
aapl = pd.read_excel(‘d:/AAPL.xlsx’)
continue_inc_days=0;
max_continue_inc_days=0
for i in aapl['price'].shift(0)&gt;aapl[‘price’].shift(1):
    continue_inc_days =0 if i==False else continue_inc_days+1
    max_continue_inc_days = continue_inc_days if max_continue_inc_days &lt; continue_inc_days else max_continue_inc_days
print(max_continue_inc_days)

Although this logic is not complicated, it is not very simple to code.

As for Java, we won't try. You can imagine its complexity yourself.

For the same operation, coding in SPL is as follows:
| Header 1 |
|------------|
|1 =T("d:/AAPL.xlsx") |
|2 =a=0,A1.max(a=if(price>price[-1],a+1,0)) |

There is no loop statement in this code, because SPL has a large number of strong lambda syntax-style set functions. Many tasks that can only be achieved with loops in other languages can be done with a single statement in SPL.

SPL solves the serious flaws of SQL, and combines the common advantages of Java and SQL. In addition, SPL can easily support the big data operation and multi-thread parallel computing, but for Python, it will find it at a loss when it encounters such situation. If you are interested in learning more SPL code examples, go to Raqforum.

More than a kind of low code

SPL provides perfect data source support; it can support almost all data sources that you may or may not have heard of:

Thus, it reduces a lot of work load of preparing the data interface and conversion.

Since SPL is implemented in Java, it is provided with JDBC driver, and can be seamlessly embedded into Java applications:

…
Class.forName("com.esproc.jdbc.InternalDriver");
Connection conn =DriverManager.getConnection("jdbc:esproc:local://");
Statement st = connection.();
CallableStatement st = conn.prepareCall("{call xxxx(?, ?)}");
st.setObject(1, 3000);
st.setObject(2, 5000);
ResultSet result=st.execute();
…

In this way, SPL can be easily integrated into some application framework. Most developers only need to care about business logic and data structure, and don't even need to understand complex application architecture.

In particular, for those “low code platforms” without code, they will have real low code after integrating the open-source SPL. Letting template and code to complement each other is a complete low-code platform.

SPL is also the interpreted-execution dynamic language, and the scripts written can be placed outside the main application. In this way, not only does it reduce the coupling between the script and the main application, but it also brings the benefits of hot swap. After all, the business logic (especially query and report)is often changing. When the requirement changed, it can take effect immediately as long as the script is rewritten, and there is no need to restart the application. If Java code is used in this case, then... (it also shows that Java code is not low at all).

To know more about SPL, check them out on GitHub

Reference: https://blog.scudata.com/interpreting-low-code-from-the-perspective-of-open-source-spl/

Behind the pull request: tales from the open source world

haimantika mitra — Mon, 30 Oct 2023 11:18:23 +0000

What is Hacktoberfest

In the world of software development, October is more than just a month, it's a season of collaboration, innovation, and celebration. Welcome to Hacktoberfest – a global event that unites tech enthusiasts from every corner of the globe to celebrate open-source software.

Hacktoberfest isn't just an event; it's a testament to the incredible impact that contributors can make in the open-source community. It's a time when the digital realm comes alive with the buzz of creativity and camaraderie, where individuals of all backgrounds and expertise levels come together to contribute their skills and passion to open-source projects.

In this blog, we'll explore the significance of Hacktoberfest in the open-source community. We'll highlight how it guides newcomers and seasoned developers toward collaboration and shared knowledge. Additionally, we'll showcase inspiring success stories that exemplify the true spirit of open source.

Now, let's dive into some real-life stories of contributors who have participated in Hacktoberfest and experienced the transformative power of open-source collaboration.

Inspiring stories from the community

A journey of discovery and connection

The first story is from Sarthak Roy, who says, “Well, I started using GitHub properly from February 2021. Hacktoberfest was the reason I found out Appwrite and many more orgs/tools/services in 2021 October. Then I started exploring various stuffs and learnt a ton. During Hacktoberfest 2022, I again contributed in multiple projects, including Appwrite. It all started with the hope of getting a swag in 2021, to enjoying open source and contributing. It also helped me connect with some amazing folks. ”

Sarthak's story highlights the transformative power of Hacktoberfest, from initially participating for the swag to discovering the joy of open source and connecting with amazing people.

Inspiring journey: From novice to maintainer

Next, let's hear from Moumita Roy, who had an amazing experience with Hacktoberfest. In her own words, "Well, first, I participated in Hacktoberfest 2022 after a friend encouraged me to register for it. Before that, I only knew that GitHub was for pushing code. But through Hacktoberfest, I learned about schemas and other terminologies. Since then, I have contributed to numerous open-source projects. I'm grateful to my friend for introducing me to the world of open source. As a student, I'm still learning and excited about Hacktoberfest 2023. This year, I plan to contribute and participate as a maintainer." Now, let's dive into Moumita's inspiring journey.

Embracing the open-source culture

The final story is from Krishnendu Dasgupta and he says, “One of the best things about Hacktoberfest for me is that it helped me become familiar with and accustomed to the open-source culture. I can still vividly remember Hacktoberfest 2018, when I was asking questions like "What is GitHub?" and learning about version control and collaboration through Git and GitHub. This experience was life-changing, as it continues to enable me to collaborate effectively with my teammates on any project.”

Krishnendu added: “Another valuable lesson from events like Hacktoberfest is that open source is not just about making significant feature contributions or bringing about major changes. Every contribution matters, as long as it adds value to the main codebase.Last but not least, even if I didn't directly contribute to certain repositories, simply browsing through them made me realize the importance of maintaining good coding practices.”

He further explained, “Overall, Hacktoberfest is definitely an event worth participating in. It was an eye-opener for me, highlighting the significance of collaboration and creating something great for others!”

From the above stories, one thing is common: everyone needs to start from somewhere, and for them, that somewhere was Hacktoberfest! If you are someone who is looking to get started in open source, this is your chance!

Tips to start contributing

Now that we've heard the inspiring stories of Hacktoberfest contributors, it's time to take the next step and embark on your own journey of contribution. If you're eager to make a meaningful impact in the open-source community, but unsure of where to begin, don't worry – we've got you covered. Starting your journey as a contributor can feel overwhelming, but fear not!

These tips will help you make the most out of Hacktoberfest:

Familiarize yourself with the official Hacktoberfest rules.
Look for projects that align with your interests and skills.
Choose 1-2 projects and join their communities.
If you get stuck, don't hesitate to reach out to project maintainers or the community for help.
Take the time to learn about the project and always read its contribution guidelines before you start.
Begin with beginner-friendly or good-first issues.
Provide clear descriptions and comments when documenting your pull requests.
Lastly, remember to have fun and enjoy the process of contributing to open source. It's a rewarding experience that can lead to personal and professional growth.

Here are a few projects that are participating in Hacktoberfest this year and you can contribute to:

You can find more participating repositories here

Data ownership and Backend-as-a-Service

haimantika mitra — Tue, 17 Oct 2023 17:54:01 +0000

A comment in our product hunt launch triggered an interesting discussion on data ownership when using BaaS (Backend-as-a-Service) platforms.

We believe open sourced code bases and flexible choice of Cloud providers for database and storage can help, but that may also make the experience more complex and difficult for developers.

What are trade offs you're willing to make to own more of your data, and what are trade offs you're willing to make for a more integrated and seemless expereince?

Where would you benefit from more choices when building with a BaaS platform?

Context: https://www.producthunt.com/posts/appwrite-cloud-beta?comment=2848192

Building Apps with Bun and Appwrite

haimantika mitra — Fri, 22 Sep 2023 11:26:08 +0000

If you are a developer, your definition of bun must have recently changed. From what we knew to be a round piece of bread, it is now a new runtime in JavaScript, and as Bun claims, it is faster than the rest! In this article, we will find out what Bun really is, how it compares with Node.js and Deno, and how you can build apps with Bun and Appwrite.

What is Bun?

Bun is an all-in-one JavaScript runtime & toolkit designed for speed, complete with a bundler, test runner, and Node.js-compatible package manager.
To install Bun, follow the instructions here 👉 bun.sh
It is built from scratch to serve the modern JavaScript ecosystem. It has three major design goals:

Speed
Elegant APIs
Cohesive Developer Experience

You may think, what is all the hype about? Building with JavaScript is now faster with Bun, which is production-ready with its latest version 1.0 release.

Bun lets you read environment variables from a .env file and utilize the familiar fetch() method, enabling you to access and handle data from external sources within your application.

Bun also natively supports TypeScript out of the box. Other than that, it also supports .js, .cjs, .mjs, .jsx, and .tsx files.

Bonus: Bun package manager is known for its speed, offering faster package management as one of its key features. Even if you don't use Bun as a runtime, you can use Bun's built-in package manager, that can significantly speed up your development workflow.

Try it for yourself:

bun install
bun add <package> [--dev|--production|--peer]
bun remove <package>
bun update <package>

The powers of Bun are endless. If you are interested to know more about the capabilities, read the release announcement.

How is Bun so fast?

Bun made some bold decisions to make this happen! It is not because they are using Zig or not using V8 nor because it's machine code. It is because of the mindset to make everything as highly performant as possible.

Other than that, there are things like: While installing a package, Bun doesn’t do a network check to see if it is downloading in the latest version. @latest tags are effectively ignored in Bun.

Also, making small adjustments, such as creating a list of labeled pointers instead of keeping the function pointers separately, greatly improved the speed.

Introduction to Appwrite

Explore the capabilities of Bun with Appwrite - a backend platform to help you minimize time to create value. Appwrite abstracts away the complexities and repetitiveness of building a modern application so you can jump straight to the fun parts, building impactful features.

We recently released version 1.4, which is packed with a lot of great features ranging from AI command center, one-click migration service, the next generation of Appwrite functions. You can read more about the 1.4 release in our announcement article.

Using Appwrite, you can quickly deploy and scale your Bun/JavaScript code base with ease. To achieve that, you can use Appwrite Functions.

Appwrite Functions is available in multiple languages and runtimes (and Bun is one of them). This gives developers the ability to plug and play with Appwrite in the language of their choice.

Appwrite functions are capable of doing more. In our latest release, we have added Function templates, which means you’ll be able to add Functions engineered by the Appwrite team and community to your Appwrite project. Functions also have their own domain, either custom or generated by Appwrite. This lets you write Appwrite Functions that act like typical REST endpoints to handle webhooks, custom integrations, or even serve HTML content. Appwrite Functions will now also fit into your existing workflow right alongside the rest of your code as you can deploy them directly from Git.

Integrating Bun in Appwrite

Now that you have been introduced to Bun and Appwrite, it is time to test them out! To use Bun in Appwrite, you need to use the latest version of Appwrite.

Installing a self-hosted version of Appwrite is pretty straight-forward, all you need to do is:

Have Docker installed
Run the command:

docker run -it --rm \
    --volume /var/run/docker.sock:/var/run/docker.sock \
    --volume "$(pwd)"/appwrite:/usr/src/code/appwrite:rw \
    --entrypoint="install" \
    appwrite/appwrite:1.4.3

For one-click setups, check out the installation docs.

To use Bun in Appwrite, you need to add it to _APP_FUNCTIONS_RUNTIMES in the .env file and restart your Appwrite instance with docker compose up -d.

Next, go ahead and create a Bun function using the Appwrite CLI by running appwrite init function.

Here’s a video showing you how to enable Bun and execute the function👇

Now that your function is set up, let us see some examples:

Example 1:

Bun aims to provide a consistent and predictable module resolution system that just works. The specialty of Bun is that you can use import or require in the same file—they both work all the time.

Use the following code in your function to test the above statement:

import lodash from "lodash";
const _ = require("underscore");

export default async ({ res }) => {
  const numbers = [5, 5, 2, 5, 7];

  return res.json({
    withLodash: lodash.without(numbers, 5),
    withUnderscore: _.without(numbers, 5),
  });
};

The output will be:

Example 2:

Bun supports .jsx and .tsx files out of the box. Bun's internal transpiler converts JSX syntax into vanilla JavaScript before execution.

Let us test with the following code:

import { renderToString } from "react-dom/server";

export default async ({ res }) => {
  const html = (
    <>
      <h1>Hello World!</h1>
      <p>Current time is {new Date().toLocaleTimeString()}</p>
    </>
  );

  return res.send(renderToString(html), 200, {
    "Content-Type": "text/html",
  });
};

Note: For the code to work, you need to run bun install react react-dom

When the function successfully executes, you will get the following output:

Takeaways

In this article, we learned about Bun and using it with Appwrite. While we support Node.js, Deno, and Bun within Appwrite, it is up to you to choose which one you want to build with.

While comparing the performance of these three runtimes with Appwrite, we have come up with some interesting results:

Build time - Bun is almost 3x faster than Node.js when installing un-cached dependencies for a Next.js project
Cold-start - Bun is almost 2x faster than Node.js, and 3x faster than Deno
Warm-start - All runtimes in similar ranges with differences ranging between 1-3ms
Load testing - All in similar ranges, with Bun and Node.js being the most stable

Benchmarks above are related to runtime used in Appwrite Functions.

Here are some resources to get started:

With the benchmarks shared above and having the flexibility within Appwrite to build with any runtime, what would be your choice? 👀

Add a Search Function to your application

haimantika mitra — Mon, 18 Sep 2023 14:32:04 +0000

As a part of Appwrite 1.4, one of the new features we have introduced to Appwrite Functions is Function Templates. Function templates are pre-built Appwrite Functions that can be integrated into your Appwrite project with just a few clicks. Using them, you can easily incorporate new features and integrations into your app without writing additional code or managing infrastructure.

One such integration you can implement using Appwrite Functions is Searching using Meilisearch. In this blog we show how you can use an Appwrite Function Template to integrate search with Meilisearch.

Setting up the Template

Meilisearch is a flexible and powerful user-focused search engine that can be added to any website or application. The purpose of this function template is to sync documents in an Appwrite database collection to a Meilisearch index. Using this function template, users can explore, search, and retrieve information from the connected database collection. Through this template, documents from the Appwrite collection are systematically indexed within Meilisearch.

To use the function, you need the following set of keys:

APPWRITE_KEY - API Key to talk to Appwrite backend APIs.To generate API Keys you can follow the documentation here
APPWRITE_ENDPOINT - To get the Appwrite endpoint, you need to go to Appwrite and find it under “Settings”
APPWRITE_DATABASE_ID - The ID of the Appwrite database that contains the collection to sync. You can find the documentation here.
APPWRITE_COLLECTION_ID - The ID of the collection in the Appwrite database to sync.

To use Meilisearch, you can either self-host it using the command 👇

 curl -L [https://install.meilisearch.com](https://install.meilisearch.com/) | sh

Or use Meilisearch Cloud. For this example, we will assume that you are using Meilisearch Cloud.

Here’s the keys you need:

MEILISEARCH_ENDPOINT - This is the host URL of the Meilisearch server. Once you have logged in to Meilisearch Cloud and created a new project, you will find the URL under “Overview” and this is how it should look like 👇

MEILISEARCH_ADMIN_API_KEY - This is the admin API key for Meilisearch. You will find it in the Meilisearch Console under “API Key”.
MEILISEARCH_SEARCH_API_KEY - This is the API Key for Meilisearch search operations. To get this, you need you create a new index from the Meilisearch Console. Once created you will find it under Overview as Default Search API Key

MEILISEARCH_INDEX_NAME - Name of the Meilisearch index to which the documents will be synchronized. For e.g, in the above picture, the Index name is Newindex. You can also find it under Settings as Index Name.

Preparing the Function

The function template syncs documents in an Appwrite database collection to a Meilisearch index. It should get you up and running, but you will need to add real data to build a useful search index.

If you want to see the source code, you can find it on our templates GitHub repository. Now, let’s navigate to our functions page on Appwrite. From there, we will select the Templates tab, search for and select the Sync with Meilisearch function template.

The function requires APPWRITE_API_KEY, APPWRITE_DATABASE_ID, APPWRITE_COLLECTION_ID , MEILISEARCH_ENDPOINT, MEILISEARCH_ADMIN_API_KEY, MEILISEARCH_SEARCH_API_KEY, MEILISEARCH_INDEX_NAME. Once you have added them you can proceed to the Connect step.

Select Create a new repository (this will generate a GitHub repository for you with the function), and leave the production branch and root settings as default to create this function.

Testing the Template

Visit the Domains tab on the function page and copy the domain URL to test the function.

Conclusion

We’ve added search functionality to our app and opened up many possibilities to improve the experience of our app’s users.

How can the template be extended ?

Using events to automatically index new collections
Using weights and other meilisearch features to optimise search such as excluding certain fields from indexing

Some examples are:

Real-time Data Exploration: It can be used to provide real-time search capabilities for datasets and data streams, allowing users to explore and analyze data in real-time.
Content Management Systems: The function template can be integrated into content management systems (CMS) to facilitate efficient content retrieval for editors and site visitors.

Be sure to check out the other available Function Templates. We’ve created multiple that could be of use in your projects. You can find the templates GitHub repository here.

For more information about Appwrite and Appwrite Functions:

Appwrite Function Docs: These documents provide more information on how to use Appwrite Functions.
Functions Announcement: Read the full announcement on Functions 1.4.
Appwrite Discord: Connect with other developers and the Appwrite team for discussion, questions, and collaboration.

Add a URL Shortener Function to Your Application

haimantika mitra — Wed, 13 Sep 2023 08:52:49 +0000

A URL shortener takes a long or complex URL and generates a shorter, more concise version. The primary purpose of a URL shortener function is to make links easier to share, manage, and remember.
For e.g https://dev.to/appwrite/introducing-appwrite-migrations-effortless-data-migration-from-your-platforms-5dhh to http://tinyurl.com/bd5usb3n

In this blog, we’ll learn to build a URL shortener using Appwrite Functions template. The template benefits from the built-in scalability, reliability, and security of Appwrite Functions.

You can find the source code on our templates GitHub repository.

Setting up the Template

To get started, you need to navigate to the functions page on the Appwrite console. From there, we will select the Templates tab, search for and select the URL Shortener function template.

The function requires two variables:

APPWRITE_API_KEY
SHORT_BASE_URL

Once you have populated those, you can go straight to the Connect step.

Select Create a new repository (this will generate a GitHub repository for you with the function), and leave the production branch and root settings as default to create this function.

Using the Function

Visit the Domains tab on the function page and copy the domain URL to test the function.

Go to the function URL in your web browser, and you'll see a short url like the one shown below.

Next Steps

URL shorteners often offer additional features such as tracking click-through rates, providing analytics on link usage, and allowing users to customize the shortened URL to some extent.This Function Template can be extended to perform a lot of functionalities. Some examples are:

Link Analytics and Tracking: Enhance the URL shortener to track click-through rates, geographical location of users, referral sources, and other analytics data. This could provide valuable insights into the popularity and effectiveness of shared links.
Link Management Dashboard: Create a user-friendly dashboard where users can manage their shortened links, view statistics, and perform various actions on their links.

Be sure to check out the other available Function Templates. We’ve created many that could be of use in your projects. You can find the templates GitHub repository here.

For more information about Appwrite and Appwrite Functions:

Appwrite Function Docs: These documents provide more information on how to use Appwrite Functions.
Functions Announcement: Read the full announcement on Functions 1.4.
Appwrite Discord: Connect with other developers and the Appwrite team for discussion, questions, and collaboration.

Introducing 1.4 Lightning Hackathon: Functions

haimantika mitra — Mon, 11 Sep 2023 11:38:01 +0000

Appwrite Functions has just had a fresh upgrade, and we are so excited we are hosting a lightning-round hackathon focusing on functions. It will last 10 days only - but no worries! With our newly released functions, you can add functionality to your application with just a few clicks!

How to join

No registration is required. Just start coding using function templates!
Join the Appwrite Discord community in channel #lightninghackathon
Please choose the MIT license on your GitHub repo.
Submit your GitHub repo and the requested information here: https://apwr.dev/LightningHackathon
Submit your project to https://builtwith.appwrite.io
Share your creation on social media using #LightningHackathon and by tagging @appwrite

Key dates

Start date: Sept 21st, 2023, 11:00AM CST
End date: Oct 1st, 2023, 11:00AM CST

Rules & Criteria

So, what are the rules for joining the hackathon?

Build whatever you like using Appwrite functions.
You can be part of a team or join individually, but do note there is only one prize per winning team or individual.
You or your team can submit as many projects as you like, so long as you use Appwrite functions.
You can use any language or framework.
Please choose the MIT license on your GitHub repo.
Submit your repo using this form and share your repo online while tagging Appwrite and using #LightningHackathon.
Only one person per team has to submit the Typeform
You are allowed to add as many submissions as you want to increase your chances of winning.
Some criteria our judges will look out for are creativity, usage of functions, technical components, visually pleasing

Prizes

The prizes are a customized Appwriter or an Appwrite t-shirt. Each winning entry will receive one of the prizes. In case you enter as a team, only one prize will be shipped.

We will have a total of:

3 winners, each winning one Appwriter keyboard
10 runner-ups, each winning one Appwrite t-shirt

Note: We only give out one prize per team.

Community help

You can find the Appwrite team and the rest of the community on Discord. We will be here to help you build, find project partners, or just come and hang out and learn!

In order to get support, you will need to join our #lightning-hackathon Discord channel. Join us on Discord.

Resources

For you to get you started, we collected some useful resources:

Forem: haimantika mitra

How to Deploy Hermes' Self-Improving AI Agent

Key takeaways

Prerequisites

What are we building

Step 1. Create the Droplet

Step 2. Install Hermes Agent

Step 3. Connect Hermes to Telegram

Step 4. Understand skills and MCP servers

Step 5. Build real-world automation: Grocery tracking

Creating the skill file

Creating the inventory file

Connect to an MCP server

Step 6. Authenticate with your MCP server

Telling Hermes Your Current Stock

Setting up the daily alert

Step 7. Test the full flow

Conclusion

Related links

Automating onboarding emails with n8n and AutoSend

Understanding the workflow

Building the n8n workflow

Frontend integration

Wrapping up

Building OTP based authentication system with Clerk and Autosend

What is Autosend?

Integration flow

Step-by-Step Process: Building the Authentication Flow

Step 1: User initiates signup

What's happening under the hood

Important configuration

Step 2: Backend generates verification code

Code generation

Storage with expiration

Triggering email delivery

Step 3: Autosend delivers the email

Email construction

API call

Step 4: User enters verification code

Verification screen

Step 5: Backend validates the code

Validation logic

Step 6: Complete signup and create session

Checking status

Creating the session

Complete flow visualization

Ending Notes

Mood Map - Draw all your feelings

What I Built

Building the app

Demo

Repo

Haimantika / Mood-map

Mood Map Creator

Features

Technologies

Installation

Usage

Keyboard Shortcuts

Copilot Experience

GitHub Models

Conclusion

How to become a Microsoft MVP

How do I apply to become an MVP?

When does the application open?

What does the process look like?

What do I get when I become a Microsoft MVP?

Tips to keep in mind while applying:

Interpreting Low-Code from the perspective of open-source SPL

What kind of code is considered low？

SPL is the low code

More than a kind of low code

Behind the pull request: tales from the open source world

What is Hacktoberfest

Inspiring stories from the community

Tips to start contributing

Data ownership and Backend-as-a-Service

Building Apps with Bun and Appwrite

What is Bun?

Introduction to Appwrite