DEV Community: John Fáwọlé

How I Built an AI-Powered Content Workflow for My Agency Using Notion MCP

John Fáwọlé — Fri, 27 Mar 2026 23:10:32 +0000

This is a submission for the Notion MCP Challenge

As a founder of a dev content marketing agency, one of the things I’ve had to deal with is optimizing workflow across the team.

At one point, we introduced Trello and other management software, but they ended up adding more complications, and we had to strip them off.

Came across the Notion MCP challenge and thought of spinning up a simple Notion-based workflow, where all our dev writers and editors can do their work easily.

In this short blog, I’ll be walking you through what I built and how it’s set to work.

What Is Notion MCP and Why It Matters for Content Teams

MCP stands for Model Context Protocol. It's a system that allows an AI assistant like ChatGPT or Claude to actually interact with your Notion workspace.

Have you ever been in a situation where you gained clarity on something while chatting with Claude, and just wish you could commit it to a page on your Notion?

Well, what you’d have most likely done in that case is to copy from Claude, open another tab for Notion and paste it.

You’d agree such a simple action doesn’t have to be implemented through several screens. This is where feeding context across your different applications becomes imperative.

Unlike the basic Notion API, MCP is not just a data retrieval tool. It is agentic and conversational. It understands context, reads pages, creates database entries, updates status fields, and links records together.

Rather than asking Claude how to, MCP gives you the power to invite Claude directly into your workspace as your personal assistant that does the actual work.

This changes everything for content teams. While the basic API can store content in Notion, MCP allows AI to move content through a production pipeline from brief to draft to review to publication. MCP acts as an intelligent tool that facilitates coordination and structure.

Configuring Your MCP with Your Notion Account

You must connect your context protocol for you to connect your Notion account to any AI-powered IDE of your choice.

For me, I used Cursor, and that will be the IDE of this article.

Step 1: Click Settings and Navigate to Tools & MCP

Navigate as indicated in the picture below:

Step 2: Add the MCP with JSON Format

For some LLMs like ChatGPT, the connection is practically done in the UI as Notion is supported as one of the apps. As a result, the integration is granularly done, and you don’t have to bother about the JSON.

Now, in Cursor, click on “Add MCP.” Once you do that, you’d be taken to a file where you can go ahead to paste this JSON file:

{
  "mcpServers": {
    "notion": {
      "url": "https://mcp.notion.com/mcp"
    }
  }
}

Once you paste this, you’d be taken to a browser to login to your Notion.

The Content Management Workflow

Here are the steps I took to create the workflow:

Creating the Linked Database

While in Cursor, paste this prompt:

Create a page named work. It should be a linked database with 3 tags: Briefs, Drafts, Editorial Review.
Each should be able to host a Google Drive link or plain text.

Then after the execution of your prompt, you should have something like this:

Creating a Brief From the IDE

You can create the brief right from Cursor, just that you have to specify all the parameters you want the writers to take note of as well as other instructions.

First of all, let’s prompt out the parameters. In the instant case, we want:

Topic (text): The subject of the content. This becomes your working title.

Audience (select): Who you're writing for. Create options like "HR leaders," "marketing managers," "executives."

Keywords (text): Target SEO keywords you want to rank for.

Tone (select): The voice of the piece. Options like "authoritative," "conversational," "technical."

Assignee (person): Which content leader or writer owns this brief.

Due Date (date): When the draft is due.

Status (select): Options: "Draft Needed," "In Progress," "In Review," "Approved," "Published."

This will serve as the basis for future briefs. Now that we have the minimal style guide ready. We can go ahead to request the agentic briefing on a topic like x402.

Here is the result:

Once you are done with this, you can instruct your Cursor agent to move the brief from Brief to Draft.

AI-assisted Drafting with Notion AI

Even though it is unethical to quantitatively draft a blog content with AI, it is permissible to get assisted with AI. On this note, the writer can draft and also use the Notion AI.

Here is a sample:

X402: the Missing Payment Layer for the Internet (and Why AI Agents Care)
The internet has always had a clean way to ask for resources: send an HTTP request, get a response.
But it never had a native way to ask for payment.
For more than two decades, the HTTP spec has included a status code for this exact problem: 402 Payment Required. The catch is that 402 was reserved but never standardized into a real, interoperable payment flow.
x402 is an open payment protocol (developed by Coinbase) that brings that idea to life: an internet-native, pay-per-use mechanism for APIs and digital services, where a client can be prompted to pay and then immediately retry the request--programmatically, without setting up accounts, subscriptions, or complex billing integrations.[1]
If you're building products that serve other developers--or you're building agentic systems that need to buy data and actions on-demand--x402 is worth understanding.
What is x402?
x402 is an open standard that lets a server require payment before serving a response, using the HTTP 402 Payment Required status code as the trigger.
At a high level:
A client requests a resource (an API endpoint, data payload, compute, etc.)
If payment is required and hasn't been provided, the server responds with HTTP 402 and payment instructions
The client pays (typically with stablecoins like USDC) and retries the request
The server verifies payment and returns the resource

Editorial Review

This is where the editor comes in. First of all, an editor might prompt Cursor to benchmark the draft with the brief details.

This gives your Editors a single place to review, comment, and approve content. They're not chasing drafts or digging through email for feedback threads.

The AI handles the basic checklist items, so editors can focus on the feedback that actually improves the content.

This is a preliminary stage where the superficial editorial issues are discovered. Then the editor can leave comments for the writers to improve.

Once that is done, the editor can now manually read and review the whole document, and move it to Done.

My View About the MCP

The Notion MCP saves a lot of time and context-switching, which I found quite helpful.

Especially now that we all ship code from Copilot or chat with Claude.

It is not easy to circle our conclusions or whatever back to Notion for proper journaling; all that achieved with a simple command that activates agentic automation.

In the context of my content management workflow, I believe it will also be helpful to bunch up the style guide into a Claude Skill.

The Skill should make the editorial review faster as I can prompt from Cursor or Claude with the Skill, and get more contextual editorial review.

With that, our team can ensure that all of the outputs don’t fall below our editorial thresholds.

At the end of the day, Notion AI, MCP, Skills are separate innovations that are converging and getting every field ready for AI-boosted productivity.

Conclusion

I haven’t introduced this new Notion-based workflow to the team yet, but it seems to be a promising one.

Indeed, the swift connection of LLMs and AI-powered IDE to Notion is such a superpower to technical content creation teams.

This system provides a faster turnaround because briefs take two minutes instead of twenty. Fewer context switches because editors never leave Notion.

CSS Shorthands: How to Write Shorter and Smarter Styles

John Fáwọlé — Sat, 12 Jul 2025 22:56:22 +0000

Whether you’re building your frontend with HTML or React frameworks, styles remain the beautification component of your application.

Speaking of CSS, one of the gaps between junior and senior frontend engineers is the understanding of shorthand.

First of all, it helps you write shorter and cleaner code. After all, why should you use 7 lines instead of 1?

Secondly, it shows you have a better grasp of how CSS and browsers work.

Hence, you have to master CSS Shorthand. In this tutorial, you’ll learn how to shorten the styles of your margin, padding, background, and other aspects of your decoration.

Such that in your next web development projects, you’ll write cleaner styles with shorthand.

18 Powerful CSS Shorthand Properties to Know

Here are some incredible shorthands that will take your styling to the next level.

Margin

We use margin to create space on the outside of an element. Meaning that the effect of the margin is seen around an element we are working on.

The value can be anything from:

auto: left for the browser to decide
inherit: by law of inheritance, the child element should have the properties of the parent element
percentage: calculates the width of the element in percentage
length: to calculate the margin in pixels, centimetres, or similar values

That said, the browser calculates margin, once it’s specified, in a clockwise direction. Thus, it goes from top => right => bottom => left. In that order.

Ideally, the shorthand should be applied to the four areas for clarity. Like this:


margin: 10px 20px 30px 40px;

Meanwhile, there will be different decorations if not up to four, but more than one values are given.

First, if you give two values, it will be calculated thus:

first value is for the top and bottom
second value is for right and left

Secondly, if you give three values, the one in the middle will apply to the right and left.

Padding

Earlier, we discussed margin. If you understand it correctly, flip it over, and you get padding.

In essence, padding is the decoration property used to create space within an element.

There is one thing you must know about the values of padding: it doesn’t have auto, unlike margin.

All four corners of an element can be padded. You can write a shorthand of this by spelling out the padding decoration in a clockwise direction. Like this:


padding: 10px 20px;

Just like margin, specification of 2 values means the first one will apply to top and bottom, and the second will apply to both sides.

Background

The simplest way to create a background is to simply say the background color should be black or whatever color of your choice.

This is where CSS gets interesting. There are many ways you can style up your background aside color.

This includes position, repeat, and attachment. If you want to go into this level of detail in your backgrounds, you’d have to define a lot of things.

And this is where shorthand makes background properties simpler to write at a go.

Emphatically, there is an order to CSS backgrounds; you have to be conscious of it.

color
image
repeat
attachment
position

Example:


background: #fff url("developer.jpg") repeat center center / cover;

By the way, there are other properties for backgrounds which are not in this order. They are quite rarely used ones you’d have to input with longhand.

Border

A border is the demarcation around an element. By the way, every element has a bother, whether or not you specify it.

Interestingly, you can set a border to none. There are different ways borders can appear:

solid
groove
inset
double
dotted, and so on

That said, when we say border, it is a single name that refers to a collection of properties. It contains:

width
style
color

In that order. Among these three, the most important is style. You can write shorthand for the border, and the decorations will be applied in all directions.

Also, you can selectively write a shorthand of the border to a particular side, such as this:


border: 10px solid blue;

Border-radius

Border-radius bring more life to your elements. Essentially, you can use border-radius to create rounded corners.

It’s calculated in an anti-clockwise manner. Such that the first value will go to the first angle by the top-left, and so on.

When you shorthand border-radius, you should spell out all four values. Like this:


border-radius: 15px 10px 15px 10px;

Other than that, there will be a different decoration.

In the case of three values: the first value will apply to the first angle, the second will apply to second and third angle, while the third value will apply to the fourth angle.

Outline

An outline is an external line—for the lack of a better word—on the outside of an element, and is immediately after the border.

You might be like, “Well, that sounds like what the borders do?” That’s a brilliant observation.

Here is what you need to know: borders are quite part of the element. In contrast, outlines are external and not part of the element’s box. Hope that clarifies it.

That said, there are 3 properties of an outline:

Color
Width
Style

The order doesn’t matter in the instant case, meaning you can say:


outline: 2px dashed blue;

Or write it as:


outline: 2px blue dashed;

And both will do the same thing.

Overflow

In reality, there are times you will want to fit some content into your card components, and they will overlap, thus making your website look disorganized and unprofessional.

In such cases, you can use overflow to gracefully contain the mishap.

Generally, it has a couple of properties, including visible, hidden, auto, clip and scroll.

That said, overflow is calculated graphically as we have both x and y axes.

As a result, here is how you can shorthand both axes with the available properties:


overflow: hidden scroll;

Gap

When we’re talking of gap in Nextjs or CSS, we practically use it in grid or flexbox.

If you’re a senior engineer reading this, you should remember the time of grid-row-gap and grid-column-gap. They were deprecated for what we now know as the grid today.

Unlike overflow, which is graphical, the grid is theoretically tabular. Meaning it works in rows and columns.

The order is that rows come before columns; keep that in mind. Therefore, instead of writing:


row-gap: 30px

column-gap: 20px

You can shorthand it as:


gap: 30px 20px;

Font

For engineers who want to have a greater level of specificity in their typography, you will want to outline many properties you want in your fonts.

Meanwhile, it can be quite lengthy. One thing you should keep in mind is that you must always include size and family in your font family for it to be successfully shortened.

So you can have something like:


font: bold small-caps bold 16px/1.5 Calibri;

List

If you have a fair HTML background, you’ll agree that the major types of lists we have are ordered and unordered lists.

CSS takes it a notch higher by adding other properties to make lists more attractive. The first property is style. In practice, this is a glorified bullet, but with other specs.

For instance, you can set the style to square, and the list will appear with a square-shaped bullet.

Secondly, there is the image-property. This allows you to customize the listing with any image of your choice.

Finally, there is position, which can either be outside or inside. The former will create a tab after the bullet, while the latter will vertically align all the items in the list.

Here is an example:


list-style: round inside url('exampl.png');

Flex

For you to use flex, there has to be a container or a card. Now, what flex does is to control the items within the container so they can behave properly and fit gracefully into the container.

There are 3 properties you’ll need to set. The first is flex-grow. It is the determinant of how much space an item can have within a container.

Secondly, there is flex-shrink. This relates to how much an item should minimise itself about other items within the container.

Finally, we have flex-basis. This works more like length. Thus, its value can be auto, inherit, or in pixels. Here is an example:


flex: 1 0 20px;

Mask

Masks allow you to get creative with your images. For example, you can have a triangle and mask an image on it.

This will make the image fit into the triangle and appear as such.

In reality, you most likely wouldn’t need many other properties of a mask, just the simple one will do.

But for edge cases, here are some of its properties you should know: size, repeat, position, and image. By the way, image is the most important of them all.

Here is an example of the shorthand:


mask: url(example.png) repeat center;

Animation

By enabling animations, you can add spicy effects to your elements by putting them be on motion.

Animation has different properties you can include, such as duration, delay, and direction. There’s no strict order.

This is an example of how to shorthand animated elements:


animation: slideIn 1s ease-in, fadeIn 2s linear 1s;

Transition

One of the ways to make your buttons and cards grab user attention is by understanding how to use transitions well.

It is mostly used for hovers. There are different properties in transition. But the most important ones are delay and duration.

Let me show you how to spell out all your transition properties in a single line:


transition: opacity 0.5s ease, transform 1s linear;

Grid

If you understand this grid shorthand, it will save you a lot of time manually inputting many grid properties.

You must have been familiar with grid-template-column, grid-template-row, grid-auto-flow and so on.

With grid shorthand, you can easily specify rows and columns at a single go, like this:


.container {

  display: grid;

  grid: 10px 20px / 2fr 2fr;

}

Inset

Inset, in itself, is a shorthand.

The orthodox approach is to set the values of all four sides of a container or card. For example, you can say:

top: 10px
left: 10px
bottom: 10px
right: 10px

Meanwhile, this could have been simplified by using an inset, as in:


.card {

  inset: 10px;

}

As you can see, inset helps you set all the required positions of an element with a single strike!

Columns

This is very straightforward to grab. As you’re aware, you can choose to outline some parts of your frontend on a columnar basis.

There are two essential components involved: column-width and count.

The former deals with the horizontal length of your outlook, while the latter defines the number of columnal arrangements that can be.

Thus, here is a shorthand of the columns property:


columns: auto 4;

Text-decoration

Your applications will look spicier if you take the text styling to the next level.

This is where text-decoration might be helpful; it simply makes your text more beautiful.

There are different properties such as color, thickness, and style. Most importantly, you must indicate the decoration line.

Here is an example of how to shorten it:


text-decoration: underline wavy blue 5px;

Performance & Maintenance Drawbacks of CSS Shorthand

So far, we have examined smart ways to write CSS with shorthands. However, it’s not all as shiny as it seems, and this is where you need to pay attention.

First of all, new engineers on your team might not fully understand some of the properties you have heavily abbreviated, especially when it relates to edge-cases.

For this reason, some engineering teams often prefer to keep things orthodox; in this instance, to write everything longhand and straightforward.

Secondly, you should know that unspecified values will be at default. Meanwhile, their “default” nature can override some existing specified properties.

This is what I mean. If you say:

border-radius: 10px 20px;

You might expect it to have a rounded corner all around, but that will not be the case. Instead, it will be an uneven, rounded corner because of the direction of implementation.

If you enjoyed reading this, consider sharing this on Twitter and tagging me - @jofawole.

How to Get Started with Anchor on Solana | And Write First "Hello World"

John Fáwọlé — Thu, 10 Jul 2025 12:42:56 +0000

Building programs on Solana with pure Rust can have a lot of learning curve; you’ll have to import this, write that way and so on.

More importantly, such programs are more susceptible to security breaches, especially when written by a Junior SVM dev and the code was not audited by cracked SVM security researchers.

For this and many other reasons, we have Anchor. I prefer to call Anchor the lightweight Rust framework for the SVM.

One of the major reasons you might want to get interested in Anchor is that a good number of top Solana protocols were built with it. Examples include Drift V2, MarginFi, and Marinade Finance.

So far, these protocols have been largely unbroken. In addition, the source code are very easy to read.

That is another thing to know about Anchor; you can read it even if you are not so cracked, all you need to do is calm down and maybe check the docs here and there.

That said, the main goal of this tutorial is to help you write your first “Hello World” with Anchor. I’ll break it down to the lowest bit.

Trust me, once you can confidently write this “Hello World” and understood why you wrote each word, you’re set to have a strong foundation building with Anchor.

Let’s dive in!

Step-by-step Guide to Writing First “Hello World” with Anchor on Solana

In this subheading, we’ll be getting straight to the business.

Prerequisite

Before you can run any program on the Solana Virtual Machine, you need to have these things on your machine:

Install Solana

The best way to install Solana is to simply run this code:


curl --proto '=https' --tlsv1.2 -sSfL https://solana-install.solana.workers.dev | bash

By the way, ensure you use Ubuntu as your terminal for this to be successful.

You should see this on your terminal once it’s done:


Installed Versions:

Rust: rustc 1.85.0 (4d91de4e4 2025-02-17)

Solana CLI: solana-cli 2.1.15 (src:53545685; feat:3271415109, client:Agave)

Anchor CLI: anchor-cli 0.31.1

Node.js: v23.9.0

Yarn: 1.22.1

Installation complete. Please restart your terminal to apply all changes.

If you run into any error, you can check my video, which is more elaborate on this:

Solana Playground

If you’re coming from the EVM background, you know we all started off with Remix for writing, compiling, and deployment of smart contracts.

Something similar is on Solana, and that is the Solana Playground.

You don’t need to download anything. You can access it via your browser and it will work fine.

Another alternative to this is building locally with VS Code or any code editor of your choice. While there is nothing wrong with that, you most likely shouldn’t use that for a start.

More like the way you didn’t start writing Solidity with Foundry; at least, most of us didn’t.

In short, it’s better to kick-off with the Playground.

Step 1: Using the Prelude

Open the Solana Playground, create a file called hello.rs, and paste this:


use anchor_lang::prelude::*;

You might want to ask, why did we write that? Or, what does it mean? There is quite a long explanation to that.

Like we mentioned earlier, Anchor is a lightweight version of Rust on Solana. Meaning many things have been compressed or made easier, so Anchor can have a smoother sail (smile if you got the pun).

We use the prelude of Anchor as a way to import all the simplified components, macros, types, and error handlings of Anchor into our program.

Let me give you an example:

Imagine all the every important thing you’ll need on a trip is in your bag; laptop, power station, duvet and so on.

You have arrived at your destination.

Instead of picking each item one by one, is it not smarter to carry the entire bag?

That’s the same thing we did with prelude of Anchor.

It imported all the macros we need such as #[program], #[derive(Accounts) and so on. In the same way, all the types and error handling are also brought into the scope of our program.

The longer route of what we wrote above is:


use anchor_lang:: Context;

use anchor_lang:: prelude:: Account;

use anchor_lang:: Accounts;

use anchor_lang:: Result;

// and so on

You will keep writing this individual imports based on what you want to do in your protocol. But use anchor_lang::prelude::*; has simplified and embedded everything.

Meanwhile, using the prelude is not the end. You have to call the types in your program later on, and we will get to that.

Step 2: Declaration of ID


declare_id!("");

This is one of the macros in Anchor, and there is an orthodox approach to it; it has to be at the root of any program you write.

Think of it as both the deployment address. In practice, you can generate this address before deployment with keypair-json command, and then use it as your ID.

But for the scope of this tutorial, you only need to write declare_id!(""); and the Playground will automatically generate one for you.

This is the source with which the SVM as well as users will interact with your program. Hence, your OpSec has to be tight so it won’t be breached.

Step 3: Write the Program Macro


#[program]

Without inputting this macro, the compiler will not understand where the actual contract is located within your program.

In short, you need to write #[program]for the compiler to know anything within this macro is part of the core logic of your protocol.

As you’ll later know, there are other macros in a program, and each one of them has what it does.

In the instant case, #[program]is a blanket of logic under which you write how you expect your application to work.

Step 4: Create the Hello World Module


mod hello_world {

    use super::*;

We created a module for proper organization of our code and named it hello_world. Then we use super::*;.

Remember how we brought in the essential components of Anchor into the program in step 1 through use anchor_lang::prelude::*;;.

Now, those components are only available globally and not locally.

What that mean is that the macros we imported through it won’t be automatically recognizable in this module we created.

If you were to write Context, Result or any other component, the compiler will throw an error.

For this reason, we imported those components locally via use super::*.

By super, we mean what is above or outside of the module; above it. This will make the SVM catch that we are trying to use the simplified Anchor components we brought into the scope of this program from the beginning at this stage.

Hope you got that.

Step 4: Hello World Function


   pub fn hello(ctx: Context&lt;Hello>) -> Result&lt;()> {

    msg!("Hello World, this is John the Dev");

    Ok(())

}

}

This is a public function named hello, with a contextual parameter called Hello. This is a null returning function; meaning we are not expecting it to return a number or anything else.

Hence, there is nothing indicated within the bracket after Result.

We input a message there that says, Hello World, this is John the Dev.

Then we input Ok(()), which indicates that we intentionally do not want the function to return anything.

Step 5: Account Validation


#[derive(Accounts)]

pub struct Hello{}

For performance and security reasons, you don’t want all accounts to interact with your program, and this is where this macro is important.

Or even if you want them to, you might want to bounce off accounts that do not have the minimum amount of SOL to interact with your program.

Whatever commercial or security considerations you might have.

In the instant case, we want don’t want anyone to interact with our Hello World. Hence, we put an empty Hello struct.

Full Code:

If you’ve done everything above correctly, this should be your full code by now:


use anchor_lang::prelude::*;

declare_id!("Af1mHQijv9vDdQtzukBNzTC9RgezfuQyWVoZzn3HMvxz");

#[program]

mod hello_world {

    use super::*;

    pub fn hello(ctx: Context&lt;Hello>) -> Result&lt;()> {

    msg!("Hello World, this is John the Dev");

    Ok(())

}

}

#[derive(Accounts)]

pub struct Hello{}

Step 6: Compilation

Now that you are done with your program. Click on the Build button, and your program will be compiled.

Or, you can rather input anchor build into the terminal. You should see something like this:


Build successful

How to Test Anchor Programs with Solana Playground

This is a simple aspect. Click on the test tube icon, then click on Test.


Testing 'hello'...

Loading Solana CLI...

Success.

RPC URL: https://api.devnet.solana.com

Default Signer: Playground Wallet

Commitment: confirmed

$

Transaction executed in slot 393363660:

Block Time: 2025-07-10T13:28:16+01:00

Version: Legacy

Recent Blockhash: EyX2KcqJAoemP25AzDN8PaTsP8F015nm76XttLqftz6A

Signature 0: mmBbogbTagy3AoR1TzPnF4TY7CZzUg5MfJ7va4UWo2zrv8ME7Jy6aBCPZYMYYpTT06TDX1urGck6g7snTKgiR3W Account 0: srw- HWMSXjDBaUCqCygDXs5UHBX2zUxwnVMeguArfpgVK18 (fee payer)

Account 1: -r-x Af1mHQijv9vDdQtzukBNzTC9RgezfuQyWVoZzn3HMvxz Instruction 0

Program: Af1mHQijv9vDdQtzukBNzTC9RgezfuQyWVoZzn3HMvxz (1)

Data: [149, 118, 59, 220, 196, 127, 161, 179]

Status: OK

Fee: 0.000005

Account 0 balance: 6.8147046 -> 6.8146996

Account 1 balance: 0.00139896

Log Messages:

Program Af1mHQijv9vDdQtzukBNZTC9RgezfuQyWVoZzn3HMvxz invoke [1]

Program Log: Instruction: Hello

Program Log: Hello World

Program Af1mHQijv9vDdQtzukBNzTC9RgezfuQyWVoZzn3HMvxz consumed 443 of 200000 compute units Program Af1mHQijv9vDdQtzukBNzTC9RgezfuQyWVoZzn3HMvxz success

Confirmed $

Conclusion

Congratulations! You just got your feet into Anchor. Now, that you’ve written your first Hello World in Anchor, don’t stay there.

Take a step further to learn how to create an expense tracker with Anchor. Building this next project will make you understand Anchor better and be more creative with it.

Since you’ve read to this stage, you can as well check out the video format on YouTube; comment and subscribe!

How to Build an Expense Tracker on Solana with Anchor

John Fáwọlé — Fri, 04 Jul 2025 11:10:53 +0000

How would you feel if there were an application on Solana for you to track your expenses? Great, right? That is the goal of this tutorial – to build an expense tracking program with Anchor.

Anchor is quite a dynamic language for any developer to express their ideas and build them into products on Solana.

Apart from the use case, this tutorial will also help you become more comfortable with Anchor and also learn more about the language along the way.

Scope of this Tutorial

This tutorial is more of a CRUD onchain application. It enables users to create an expense, modify, or delete it.

In the process of creating this application, you will also learn more about both Anchor and how SVM works.

For instance, you'd get to know more about the practical application of seed bumps, contexts, PDA and so on.

After writing the program, you'd also test it with a TypeScript client to be sure the program works as expected.

Obviously, this will also make you more comfortable with TypeScript.

Setting Up Anchor

Before you can build a program with Anchor, you obviously should have it running on your machine. It’s so simple to setup.

Simply run this command in your Ubuntu [or perhaps Bash]:

curl --proto '=https' --tlsv1.2 -sSfL https://solana-install.solana.workers.dev | bash

It will not only install Anchor, but every other dependency you need to have it run. This includes:

Solana CLI
Node.js
Yarn
Rust

Once you are done running this, you should have this printed on your terminal:

Installed Versions:
Rust: rustc 1.85.0 (4d91de4e4 2025-02-17)
Solana CLI: solana-cli 2.1.15 (src:53545685; feat:3271415109, client:Agave)
Anchor CLI: anchor-cli 0.31.0
Node.js: v23.9.0
Yarn: 1.22.1

Installation complete. Please restart your terminal to apply all changes.

Step-by-step Guide on Building An Expense Tracker with Anchor

Now that you have Anchor setup, it’s time to commence writing our program. For this tutorial, I’ll recommend using the Solana playground online IDE.

You can create a program file with lib.rs In this program, we will be utilizing structs to pack our application's features.

Step 1: Importing Anchor and Kickstarting the Program

use anchor_lang::prelude::*;

declare_id!("");

#[program]

pub mod etracker {

    use super::*;

In the first line above, we imported the prelude of Anchor. Essentially, this acts more like a library that contains everything we need to build our program with Anchor.

Remember that we are not using native Rust, so prelude importation gives us access to types and macros we will need to use Anchor conveniently and without have an unduly verbose program.

Some of the types and macros in prelude include #[program], Context, system and so on.

Immediately after importing Anchor, we declared [or rather set] our program ID – this is the public key of your program. If it were to be in the EVM world, program ID could have been called contract address.

Hope you get it.

Now, your program ID will be needed to generate Program Derived Address (PDA) and also for validation when you are writing a client test.

In a test project like this, Solana playground automatically supplies one. All you have to do is just put the ””.

The #[program] macro we wrote next tells the compiler [and SVM by extension] that the block of code next to this should be treated as the core part of the code.

These are the functions that users can call and interact with.

Once that was done, we went ahead to create the etracker public module. Meanwhile, the way pub works in SVM is similar to public functions on Ethereum.

Mod there refers to a module, which is more like a packet for functions and or instructions.

And here is where you must pay attention:

use super::* has a close connection with the anchor prelude we set at the beginning of the program. It allows our local functions to use the types that anchor prelude imported.

Step 2: Creating the Initialize Expense Function

pub fn initialize_expense(

        ctx: Context<InitializeExpense>,

        id: u64,

        merchant_name: String,

        amount: u64,

    ) -> Result<()> {

        let expense_account: &mut Account<ExpenseAccount> = &mut ctx.accounts.expense_account;

   

        expense_account.id = id;

        expense_account.merchant_name = merchant_name;

        expense_account.amount = amount;

        expense_account.owner = *ctx.accounts.authority.key;

        Ok(())

    }

This is a public function named initialize_expense. It has 2 main parameters: context and ID.

The work of Context above is deeper than it appears. It is an Anchor type, which works on account validation and access security constraints before a user can call a public function.

NB: You can read more about Context here or I might write another technical blog on it soon.

The id contains the details a user must pass into the function as arguments. In the instant case, we demand id, name, and amount.

We want this function to return something, hence the reason we included Result. This is why we have Ok(()) at the end of the program.

We could have gone on another route of error handling, where we set the error in case anything in the function fails.

Moving on, we created a variable called expense_account within the initialize_expense function, and made it mutable so we can modify it later as we want.

Subsequently, we assigned the parameters of the function to their respective types.

But if you notice, we set the owner to *ctx.accounts.authority.key. This simply means the owner has access to the authority key of the context accounts.

Step 3: Creating a Modification Function

   pub fn modify_expense(

    ctx:Context<ModifyExpense>,

    _id: u64,

    merchant_name:String,

    amount: u64,

   ) -> Result<()> {

    let expense_account: &mut Account<ExpenseAccount> = &mut ctx.accounts.expense_account;

    expense_account.merchant_name = merchant_name;

    expense_account.amount = amount;

    Ok(())

   }

}

This is a function that modifies expenses. It takes in some parameters like id, name, and amount. Then these parameters were assigned in the body of the function.

For context, this function makes it possible to change anything on an already initialized expense.

Step 4: Creating the Initialize Expense Struct

We have created an initialize expense function above. Nonetheless, we will also create an initialize expense struct.

Don’t confuse both of them.

The first one defines what accounts can do when they call the function, while the latter is more about the accounts that can interact in the first place.

#[derive(Accounts)]

#[instruction(id: u64)]

pub struct InitializeExpense<'info> {

    #[account(mut)]

    pub authority: Signer<'info>,

    #[account(

        init,

        payer = authority,

        space = 8 + 8 + 32 + (4 + 12) + 8 + 1,

        seeds = [b"expense", authority.key().as_ref(), id.to_le_bytes().as_ref()],

        bump

    )]

    pub expense_account: Account<'info, ExpenseAccount>,

    pub system_program: Program<'info, System>,

}

#[derive(Accounts)] is a macro in Anchor that deals more with the cryptographic security of the interacting accounts. It validates accounts, verifies signatures, and does general safety-check.

#[instruction(id: u64)] essentially passes args into the #[derive] struct. The id that the instruction passes will be used in the struct of accounts.

Then we created a public struct called InitializeExpense and passed info as a lifetime annotation.

Since info has quite an infinite duration, it makes the struct enjoy the same attribute.

Then we created a mutable account, meaning we can change its state, and gave the Signer public authority.

Once that was done, we initialized our account and assign various account authority variables.

Step 5: Modify and Delete Expenses Struct

#[derive(Accounts)]

#[instruction(id : u64)]

pub struct ModifyExpense<'info>{

    #[account(mut)]

    pub authority: Signer<'info>,

    #[account(

        mut,

        seeds = [b"expense", authority.key().as_ref(), id.to_le_bytes().as_ref()],

        bump

    )]

    pub expense_account: Account<'info, ExpenseAccount>,

    pub system_program: Program<'info, System>,

}

#[derive(Accounts)]

#[instruction(id: u64)]

pub struct DeleteExpense<'info> {

    #[account(mut)]

    pub authority: Signer<'info>,

    #[account(

        mut,

        close = authority,

        seeds = [b"expense", authority.key().as_ref(), id.to_le_bytes().as_ref()],

        bump

    )]

    pub expense_account: Account<'info, ExpenseAccount>,

    pub system_program: Program<'info, System>,

}

This is similar to what we explained above. Only that, in the instant case, it is for expenses modification.

Step 6: Expense Account Struct

#[account]

#[derive(Default)]

pub struct ExpenseAccount{

    pub id: u64,

    pub owner: Pubkey,

    pub merchant_name: String,

    pub amount: u64,

}

The #[derive(Default)] macro here creates default values for the struct even when no tangible has been passed into them. This will be quite useful when we are testing.

Then we created some public variables, such as id, owner, name, and amount.

Testing the Expense Tracker Application with TypeScript

It is not enough to write a program, we should also write end-to-end tests to ensure it works as expected and catches low-hanging security vulnerabilities.

Create a index.test.ts file.

Step 1: Setting Up The PDA

describe("Expense Tracker", async () => {

  let merchantName = "test";

  let amount = 100;

  let id = 1;

  let merchantName2 = "test 2";

  let amount2 = 200;

  let [expense_account] = anchor.web3.PublicKey.findProgramAddressSync(

    [

      Buffer.from("expense"),

      pg.wallet.publicKey.toBuffer(),

      new BN(id).toArrayLike(Buffer, "le", 8),

    ],

    pg.program.programId

  );

Here, we setup [or rather describe] the sample variables along with their assigned values.

Up next, we simulated a Program Derived Address (PDA)j we will later use in our test.

Step 2: Initialize Expense Test

  it("Initialize Expense", async () => {

    await pg.program.methods

      .initializeExpense(new anchor.BN(id), merchantName, new anchor.BN(amount))

      .accounts({

        expenseAccount: expense_account,

        authority: pg.wallet.publicKey,

      })

      .rpc();

  });

This test calls the initializeExpense function in our program and passes the parameters it needs. Once that was set, we initialized an expense by calling .rpc().

Step 3: Modify Expense Test

  it("Modify Expense", async () => {

    await pg.program.methods

      .modifyExpense(new anchor.BN(id), merchantName2, new anchor.BN(amount2))

      .accounts({

        expenseAccount: expense_account,

        authority: pg.wallet.publicKey,

      })

      .rpc();

  });

This is similar to the test above. In this case, we are trying to modify something and want to test if it will be successful.

Step 4: Delete Expense Test

  it("Delete Expense", async () => {

    await pg.program.methods

      .deleteExpense(new anchor.BN(id))

      .accounts({

        expenseAccount: expense_account,

        authority: pg.wallet.publicKey,

      })

      .rpc();

  });

If you remember, we passed 3 values in our initializeExpense:

Id
Expense_account
Authority

We will try to delete for a particular user.

Demo

Load up your lib.rs program by clicking the Build button:. You should get something like this:

Loading Anchor CLI...
Success.

Then run the test by clicking the Test button. You should get something like this:

Running tests...
  index.test.ts:
  Expense Tracker
    1) Initialize Expense
    ✔ Modify Expense (1593ms)
    2) Delete Expense
  1 passing (3s)
  2 failing
  1) Expense Tracker
       Initialize Expense:
     failed to send transaction: Transaction simulation failed: Error processing Instruction 0: custom program error: 0x0
  

  2) Expense Tracker
       Delete Expense:
     TypeError: pg.program.methods.deleteExpense is not a function

As you can see, some of our tests failed probably due to network errors.

Conclusion

This Expense Tracker project is a great one for anyone trying to program on Solana with Anchor.

Apart from the use cases of the project, you get to encounter concepts—such as PDA—that will spur you to learn more about how the Solana Virtual Machine works.

The more you write friendly programs like this, the more fluent you become with Anchor. If you enjoyed reading this, share it on Twitter and tag me – @jofawole.

Keep hacking!