![](https://cdn-images-1.medium.com/max/2400/1*74h1d3kVnQjvVVg7e9iEXA.png)

Web development has been my primary approach to making things a reality. I love how easy it is to get an app released and how quickly you can iterate on it.

The web ecosystem is vast and there are many tools to choose from. This is why I've written a blog post in the past on my tech stack for web development to build web apps today.

[**My Tech Stack For Building Web Apps Today**
*This stack has been proven to work for me and helped me build web apps faster. It’s not perfect, but it works!*&#x6A;avascript.plainenglish.io](https://javascript.plainenglish.io/my-tech-stack-for-building-web-apps-today-43398556bb4d "https://javascript.plainenglish.io/my-tech-stack-for-building-web-apps-today-43398556bb4d")

When it comes to mobile, I like to stick with the same stack as much as possible. This is why I've been using React Native for mobile development. It allows me to apply the same principles and strategies I've learned from web development to mobile development, such as using React and other libraries.

However, not everything is available in React Native as it is in web development, especially in the UI.

I want to use Tailwind and shadcn libraries to make my life easier. But these libraries aren't available in React Native without some work.

This is where Gluestack UI v2 comes in. It is a library that provides a set of components that uses the same approach with shadcn and Tailwind CSS but for React Native.

[**gluestack: React & React Native Components & Patterns**
*Copy-paste universal, accessible and beautifully designed components & patterns crafted with Tailwind CSS (NativeWind)…*&#x67;luestack.io](https://gluestack.io/ "https://gluestack.io/")

![](https://cdn-images-1.medium.com/max/1600/1*EGNFEcyDX7CRjnyPyHzldw.png)

Let me explain it further.

### Tailwind CSS (NativeWind)

If you haven't heard about Tailwind CSS, it is a utility-first CSS framework that allows you to build custom designs without writing any CSS. It is a great tool for web development and I've been using it for a while now.

With Gluestack UI v2, you can apply the same principle to React Native. It allows you to apply the same classes you use in Tailwind CSS to React Native components.

Here's an example:

![](https://cdn-images-1.medium.com/max/1600/1*39V6L5grqnOcN_jLsEupgA.png)

Here’s an example using Gluestack UI:

![](https://cdn-images-1.medium.com/max/1600/1*nJ8zfmrY9hXlKOR4Kiqnug.png)

![](https://cdn-images-1.medium.com/max/1600/1*XBNeu_nVQGDW066Ykb_BqA.png)

Most of what you’ve learned in Tailwind CSS web development can be reused for mobile development with Gluestack! I love it!

### Shadcn copy-paste approach

One of the things that make shadcn unique compared to other UI libraries is its copy-paste approach. You can copy the code from the website and paste it into your project and it will work.

It gives you the whole component with the styles and everything. And you are able to fully customize it to your liking. You own the code.

Gluestack UI v2 provides the same approach. You can copy the code from the website and paste it into your project and it will work.

Or better yet, you can also use their CLI to pull the component directly into your project. Similar to the shadcn CLI tool.

Here's an example:

![](https://cdn-images-1.medium.com/max/1600/1*nYU1PCK0Wp6hPShjI2PZSg.png)

![](https://cdn-images-1.medium.com/max/1600/1*NKKyuJ5C1PxX_Vgk_UNBzg.png)

![](https://cdn-images-1.medium.com/max/1600/1*_AjO9FVqj0YZVnQqeFb4kQ.png)

Here’s another component:

![](https://cdn-images-1.medium.com/max/1600/1*2-Pz5VboOuYHqdno2jUqvA.png)

It's that easy!

### Conclusion

I've been using Gluestack UI for a while now even before v2. I still have a project that is under v1 and it's still working as expected. I'm still able to use the same components, it's just that I can't use the Tailwind CSS approaches yet.

But with Gluestack UI v2, I can now use the same approach I use in web development to mobile development. It's a great tool to have in your toolbox.

I love how easy it is to use and how it makes my life easier. I can now focus on building the app and not worry about the UI. Check out their components!

[**All Components**
*gluestack-ui provides 30+ responsive components for every screen and style*gluestack.io](https://gluestack.io/ui/docs/components/all-components "https://gluestack.io/ui/docs/components/all-components")

Hope this helps you in your mobile development journey as it did mine. It's not perfect, but it's a great start and addition to your stack.

As always, if you have any questions or suggestions, feel free to leave a comment below. I’d love to hear from you.

Thank you for reading. I hope this will help you on your journey! ❤️

### A message from our Founder

**Hey,** [**Sunil**](https://linkedin.com/in/sunilsandhu) **here.** I wanted to take a moment to thank you for reading until the end and for being a part of this community.

Did you know that our team run these publications as a volunteer effort to over 3.5m monthly readers? **We don’t receive any funding, we do this to support the community. ❤️**

If you want to show some love, please take a moment to **follow me on** [**LinkedIn**](https://linkedin.com/in/sunilsandhu)**,** [**TikTok**](https://tiktok.com/@messyfounder), [**Instagram**](https://instagram.com/sunilsandhu). You can also subscribe to our [**weekly newsletter**](https://newsletter.plainenglish.io/).

<img src="https://cdn-images-1.medium.com/max/2400/1*74h1d3kVnQjvVVg7e9iEXA.png" alt="">
Web development has been my primary approach to making things a reality. I love how easy it is to get an app released and how quickly you can iterate on it.
The web ecosystem is vast and there are many tools to choose from. This is why I've written a blog post in the past on my tech stack for web development to build web apps today.
<a href="https://javascript.plainenglish.io/my-tech-stack-for-building-web-apps-today-43398556bb4d" title="https://javascript.plainenglish.io/my-tech-stack-for-building-web-apps-today-43398556bb4d">My Tech Stack For Building Web Apps Today
This stack has been proven to work for me and helped me build web apps faster. It’s not perfect, but it works!javascript.plainenglish.io</a>
When it comes to mobile, I like to stick with the same stack as much as possible. This is why I've been using React Native for mobile development. It allows me to apply the same principles and strategies I've learned from web development to mobile development, such as using React and other libraries.
However, not everything is available in React Native as it is in web development, especially in the UI.
I want to use Tailwind and shadcn libraries to make my life easier. But these libraries aren't available in React Native without some work.
This is where Gluestack UI v2 comes in. It is a library that provides a set of components that uses the same approach with shadcn and Tailwind CSS but for React Native.
<a href="https://gluestack.io/" title="https://gluestack.io/">gluestack: React &#x26; React Native Components &#x26; Patterns
Copy-paste universal, accessible and beautifully designed components &#x26; patterns crafted with Tailwind CSS (NativeWind)…gluestack.io</a>
<img src="https://cdn-images-1.medium.com/max/1600/1*EGNFEcyDX7CRjnyPyHzldw.png" alt="">
Let me explain it further.
<h3 id="tailwind-css-nativewind">Tailwind CSS (NativeWind)</h3>
If you haven't heard about Tailwind CSS, it is a utility-first CSS framework that allows you to build custom designs without writing any CSS. It is a great tool for web development and I've been using it for a while now.
With Gluestack UI v2, you can apply the same principle to React Native. It allows you to apply the same classes you use in Tailwind CSS to React Native components.
Here's an example:
<img src="https://cdn-images-1.medium.com/max/1600/1*39V6L5grqnOcN_jLsEupgA.png" alt="">
Here’s an example using Gluestack UI:
<img src="https://cdn-images-1.medium.com/max/1600/1*nJ8zfmrY9hXlKOR4Kiqnug.png" alt="">
<img src="https://cdn-images-1.medium.com/max/1600/1*XBNeu_nVQGDW066Ykb_BqA.png" alt="">
Most of what you’ve learned in Tailwind CSS web development can be reused for mobile development with Gluestack! I love it!
<h3 id="shadcn-copy-paste-approach">Shadcn copy-paste approach</h3>
One of the things that make shadcn unique compared to other UI libraries is its copy-paste approach. You can copy the code from the website and paste it into your project and it will work.
It gives you the whole component with the styles and everything. And you are able to fully customize it to your liking. You own the code.
Gluestack UI v2 provides the same approach. You can copy the code from the website and paste it into your project and it will work.
Or better yet, you can also use their CLI to pull the component directly into your project. Similar to the shadcn CLI tool.
Here's an example:
<img src="https://cdn-images-1.medium.com/max/1600/1*nYU1PCK0Wp6hPShjI2PZSg.png" alt="">
<img src="https://cdn-images-1.medium.com/max/1600/1*NKKyuJ5C1PxX_Vgk_UNBzg.png" alt="">
<img src="https://cdn-images-1.medium.com/max/1600/1*_AjO9FVqj0YZVnQqeFb4kQ.png" alt="">
Here’s another component:
<img src="https://cdn-images-1.medium.com/max/1600/1*2-Pz5VboOuYHqdno2jUqvA.png" alt="">
It's that easy!
<h3 id="conclusion">Conclusion</h3>
I've been using Gluestack UI for a while now even before v2. I still have a project that is under v1 and it's still working as expected. I'm still able to use the same components, it's just that I can't use the Tailwind CSS approaches yet.
But with Gluestack UI v2, I can now use the same approach I use in web development to mobile development. It's a great tool to have in your toolbox.
I love how easy it is to use and how it makes my life easier. I can now focus on building the app and not worry about the UI. Check out their components!
<a href="https://gluestack.io/ui/docs/components/all-components" title="https://gluestack.io/ui/docs/components/all-components">All Components
gluestack-ui provides 30+ responsive components for every screen and stylegluestack.io</a>
Hope this helps you in your mobile development journey as it did mine. It's not perfect, but it's a great start and addition to your stack.
As always, if you have any questions or suggestions, feel free to leave a comment below. I’d love to hear from you.
Thank you for reading. I hope this will help you on your journey! ❤️
<h3 id="a-message-from-ourfounder">A message from our Founder</h3>
Hey, <a href="https://linkedin.com/in/sunilsandhu">Sunil</a> here. I wanted to take a moment to thank you for reading until the end and for being a part of this community.
Did you know that our team run these publications as a volunteer effort to over 3.5m monthly readers? We don’t receive any funding, we do this to support the community. ❤️
If you want to show some love, please take a moment to follow me on <a href="https://linkedin.com/in/sunilsandhu">LinkedIn</a>, <a href="https://tiktok.com/@messyfounder">TikTok</a>, <a href="https://instagram.com/sunilsandhu">Instagram</a>. You can also subscribe to our <a href="https://newsletter.plainenglish.io/">weekly newsletter</a>.

shadcn in React Native?

![](https://cdn-images-1.medium.com/max/1600/1*-MIBhQQXcCoFkZASy7pRJw.png)

Generated by the author with AI.

**Two months ago, I thought I had perfected my AI coding workflow.**

I posted a blog breaking down how I used Cursor and its AI agent features to build productivity apps faster than ever before. Developers resonated. But here I am again, because *everything changed.*

This isn’t just an update. This is a total replacement. I dropped Cursor’s AI tools almost entirely. And after using Claude Code for just one week, I don’t think I’m ever going back.

***

### Why I Switched to Claude Code (And Stopped Using Cursor Agents)

I used Cursor religiously for over a year. It’s a powerful AI pair-programming experience. But after Claude Code’s pricing shift, I gave it a shot. And what I found blew me away:

* **Claude Code lives in the terminal.** No GUI. No editor. Just an agent that can drop into any repo and work.
* **It solved complex bugs Cursor agents couldn’t.**
* **It generates more thoughtful, higher-quality solutions.**

Cursor still runs in my dev environment, but only as a basic code editor now. All AI work? That’s Claude Code.

***

### Getting Started with Claude Code

Before diving into the workflow, here’s how simple it is to set up Claude Code:

[**Claude Code SDK - Anthropic**
*Learn about programmatically integrating Claude Code into your applications with the Claude Code SDK.*&#x64;ocs.anthropic.com](https://docs.anthropic.com/en/docs/claude-code/sdk "https://docs.anthropic.com/en/docs/claude-code/sdk")

1. **Install via NPM:**

```
npm install -g @anthropic-ai/claude-code
```

2\. **Authenticate (on first run):**

```
claude
```

Follow the prompt to log into your Anthropic account (Pro or Max plan required).

3\. **You’re ready to go.** Now you can run the `claude` command in any terminal, in any codebase, and just start chatting with it:

```
claude
```

From there, ask it questions, request features, or give it tasks like:

```
> add a login form using React> fix the bug in UserController
```

Now, let’s get into the actual workflow I use every day.

***

### My Claude Code Workflow:

Here’s exactly how I work with Claude Code to ship features, debug issues, and build complex systems faster than ever.

#### 1. Start in Plan Mode (Always)

Claude Code has a special mode called *plan mode*. Activate it with `Shift + Tab` inside the terminal interface.

![](https://cdn-images-1.medium.com/max/1600/1*ZzBeioS-KIm2dhXYjlvjWw.png)

> ***Why it matters:** Plan mode doesn’t touch your files. It just thinks.*

When you submit a request — like “Add user authentication to this project”, Claude won’t start writing code right away. Instead, it outlines a comprehensive plan:

* What files it will modify
* The logic it intends to add or delete
* Potential edge cases or limitations

**How I use it:**

* I always begin in plan mode
* Review the plan line-by-line
* Give it a go/no-go decision based on clarity and scope
* Ask clarifying questions if anything feels off

This one habit alone has prevented dozens of unnecessary file changes and costly bugs. It’s like a dry run for your request.

#### 2. Generate and Maintain a [`claude.md`](https://claude.md) File

Think of [`claude.md`](https://claude.md) as the operating manual Claude follows while working in your repo.

Use the `/init` command and it will automatically generate this file. But don’t stop there:

**What I include in mine:**

* Frameworks used (e.g. “This is a [Next.js](https://Next.js) project”)
* Styling rules (e.g. “Use Tailwind utility classes only”)
* Naming conventions (e.g. “All components must use kebab-case”)
* Architectural notes (e.g. “State management handled via Redux”)

You can also add to it conversationally:

> *“Hey Claude, remember that we never mutate props directly in React.”*

It will update the file on its own. This is *way* more reliable than ad-hoc reminders.

#### 3. Use Git as Your Checkpoint System

Claude Code doesn’t offer a restore feature like Cursor.

**My workaround:**

* Commit *constantly*
* Use descriptive commit messages
* Treat commits like time-stamped checkpoints

Before allowing Claude to execute a plan, I make a commit:

```
$ git commit -am "Pre-Claude change: added placeholder login logic"
```

Then if Claude’s change introduces regressions or breaks unrelated parts of the codebase:

```
$ git reset --hard HEAD~1
```

No risk. No stress. And yes — it saved me at least 5 times in one week.

#### 4. Feed It Screenshots (Seriously)

You can drag & drop screenshots into the Claude terminal interface.

**Use cases I’ve tested:**

* Console error messages (e.g. “Uncaught TypeError”)
* Web app UI bugs (e.g. layout breaks)
* Design handoffs (e.g. Figma previews, mockups)

Claude parses the image and incorporates that context into its response, often better than I expect. It’s basically doing visual debugging *and* frontend development off of JPEGs.

#### 5. Drag and Drop Entire Folders for Context

Want to supercharge Claude’s understanding of your stack? Just drag in another codebase.

**Real example:**

* I was working on the web app front end
* I dragged in the `backend/` folder from another repo
* Asked Claude: “Use this to understand the API endpoints available, don’t modify it.”

Claude parsed the whole thing. Later, it used that knowledge to:

* Build more accurate API integration logic
* Avoid asking redundant questions
* Even warn me when a backend method didn’t exist

**Important:** It won’t modify the external folder unless you explicitly say so.

#### 6. Use URLs Like Bookmarks, It Can Browse

Claude Code has built-in web browsing capabilities. Paste a URL to official documentation, and it will read and cite from it.

But here’s the wild part:

* You *don’t even need* to paste links.
* You can just say: “Use the latest Notion API v2.4.”
* Claude goes and fetches the relevant docs, reads them, and executes accordingly

This has completely eliminated my need to babysit it through external documentation.

#### 7. Use Sub-Agents for Massive Tasks

Claude can fork itself. Literally.

If you’re running a giant task — like porting an iOS app to Android — you can say:

> *“Break this up into subtasks and spin up sub-agents to handle them in parallel.”*

And it will.

**Use cases I’ve tested:**

* UI migration + business logic separation
* Component-by-component translation between frameworks
* Background optimization while I do something else

The first time I tried this, it spun up 10 agents concurrently. A task that should’ve taken 60+ minutes? Done in under 15.

#### 8. Ask It to QA Its Own Work

After every major change, I ask Claude:

> *“Double-check everything. What might this have broken?”*

It often:

* Detects dependency conflicts
* Warns about cascading failures
* Suggests edge-case handling (like empty state fallbacks)

This step catches the 5% that even senior devs can overlook.

#### 9. Review the Output Like a Real PR

This step is *critical.*

Claude Code is *so good* that you’ll be tempted to just trust it. Don’t.

I treat it like a human teammate:

* Read every modified file
* Run unit tests
* Use linters + TypeScript to catch structural issues
* Compare diffs against original functionality

Even when it’s right, it’s good to *know why.*

***

### So Why Is Claude Code Better?

Cursor *uses the same models* (Sonnet 4, Opus).

So what gives?

Here’s my hypothesis:

* Cursor aggressively compresses context to save tokens
* Claude Code does not, it maximizes context and quality
* Claude Code *loses money* on heavy users like me

Someone even built a script to measure token usage. In one week, I used $300 worth of API tokens, for $20.

> ***Claude Code is probably running at a loss to win devs.***

Will this last? Probably not. But for now, it’s an insane value.

***

### The Catch (Because of Course There’s One)

Claude Code isn’t perfect.

* **$200/month is steep** if you’re not a professional dev
* **No built-in checkpointing** (manual Git commits only)
* **Slow execution times** on big tasks (30+ mins sometimes)

But if you make money from software? The ROI is ridiculous.

***

### Who Should Use This

**Use Claude Code if:**

* You build apps full-time
* You care about speed and quality
* You can afford $200/mo for a 10x boost

**Stick with Cursor if:**

* You’re a hobbyist
* You’re just learning
* You need a cheaper (still great) tool

Cursor is still excellent. But for now? Claude Code is in a different league.

### A message from our Founder

**Hey,** [**Sunil**](https://linkedin.com/in/sunilsandhu) **here.** I wanted to take a moment to thank you for reading until the end and for being a part of this community.

Did you know that our team run these publications as a volunteer effort to over 3.5m monthly readers? **We don’t receive any funding, we do this to support the community. ❤️**

If you want to show some love, please take a moment to **follow me on** [**LinkedIn**](https://linkedin.com/in/sunilsandhu)**,** [**TikTok**](https://tiktok.com/@messyfounder), [**Instagram**](https://instagram.com/sunilsandhu). You can also subscribe to our [**weekly newsletter**](https://newsletter.plainenglish.io/).

<img src="https://cdn-images-1.medium.com/max/1600/1*-MIBhQQXcCoFkZASy7pRJw.png" alt="">
Generated by the author with AI.
Two months ago, I thought I had perfected my AI coding workflow.
I posted a blog breaking down how I used Cursor and its AI agent features to build productivity apps faster than ever before. Developers resonated. But here I am again, because everything changed.
This isn’t just an update. This is a total replacement. I dropped Cursor’s AI tools almost entirely. And after using Claude Code for just one week, I don’t think I’m ever going back.
<hr>
<h3 id="why-i-switched-to-claude-code-and-stopped-using-cursoragents">Why I Switched to Claude Code (And Stopped Using Cursor Agents)</h3>
I used Cursor religiously for over a year. It’s a powerful AI pair-programming experience. But after Claude Code’s pricing shift, I gave it a shot. And what I found blew me away:
<ul>
<li>Claude Code lives in the terminal. No GUI. No editor. Just an agent that can drop into any repo and work.</li>
<li>It solved complex bugs Cursor agents couldn’t.</li>
<li>It generates more thoughtful, higher-quality solutions.</li>
</ul>
Cursor still runs in my dev environment, but only as a basic code editor now. All AI work? That’s Claude Code.
<hr>
<h3 id="getting-started-with-claudecode">Getting Started with Claude Code</h3>
Before diving into the workflow, here’s how simple it is to set up Claude Code:
<a href="https://docs.anthropic.com/en/docs/claude-code/sdk" title="https://docs.anthropic.com/en/docs/claude-code/sdk">Claude Code SDK - Anthropic
Learn about programmatically integrating Claude Code into your applications with the Claude Code SDK.docs.anthropic.com</a>
<ol>
<li>Install via NPM:</li>
</ol>
<pre><code class="code-highlight">npm install -g @anthropic-ai/claude-code
</code></pre>
2. Authenticate (on first run):
<pre><code class="code-highlight">claude
</code></pre>
Follow the prompt to log into your Anthropic account (Pro or Max plan required).
3. You’re ready to go. Now you can run the <code>claude</code> command in any terminal, in any codebase, and just start chatting with it:
<pre><code class="code-highlight">claude
</code></pre>
From there, ask it questions, request features, or give it tasks like:
<pre><code class="code-highlight">> add a login form using React> fix the bug in UserController
</code></pre>
Now, let’s get into the actual workflow I use every day.
<hr>
<h3 id="my-claude-code-workflow">My Claude Code Workflow:</h3>
Here’s exactly how I work with Claude Code to ship features, debug issues, and build complex systems faster than ever.
<h4 id="1-start-in-plan-modealways">1. Start in Plan Mode (Always)</h4>
Claude Code has a special mode called plan mode. Activate it with <code>Shift + Tab</code> inside the terminal interface.
<img src="https://cdn-images-1.medium.com/max/1600/1*ZzBeioS-KIm2dhXYjlvjWw.png" alt="">
<blockquote>
Why it matters: Plan mode doesn’t touch your files. It just thinks.
</blockquote>
When you submit a request — like “Add user authentication to this project”, Claude won’t start writing code right away. Instead, it outlines a comprehensive plan:
<ul>
<li>What files it will modify</li>
<li>The logic it intends to add or delete</li>
<li>Potential edge cases or limitations</li>
</ul>
How I use it:
<ul>
<li>I always begin in plan mode</li>
<li>Review the plan line-by-line</li>
<li>Give it a go/no-go decision based on clarity and scope</li>
<li>Ask clarifying questions if anything feels off</li>
</ul>
This one habit alone has prevented dozens of unnecessary file changes and costly bugs. It’s like a dry run for your request.
<h4 id="2-generate-and-maintain-a-claudemd-file">2. Generate and Maintain a <a href="https://claude.md"><code>claude.md</code></a> File</h4>
Think of <a href="https://claude.md"><code>claude.md</code></a> as the operating manual Claude follows while working in your repo.
Use the <code>/init</code> command and it will automatically generate this file. But don’t stop there:
What I include in mine:
<ul>
<li>Frameworks used (e.g. “This is a <a href="https://Next.js">Next.js</a> project”)</li>
<li>Styling rules (e.g. “Use Tailwind utility classes only”)</li>
<li>Naming conventions (e.g. “All components must use kebab-case”)</li>
<li>Architectural notes (e.g. “State management handled via Redux”)</li>
</ul>
You can also add to it conversationally:
<blockquote>
“Hey Claude, remember that we never mutate props directly in React.”
</blockquote>
It will update the file on its own. This is way more reliable than ad-hoc reminders.
<h4 id="3-use-git-as-your-checkpoint-system">3. Use Git as Your Checkpoint System</h4>
Claude Code doesn’t offer a restore feature like Cursor.
My workaround:
<ul>
<li>Commit constantly</li>
<li>Use descriptive commit messages</li>
<li>Treat commits like time-stamped checkpoints</li>
</ul>
Before allowing Claude to execute a plan, I make a commit:
<pre><code class="code-highlight">$ git commit -am "Pre-Claude change: added placeholder login logic"
</code></pre>
Then if Claude’s change introduces regressions or breaks unrelated parts of the codebase:
<pre><code class="code-highlight">$ git reset --hard HEAD~1
</code></pre>
No risk. No stress. And yes — it saved me at least 5 times in one week.
<h4 id="4-feed-it-screenshots-seriously">4. Feed It Screenshots (Seriously)</h4>
You can drag &#x26; drop screenshots into the Claude terminal interface.
Use cases I’ve tested:
<ul>
<li>Console error messages (e.g. “Uncaught TypeError”)</li>
<li>Web app UI bugs (e.g. layout breaks)</li>
<li>Design handoffs (e.g. Figma previews, mockups)</li>
</ul>
Claude parses the image and incorporates that context into its response, often better than I expect. It’s basically doing visual debugging and frontend development off of JPEGs.
<h4 id="5-drag-and-drop-entire-folders-forcontext">5. Drag and Drop Entire Folders for Context</h4>
Want to supercharge Claude’s understanding of your stack? Just drag in another codebase.
Real example:
<ul>
<li>I was working on the web app front end</li>
<li>I dragged in the <code>backend/</code> folder from another repo</li>
<li>Asked Claude: “Use this to understand the API endpoints available, don’t modify it.”</li>
</ul>
Claude parsed the whole thing. Later, it used that knowledge to:
<ul>
<li>Build more accurate API integration logic</li>
<li>Avoid asking redundant questions</li>
<li>Even warn me when a backend method didn’t exist</li>
</ul>
Important: It won’t modify the external folder unless you explicitly say so.
<h4 id="6-use-urls-like-bookmarks-it-canbrowse">6. Use URLs Like Bookmarks, It Can Browse</h4>
Claude Code has built-in web browsing capabilities. Paste a URL to official documentation, and it will read and cite from it.
But here’s the wild part:
<ul>
<li>You don’t even need to paste links.</li>
<li>You can just say: “Use the latest Notion API v2.4.”</li>
<li>Claude goes and fetches the relevant docs, reads them, and executes accordingly</li>
</ul>
This has completely eliminated my need to babysit it through external documentation.
<h4 id="7-use-sub-agents-for-massivetasks">7. Use Sub-Agents for Massive Tasks</h4>
Claude can fork itself. Literally.
If you’re running a giant task — like porting an iOS app to Android — you can say:
<blockquote>
“Break this up into subtasks and spin up sub-agents to handle them in parallel.”
</blockquote>
And it will.
Use cases I’ve tested:
<ul>
<li>UI migration + business logic separation</li>
<li>Component-by-component translation between frameworks</li>
<li>Background optimization while I do something else</li>
</ul>
The first time I tried this, it spun up 10 agents concurrently. A task that should’ve taken 60+ minutes? Done in under 15.
<h4 id="8-ask-it-to-qa-its-ownwork">8. Ask It to QA Its Own Work</h4>
After every major change, I ask Claude:
<blockquote>
“Double-check everything. What might this have broken?”
</blockquote>
It often:
<ul>
<li>Detects dependency conflicts</li>
<li>Warns about cascading failures</li>
<li>Suggests edge-case handling (like empty state fallbacks)</li>
</ul>
This step catches the 5% that even senior devs can overlook.
<h4 id="9-review-the-output-like-a-realpr">9. Review the Output Like a Real PR</h4>
This step is critical.
Claude Code is so good that you’ll be tempted to just trust it. Don’t.
I treat it like a human teammate:
<ul>
<li>Read every modified file</li>
<li>Run unit tests</li>
<li>Use linters + TypeScript to catch structural issues</li>
<li>Compare diffs against original functionality</li>
</ul>
Even when it’s right, it’s good to know why.
<hr>
<h3 id="so-why-is-claude-codebetter">So Why Is Claude Code Better?</h3>
Cursor uses the same models (Sonnet 4, Opus).
So what gives?
Here’s my hypothesis:
<ul>
<li>Cursor aggressively compresses context to save tokens</li>
<li>Claude Code does not, it maximizes context and quality</li>
<li>Claude Code loses money on heavy users like me</li>
</ul>
Someone even built a script to measure token usage. In one week, I used $300 worth of API tokens, for $20.
<blockquote>
Claude Code is probably running at a loss to win devs.
</blockquote>
Will this last? Probably not. But for now, it’s an insane value.
<hr>
<h3 id="the-catch-because-of-course-theresone">The Catch (Because of Course There’s One)</h3>
Claude Code isn’t perfect.
<ul>
<li>$200/month is steep if you’re not a professional dev</li>
<li>No built-in checkpointing (manual Git commits only)</li>
<li>Slow execution times on big tasks (30+ mins sometimes)</li>
</ul>
But if you make money from software? The ROI is ridiculous.
<hr>
<h3 id="who-should-usethis">Who Should Use This</h3>
Use Claude Code if:
<ul>
<li>You build apps full-time</li>
<li>You care about speed and quality</li>
<li>You can afford $200/mo for a 10x boost</li>
</ul>
Stick with Cursor if:
<ul>
<li>You’re a hobbyist</li>
<li>You’re just learning</li>
<li>You need a cheaper (still great) tool</li>
</ul>
Cursor is still excellent. But for now? Claude Code is in a different league.
<h3 id="a-message-from-ourfounder">A message from our Founder</h3>
Hey, <a href="https://linkedin.com/in/sunilsandhu">Sunil</a> here. I wanted to take a moment to thank you for reading until the end and for being a part of this community.
Did you know that our team run these publications as a volunteer effort to over 3.5m monthly readers? We don’t receive any funding, we do this to support the community. ❤️
If you want to show some love, please take a moment to follow me on <a href="https://linkedin.com/in/sunilsandhu">LinkedIn</a>, <a href="https://tiktok.com/@messyfounder">TikTok</a>, <a href="https://instagram.com/sunilsandhu">Instagram</a>. You can also subscribe to our <a href="https://newsletter.plainenglish.io/">weekly newsletter</a>.

And why you might want to do the same (if you’re a serious builder).

I Replaced Cursor Agent with Claude Code, Here’s What Happened

![](https://cdn-images-1.medium.com/max/1600/1*kL3ilZSFElPb20j9mEO-SQ.jpeg)

Photo by [Google DeepMind](https://unsplash.com/@googledeepmind?utm_content=creditCopyText\&utm_medium=referral\&utm_source=unsplash) on [Unsplash](https://unsplash.com/photos/a-close-up-of-a-green-object-on-a-white-surface-SrLwQZP0_Ec?utm_content=creditCopyText\&utm_medium=referral\&utm_source=unsplash)

It’s been almost 2 years since I first encountered the [“Attention is all you need”](https://arxiv.org/abs/1706.03762) paper by Vaswani et al. (2017). I’ve mentioned it confidently in a few conversations, but I only just came to understand it *enough* this month.

> We listen, we don’t judge.

In all fairness to me, I only started taking my NLP journey seriously late last year, and I’ve had to wade through information overload, *hype* and a lot of foundational stuff just to get to a point where papers like this finally make proper sense. I even wrote about [Word2Vec in my last article](https://medium.com/ai-in-plain-english/word2vec-my-rookie-thoughts-on-the-landmark-nlp-paper-5536967a93e2); you can check it out.

Before this latest attempt, I had tried several times to read the paper, but it never fully clicked. This time around, I used the [3-pass technique I saw on Madukoma Blessed’s blog](https://mblessed.hashnode.dev/research-that-sticks-the-strategic-framework-for-studying-technical-papers), and I finally got the core message and technical parts.

If you’ve also been putting off reading “scary papers,” maybe this method might help you. Walk with me.

***

### **The strategy**

The 3-pass method is pretty straightforward.

* First, you skim and note the overall idea;
* Then, you dig a bit deeper for key ideas;
* Finally, you go all in on the technical details.

It helps to ease into tough papers without burning out. And that’s exactly what I did. As you read further, I’ll detail my learnings in bullet points under each pass.

***

### Some information…

To help you understand the notes in the rest of the article, you need to be familiar with a few things, like RNNs, CNNs and Sequence transduction models (like Seq2Seq). You don’t have to cram the math. Just get the general idea.

* **RNNs (Recurrent Neural Networks):**
  They process data *step by step*, passing information from one step to the next. Think of them like reading a sentence one word at a time, remembering what came before. They’re great at handling sequences, but they can be slow and struggle with long sequences.
* **CNNs (Convolutional Neural Networks):**
  Originally built for images, but sometimes used for text too. They focus on learning *local patterns. F*or example, detecting small chunks or phrases in text. They’re faster than RNNs in some cases, but still have limits with longer dependencies.
* **Sequence transduction models (like Seq2Seq models):**
  These models take in a sequence and produce another sequence. Classic examples? Translation and summarisation. You give it a sentence, and it outputs a new sentence in another language or a shorter version.

If these still feel confusing, it might be helpful to pause and brush up a little more on NLP basics first. And that’s perfectly okay. Been there, done that. 2 years *hello*?!

> Maybe still a little there to be honest.

***

### Pass 1: Skimming and “Wait, that’s why?!”

* The whole point of the paper is this: What if we stopped using complicated stuff like *RNNs* and *CNNs* to build sequence transduction models and just used *attention* instead?
* To prove this idea, they introduced a new architecture called the *Transformer*, which was built solely with the attention mechanism, without any recurrence or convolutions.
* It worked and proved to be more efficient than the State-of-The-Art (SOTA) models at the time, using *BLEU scores* as the evaluation metric.
* Hence, attention is all you *really* need. How did I not get that since?!

> PS. Weirdly enough, I finally learnt the meaning of **SOTA,** and I’m feeling like a cool “kid”. Time to not-so-casually throw it around in conversations.

***

### Pass 2: Key Ideas & Takeaways

#### **The Old Way (Before This Paper)**

* Sequence models (like for translation) were usually built using *encoders* and *decoders* made up of RNNs (like LSTMs or GRUs), sometimes in combination with CNNs or the *attention* mechanism.
* While they worked, they had a major bottleneck: They processed data step by ste&#x70;**,** meaning one word at a time.
* This was not-so-great for modern hardware (GPUs, TPUs) designed for parallel processing. Longer sequences meant more memory, more time, and endless waiting.
* Even with *tricks*, you were stuck in a step-by-step loop.

#### **The New Way (The Transformer)**

This improved architecture meant:

* Full parallelisation during training: You can process everything at once, instead of waiting for previous steps.
* Faster training and better performance.

#### Their Results?

* The transformer beat older models on English-to-German and English-to-French translation tasks.
* They used multiple attention heads (8 in the base model), which helped capture different patterns in the data.
* Dropout helped prevent overfitting.
* They also tested a version of the model on an English parsing task, showing it could generalise beyond translation.

#### Side Note

Although training is now fully parallel, generating text (output) still happens one word at a time (sequentially). They mentioned this as a future challenge. The authors also acknowledged that it’s text-based only (no multimodal *yet,* or at least, *as at the time*).

![](https://cdn-images-1.medium.com/max/1600/1*HRAkxXY1eXLD-pii7Mt8SQ.jpeg)

Figure 1: This was my understanding after pass 2

***

### Pass 3: Breaking Down the Model Architecture

I focused on Sections 3 and 4 of the paper, which describe the components of the architecture in detail. The Transformer, like older seq2seq models, has an **encoder** and a **decoder**. Both are made of layers, and those layers have sublayers. A formula for calculating the output of a sublayer of either the encoder or decoder is:

```
Output = LayerNorm(x + Sublayer(x))
```

where:

* ***x*** is the input to the sublayer.
* ***Sublayer(x)*** is the actual computation (e.g., attention, feed-forward network).
* ***x + Sublayer(x)*** is called a **residual connection**, a fancy term for adding the input back to the output of the sublayer. It's crucial for stable training and optimisation in deep networks.
* ***LayerNorm()*** is Layer Normalisation, which is applied for stability after adding the input back.

#### Now, let’s look at the core components of the Transformer

![](https://cdn-images-1.medium.com/max/1600/1*LFw8HnqV1ddxAZ0Kv38ngw.png)

Figure 2: The Transformer architecture with its components — Vaswani et al. (2017). One encoder layer on the left, one decoder layer on the right. The Nx represents the fact that there are multiple (N=6) layers.

#### **1. Attention (Star of the show)**

Attention is essentially a way to map a query and a set of key-value pairs to an output. It helps the model “focus” or “pay attention” to a specific part of a sequence. The paper focuses on two key types:

![](https://cdn-images-1.medium.com/max/1600/1*i9kOSH57xZZ11HodlHiQTw.png)

Figure 3: Screenshot from my Notion notes

**Why the emphasis on self-attention in the paper?**

1. Faster and more parallelisable.
2. Learns long-distance relationships better.
3. Easier to visualise and interpret.

**In the paper, they also discussed two techniques to calculate attention:**

* **Scaled Dot-Product Attention:** 
  This is the core mathematical operation. It takes three matrices: **Q** (queries), **K** (keys), and **V** (values). Each row of the matrices represents a token in the sequence. The formula is as follows:

```
Attention(Q, K, V) = softmax(QKᵀ / √dₖ) · V
```

* **Multi-head Attention:**
  Instead of just one *attention* calculation, it runs multiple scaled dot-product attentions in parallel,**** called *heads*. It doesn’t just split the input; it creates *different learned projections* (like different “views” or “perspectives”) of Q, K, and V for each “head.”

  Each head focuses on different patterns in the input. Finally, the results from all these parallel heads are combined. This gives the model a much richer understanding of the relationships within the data.

![](https://cdn-images-1.medium.com/max/1600/1*xyfZvm85Psu1pm3eo_UDqQ.png)

Figure 4: Scaled Dot Product and Multi-head Attention — Vaswani et al. (2017). The “h” in multi-head attention represents the number of heads running in parallel.

#### **2. The Encoder**

This has 6 layers, and each layer is made up of 2 sublayers (see figure 2):

* **Multi-head self-attention:** This means each word looks at all the other words in the sentence, including itself, to figure out which ones matter most. This helps the model understand the full context of the input.
* **Feed-forward network (FFN):** A mini neural network applied to each word separately.

The formula `Output = LayerNorm(x + Sublayer(x))` applies to both of these sublayers with the “Sublayer(x)” function either being the multihead self-attention or the FFN.

#### 3. The Decoder

The decoder also has **6 layers**, but with 3 sublayers per layer (also see figure 2):

1. **Masked multi-head self-attention:** Just like the encoder’s, but with a small twist: *masking*. Each word can only look at itself and the ones before it, not the ones ahead. This way, the model doesn’t cheat by seeing future words when generating a sentence.
2. **Cross-attention:** This allows the decoder to look at the *output of the encoder*. This is how the input sequence (e.g., the English sentence) informs the generation of the output sequence (e.g., the German translation).
3. **Feed-forward neural network:** Again, it is an independent network applied to each position in a sequence.

The mathematical representation for one layer of the decoder would be:

```
z1 = LayerNorm(x + MultiHeadMaskedSelfAttention(x))z2 = LayerNorm(z1 + MultiHeadCrossAttention(z1, EncoderOutput))z3 = LayerNorm(z2 + FeedForward(z2))
```

With z3 being the output of the layer. As you can see, it’s still built on the general formula.

#### Other Components (Still Important!)

1. **Feed-forward networks:** Small neural networks that refine the outputs after attention.
2. **Embeddings:** Turn input words into vectors so the model can work with them. The same embedding weights are reused at the end to help predict the output words.
3. **Positional Encoding:** Adds position information to the words/tokens because transformers *process everything in parallel*, and this makes them not take note of order (unlike RNNs, which naturally know/encode order).

***

### Wrapping Up

That’s essentially the summary of the paper. It’s a dense paper, but breaking it down using the *3-pass method* made it much more manageable and, dare I say, enjoyable.

This article is by no means *exhaustive,* as you can still get into the finer details of the paper, but I hope it helps you do that a little easier.

If you’ve been putting off reading this paper or a similar one like I did, here’s your sign to try. Use the *3-pass method*, and feel free to let me know how it goes.

Until next time!

***

### References

1. Attention is all you need [https://arxiv.org/abs/1706.03762](https://arxiv.org/abs/1706.03762)
2. Research That Sticks: The Strategic Framework for Turning Technical and Academic Papers into Lasting Knowledge [https://mblessed.hashnode.dev/research-that-sticks-the-strategic-framework-for-studying-technical-papers](https://mblessed.hashnode.dev/research-that-sticks-the-strategic-framework-for-studying-technical-papers)

<img src="https://cdn-images-1.medium.com/max/1600/1*kL3ilZSFElPb20j9mEO-SQ.jpeg" alt="">
Photo by <a href="https://unsplash.com/@googledeepmind?utm_content=creditCopyText&#x26;utm_medium=referral&#x26;utm_source=unsplash">Google DeepMind</a> on <a href="https://unsplash.com/photos/a-close-up-of-a-green-object-on-a-white-surface-SrLwQZP0_Ec?utm_content=creditCopyText&#x26;utm_medium=referral&#x26;utm_source=unsplash">Unsplash</a>
It’s been almost 2 years since I first encountered the <a href="https://arxiv.org/abs/1706.03762">“Attention is all you need”</a> paper by Vaswani et al. (2017). I’ve mentioned it confidently in a few conversations, but I only just came to understand it enough this month.
<blockquote>
We listen, we don’t judge.
</blockquote>
In all fairness to me, I only started taking my NLP journey seriously late last year, and I’ve had to wade through information overload, hype and a lot of foundational stuff just to get to a point where papers like this finally make proper sense. I even wrote about <a href="https://medium.com/ai-in-plain-english/word2vec-my-rookie-thoughts-on-the-landmark-nlp-paper-5536967a93e2">Word2Vec in my last article</a>; you can check it out.
Before this latest attempt, I had tried several times to read the paper, but it never fully clicked. This time around, I used the <a href="https://mblessed.hashnode.dev/research-that-sticks-the-strategic-framework-for-studying-technical-papers">3-pass technique I saw on Madukoma Blessed’s blog</a>, and I finally got the core message and technical parts.
If you’ve also been putting off reading “scary papers,” maybe this method might help you. Walk with me.
<hr>
<h3 id="the-strategy">The strategy</h3>
The 3-pass method is pretty straightforward.
<ul>
<li>First, you skim and note the overall idea;</li>
<li>Then, you dig a bit deeper for key ideas;</li>
<li>Finally, you go all in on the technical details.</li>
</ul>
It helps to ease into tough papers without burning out. And that’s exactly what I did. As you read further, I’ll detail my learnings in bullet points under each pass.
<hr>
<h3 id="some-information">Some information…</h3>
To help you understand the notes in the rest of the article, you need to be familiar with a few things, like RNNs, CNNs and Sequence transduction models (like Seq2Seq). You don’t have to cram the math. Just get the general idea.
<ul>
<li>RNNs (Recurrent Neural Networks):
They process data step by step, passing information from one step to the next. Think of them like reading a sentence one word at a time, remembering what came before. They’re great at handling sequences, but they can be slow and struggle with long sequences.</li>
<li>CNNs (Convolutional Neural Networks):
Originally built for images, but sometimes used for text too. They focus on learning local patterns. For example, detecting small chunks or phrases in text. They’re faster than RNNs in some cases, but still have limits with longer dependencies.</li>
<li>Sequence transduction models (like Seq2Seq models):
These models take in a sequence and produce another sequence. Classic examples? Translation and summarisation. You give it a sentence, and it outputs a new sentence in another language or a shorter version.</li>
</ul>
If these still feel confusing, it might be helpful to pause and brush up a little more on NLP basics first. And that’s perfectly okay. Been there, done that. 2 years hello?!
<blockquote>
Maybe still a little there to be honest.
</blockquote>
<hr>
<h3 id="pass-1-skimming-and-wait-thatswhy">Pass 1: Skimming and “Wait, that’s why?!”</h3>
<ul>
<li>The whole point of the paper is this: What if we stopped using complicated stuff like RNNs and CNNs to build sequence transduction models and just used attention instead?</li>
<li>To prove this idea, they introduced a new architecture called the Transformer, which was built solely with the attention mechanism, without any recurrence or convolutions.</li>
<li>It worked and proved to be more efficient than the State-of-The-Art (SOTA) models at the time, using BLEU scores as the evaluation metric.</li>
<li>Hence, attention is all you really need. How did I not get that since?!</li>
</ul>
<blockquote>
PS. Weirdly enough, I finally learnt the meaning of SOTA, and I’m feeling like a cool “kid”. Time to not-so-casually throw it around in conversations.
</blockquote>
<hr>
<h3 id="pass-2-key-ideas--takeaways">Pass 2: Key Ideas &#x26; Takeaways</h3>
<h4 id="the-old-way-before-thispaper">The Old Way (Before This Paper)</h4>
<ul>
<li>Sequence models (like for translation) were usually built using encoders and decoders made up of RNNs (like LSTMs or GRUs), sometimes in combination with CNNs or the attention mechanism.</li>
<li>While they worked, they had a major bottleneck: They processed data step by step, meaning one word at a time.</li>
<li>This was not-so-great for modern hardware (GPUs, TPUs) designed for parallel processing. Longer sequences meant more memory, more time, and endless waiting.</li>
<li>Even with tricks, you were stuck in a step-by-step loop.</li>
</ul>
<h4 id="the-new-way-the-transformer">The New Way (The Transformer)</h4>
This improved architecture meant:
<ul>
<li>Full parallelisation during training: You can process everything at once, instead of waiting for previous steps.</li>
<li>Faster training and better performance.</li>
</ul>
<h4 id="their-results">Their Results?</h4>
<ul>
<li>The transformer beat older models on English-to-German and English-to-French translation tasks.</li>
<li>They used multiple attention heads (8 in the base model), which helped capture different patterns in the data.</li>
<li>Dropout helped prevent overfitting.</li>
<li>They also tested a version of the model on an English parsing task, showing it could generalise beyond translation.</li>
</ul>
<h4 id="side-note">Side Note</h4>
Although training is now fully parallel, generating text (output) still happens one word at a time (sequentially). They mentioned this as a future challenge. The authors also acknowledged that it’s text-based only (no multimodal yet, or at least, as at the time).
<img src="https://cdn-images-1.medium.com/max/1600/1*HRAkxXY1eXLD-pii7Mt8SQ.jpeg" alt="">
Figure 1: This was my understanding after pass 2
<hr>
<h3 id="pass-3-breaking-down-the-model-architecture">Pass 3: Breaking Down the Model Architecture</h3>
I focused on Sections 3 and 4 of the paper, which describe the components of the architecture in detail. The Transformer, like older seq2seq models, has an encoder and a decoder. Both are made of layers, and those layers have sublayers. A formula for calculating the output of a sublayer of either the encoder or decoder is:
<pre><code class="code-highlight">Output = LayerNorm(x + Sublayer(x))
</code></pre>
where:
<ul>
<li>x is the input to the sublayer.</li>
<li>Sublayer(x) is the actual computation (e.g., attention, feed-forward network).</li>
<li>x + Sublayer(x) is called a residual connection, a fancy term for adding the input back to the output of the sublayer. It's crucial for stable training and optimisation in deep networks.</li>
<li>LayerNorm() is Layer Normalisation, which is applied for stability after adding the input back.</li>
</ul>
<h4 id="now-lets-look-at-the-core-components-of-the-transformer">Now, let’s look at the core components of the Transformer</h4>
<img src="https://cdn-images-1.medium.com/max/1600/1*LFw8HnqV1ddxAZ0Kv38ngw.png" alt="">
Figure 2: The Transformer architecture with its components — Vaswani et al. (2017). One encoder layer on the left, one decoder layer on the right. The Nx represents the fact that there are multiple (N=6) layers.
<h4 id="1-attention-star-of-theshow">1. Attention (Star of the show)</h4>
Attention is essentially a way to map a query and a set of key-value pairs to an output. It helps the model “focus” or “pay attention” to a specific part of a sequence. The paper focuses on two key types:
<img src="https://cdn-images-1.medium.com/max/1600/1*i9kOSH57xZZ11HodlHiQTw.png" alt="">
Figure 3: Screenshot from my Notion notes
Why the emphasis on self-attention in the paper?
<ol>
<li>Faster and more parallelisable.</li>
<li>Learns long-distance relationships better.</li>
<li>Easier to visualise and interpret.</li>
</ol>
In the paper, they also discussed two techniques to calculate attention:
<ul>
<li>Scaled Dot-Product Attention: 
This is the core mathematical operation. It takes three matrices: Q (queries), K (keys), and V (values). Each row of the matrices represents a token in the sequence. The formula is as follows:</li>
</ul>
<pre><code class="code-highlight">Attention(Q, K, V) = softmax(QKᵀ / √dₖ) · V
</code></pre>
<ul>
<li>
Multi-head Attention:
Instead of just one attention calculation, it runs multiple scaled dot-product attentions in parallel,**** called heads. It doesn’t just split the input; it creates different learned projections (like different “views” or “perspectives”) of Q, K, and V for each “head.”
Each head focuses on different patterns in the input. Finally, the results from all these parallel heads are combined. This gives the model a much richer understanding of the relationships within the data.
</li>
</ul>
<img src="https://cdn-images-1.medium.com/max/1600/1*xyfZvm85Psu1pm3eo_UDqQ.png" alt="">
Figure 4: Scaled Dot Product and Multi-head Attention — Vaswani et al. (2017). The “h” in multi-head attention represents the number of heads running in parallel.
<h4 id="2-theencoder">2. The Encoder</h4>
This has 6 layers, and each layer is made up of 2 sublayers (see figure 2):
<ul>
<li>Multi-head self-attention: This means each word looks at all the other words in the sentence, including itself, to figure out which ones matter most. This helps the model understand the full context of the input.</li>
<li>Feed-forward network (FFN): A mini neural network applied to each word separately.</li>
</ul>
The formula <code>Output = LayerNorm(x + Sublayer(x))</code> applies to both of these sublayers with the “Sublayer(x)” function either being the multihead self-attention or the FFN.
<h4 id="3-thedecoder">3. The Decoder</h4>
The decoder also has 6 layers, but with 3 sublayers per layer (also see figure 2):
<ol>
<li>Masked multi-head self-attention: Just like the encoder’s, but with a small twist: masking. Each word can only look at itself and the ones before it, not the ones ahead. This way, the model doesn’t cheat by seeing future words when generating a sentence.</li>
<li>Cross-attention: This allows the decoder to look at the output of the encoder. This is how the input sequence (e.g., the English sentence) informs the generation of the output sequence (e.g., the German translation).</li>
<li>Feed-forward neural network: Again, it is an independent network applied to each position in a sequence.</li>
</ol>
The mathematical representation for one layer of the decoder would be:
<pre><code class="code-highlight">z1 = LayerNorm(x + MultiHeadMaskedSelfAttention(x))z2 = LayerNorm(z1 + MultiHeadCrossAttention(z1, EncoderOutput))z3 = LayerNorm(z2 + FeedForward(z2))
</code></pre>
With z3 being the output of the layer. As you can see, it’s still built on the general formula.
<h4 id="other-components-still-important">Other Components (Still Important!)</h4>
<ol>
<li>Feed-forward networks: Small neural networks that refine the outputs after attention.</li>
<li>Embeddings: Turn input words into vectors so the model can work with them. The same embedding weights are reused at the end to help predict the output words.</li>
<li>Positional Encoding: Adds position information to the words/tokens because transformers process everything in parallel, and this makes them not take note of order (unlike RNNs, which naturally know/encode order).</li>
</ol>
<hr>
<h3 id="wrapping-up">Wrapping Up</h3>
That’s essentially the summary of the paper. It’s a dense paper, but breaking it down using the 3-pass method made it much more manageable and, dare I say, enjoyable.
This article is by no means exhaustive, as you can still get into the finer details of the paper, but I hope it helps you do that a little easier.
If you’ve been putting off reading this paper or a similar one like I did, here’s your sign to try. Use the 3-pass method, and feel free to let me know how it goes.
Until next time!
<hr>
<h3 id="references">References</h3>
<ol>
<li>Attention is all you need <a href="https://arxiv.org/abs/1706.03762">https://arxiv.org/abs/1706.03762</a></li>
<li>Research That Sticks: The Strategic Framework for Turning Technical and Academic Papers into Lasting Knowledge <a href="https://mblessed.hashnode.dev/research-that-sticks-the-strategic-framework-for-studying-technical-papers">https://mblessed.hashnode.dev/research-that-sticks-the-strategic-framework-for-studying-technical-papers</a></li>
</ol>

I Finally Understood “Attention is All You Need” After So Long. Here’s How I Did It.

![](https://cdn-images-1.medium.com/max/1600/1*VoztV7vzJR5dobsx3f6ROQ.png)

Generated by the author with AI.

ShadCN looked great on paper, Cursor seemed smart enough, and I thought I could skip the boring frontend parts. just tell it what to build and let it do the rest.

Wrong.

Instead of a clean UI, I ended up with messy layouts, clashing styles, and components that just didn’t work together.

I almost gave up on building beautiful interfaces, until I discovered a new workflow powered by something called the [**ShadCN UI MCP server**](https://github.com/Jpisnice/shadcn-ui-mcp-server).

[**GitHub - Jpisnice/shadcn-ui-mcp-server: A mcp server to allow LLMS gain context about shadcn ui…**
*A mcp server to allow LLMS gain context about shadcn ui component structure,usage and installation …*&#x67;ithub.com](https://github.com/Jpisnice/shadcn-ui-mcp-server "https://github.com/Jpisnice/shadcn-ui-mcp-server")

And it completely changed everything.

***

### Why Most AI + UI Workflows Fail (And What Nobody Tells You)

Let’s get real: tools like Cursor and Claude Code are impressive, but when it comes to UI, they **lack one critical thing, context**.

They don’t understand how ShadCN components are *meant* to be used. So unless you guide them with a tight process, they’ll spit out half-baked UIs that barely hold together.

That’s what was happening to me over and over. Until I implemented a three-part system:

1. **Use the ShadCN UI MCP server** for context and structure
2. **Leverage demo patterns** for foolproof component usage
3. **Customize with TweakCN** for unique, beautiful design

Let’s walk through it step by step.

***

### Step 1: Set Up the MCP Server

The `shadcn-ui-mcp-server` fixes one of the biggest issues with AI-generated UIs: they often look off because they lack real context. This tool brings that missing context back, so your components actually work and look the way they’re supposed to.

Once it’s connected, you’re ready to build UIs that actually work the first time.

### Installation Tips:

* Use your [**GitHub personal access token**](https://github.com/settings/tokens) to bump up your request limit (5,000/hr vs. 60/hr)
* Don’t forget to **save your token,** you won’t see it again

![](https://cdn-images-1.medium.com/max/1600/1*zPOYQl5CSIzkfVhh6inXmw.png)

[GitHub Access Token](https://github.com/settings/tokens)

* Install `shadcn-ui-mcp-server`using npx (Recommended) the fastest way to get started.

```
# Basic usage (rate limited to 60 requests/hour)npx @jpisnice/shadcn-ui-mcp-server# With GitHub token for better rate limits (5000 requests/hour)npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_your_token_here
```

* Plug it into Cursor via settings (Cmd/Ctrl + Shift + j) → tools & integrations → New MCP Server
* Add MCP Server Configuration:

```
{  "mcpServers": {    "shadcn-ui": {      "command": "npx",      "args": ["@jpisnice/shadcn-ui-mcp-server", "--github-api-key", "ghp_your_token_here"]    }  }}
```

Once installed, you unlock these tools:

![](https://cdn-images-1.medium.com/max/1600/1*WdS5sMY1vSN8LyRb9kGbgw.png)

* `get_component:` Get component source code
* `get_component_demo:`Get component usage examples
* `list_components:` List all available components
* `get_component_metadata:` Get component dependencies and info
* `get_block:` Get block implementations (dashboard-01, calendar-01, etc...)
* `list_blocks:` List all available blocks with categories

***

The real secret? I wrote **rule files** that tell my AI agent *how* to behave when working with ShadCN.

```
I want to build a modern web interface using ShadCN components.
```

Goal:- A login page with standard email/password authentication.- After login, a dashboard displays a grid of cards — each representing an MCP server.- Clicking a card opens a detailed view with:  - A header image  - Metadata (name, status, region, version)  - Installation steps shown as bubble cards or collapsible UI

````
Please generate an implementation plan:- List the key components and pages to build- Suggest how to structure the project modularly- Recommend the tools/hooks/layout strategies to use for optimal UX
```

![](https://cdn-images-1.medium.com/max/1600/1*LlOwNe3jNVKbUFyJrJaMpw.png)

Claude generate implementation plan

After brainstorming you can create your rule file for cursor [`rule.mdc`](https://rule.mdc)

![](https://cdn-images-1.medium.com/max/1600/1*n-z3TGoHXCCuJrd0Aevhow.png)

[rule.md](https://rule.md) file

So here’s what I did next:

![](https://cdn-images-1.medium.com/max/1600/1*duvcxSnmjrDNefYM9KC6JQ.png)

I asked Claude to **take the entire structure and drop it into a** [**`task.md`**](https://task.md) **file**.

Then, I triggered the next phase with this simple instruction inside my Cursor project:

```
@rule.mdcPlease implement the UI plan outlined @task.md for our next.js app.  You can begin building directly from the defined structure.
```

![](https://cdn-images-1.medium.com/max/1600/1*dnnt3MpqJ2gnKpA-8PYkPQ.png)

And that’s when the magic happened.

Because the rule file had already been set up to pull in ShadCN components through the MCP server, Cursor followed the entire logic tree:

1. Parsed the structure from [`task.md`](https://task.md)
2. Identified each ShadCN component needed
3. Called the `get_component_demo` tool to check correct usage
4. Began assembling the full UI **block by block**

It literally turned a spec sheet into a living frontend without me lifting a finger.

This UI wasn’t cobbled together. It followed every rule and planning artifact we built into the system.

The result? A frontend that was not only fast to build but structurally sound and easy to extend.

![](https://cdn-images-1.medium.com/max/1200/1*UdFDsZqkauFK4q4HSteiAw.png)

![](https://cdn-images-1.medium.com/max/800/1*b7NYFK5gSujfF-tLkyuI2g.png)

![](https://cdn-images-1.medium.com/max/800/1*9NqvJiMDSJY7CxQFofR34Q.png)

![](https://cdn-images-1.medium.com/max/800/1*4aQlbl_vqwt-7eyK2Ejv1w.png)

![](https://cdn-images-1.medium.com/max/800/1*DVoq7hkryTLh8Mv8x8te6w.png)

![](https://cdn-images-1.medium.com/max/800/1*4LEuf0cVgzW1aD-MmDm91A.png)

***

### Step 3: Customize Everything with TweakCN

Let’s be honest, a lot of ShadCN sites look the same.

[**Beautiful themes for shadcn/ui - tweakcn | Theme Editor & Generator**
*Customize theme for shadcn/ui with tweakcn's interactive editor. Supports Tailwind CSS v4, Shadcn UI, and custom…*&#x74;weakcn.com](https://tweakcn.com/ "https://tweakcn.com/")

To break out of that cookie-cutter mold, I used **TweakCN**. It’s a visual theming tool for ShadCN components that lets you create a **custom UI look** in seconds.

You can:

* Change colors, spacings, borders, typography
* Preview every tweak live
* Export a theme and install it directly into your project

![](https://cdn-images-1.medium.com/max/1600/1*zPquCy07j4bo0kx2wbcacg.png)

[TweakCN](https://tweakcn.com/editor/theme)

If Cursor struggles to install it directly, just copy the custom code and paste it manually. Every variable you need is clearly listed.

***

### Real Talk: Why This Workflow Works (and Why You Should Try It)

Here’s what used to happen:

* I’d ask AI to build a UI → It’d mess up component usage
* I’d waste hours fixing CSS or rewriting layouts
* My site looked like a ShadCN clone factory

Now?

* I plan every UI with structured files
* I implement with context-rich tools
* I design with a visual editor
* And I rarely debug UI anymore

The result? My sites **look custom, feel professional**, and work across devices, the first time.

***

### TL;DR: Your ShadCN Setup Checklist:

* Install the MCP server and connect it to Cursor
* Add your GitHub access token for max performance
* Create rule files to guide AI behavior
* Use demo tools to prevent implementation errors
* Design with TweakCN for a unique, polished look

***

### Final Thoughts:

We’re entering an era where **context-driven AI workflows** are the only way to build fast and at scale. You wouldn’t write backend logic without testing and structure, so why treat your UI like it doesn’t matter?

Start with the MCP server. Design with intent. Let the AI assist you *with guardrails.*

Your users will notice. Your projects will look legit. And you’ll finally feel like your UI matches the quality of your code.

### A message from our Founder

**Hey,** [**Sunil**](https://linkedin.com/in/sunilsandhu) **here.** I wanted to take a moment to thank you for reading until the end and for being a part of this community.

Did you know that our team run these publications as a volunteer effort to over 3.5m monthly readers? **We don’t receive any funding, we do this to support the community. ❤️**

If you want to show some love, please take a moment to **follow me on** [**LinkedIn**](https://linkedin.com/in/sunilsandhu)**,** [**TikTok**](https://tiktok.com/@messyfounder), [**Instagram**](https://instagram.com/sunilsandhu). You can also subscribe to our [**weekly newsletter**](https://newsletter.plainenglish.io/).

And before you go, don’t forget to **clap** and **follow** the writer️!
````

<img src="https://cdn-images-1.medium.com/max/1600/1*VoztV7vzJR5dobsx3f6ROQ.png" alt="">
Generated by the author with AI.
ShadCN looked great on paper, Cursor seemed smart enough, and I thought I could skip the boring frontend parts. just tell it what to build and let it do the rest.
Wrong.
Instead of a clean UI, I ended up with messy layouts, clashing styles, and components that just didn’t work together.
I almost gave up on building beautiful interfaces, until I discovered a new workflow powered by something called the <a href="https://github.com/Jpisnice/shadcn-ui-mcp-server">ShadCN UI MCP server</a>.
<a href="https://github.com/Jpisnice/shadcn-ui-mcp-server" title="https://github.com/Jpisnice/shadcn-ui-mcp-server">GitHub - Jpisnice/shadcn-ui-mcp-server: A mcp server to allow LLMS gain context about shadcn ui…
A mcp server to allow LLMS gain context about shadcn ui component structure,usage and installation …github.com</a>
And it completely changed everything.
<hr>
<h3 id="why-most-ai--ui-workflows-fail-and-what-nobody-tellsyou">Why Most AI + UI Workflows Fail (And What Nobody Tells You)</h3>
Let’s get real: tools like Cursor and Claude Code are impressive, but when it comes to UI, they lack one critical thing, context.
They don’t understand how ShadCN components are meant to be used. So unless you guide them with a tight process, they’ll spit out half-baked UIs that barely hold together.
That’s what was happening to me over and over. Until I implemented a three-part system:
<ol>
<li>Use the ShadCN UI MCP server for context and structure</li>
<li>Leverage demo patterns for foolproof component usage</li>
<li>Customize with TweakCN for unique, beautiful design</li>
</ol>
Let’s walk through it step by step.
<hr>
<h3 id="step-1-set-up-the-mcpserver">Step 1: Set Up the MCP Server</h3>
The <code>shadcn-ui-mcp-server</code> fixes one of the biggest issues with AI-generated UIs: they often look off because they lack real context. This tool brings that missing context back, so your components actually work and look the way they’re supposed to.
Once it’s connected, you’re ready to build UIs that actually work the first time.
<h3 id="installation-tips">Installation Tips:</h3>
<ul>
<li>Use your <a href="https://github.com/settings/tokens">GitHub personal access token</a> to bump up your request limit (5,000/hr vs. 60/hr)</li>
<li>Don’t forget to save your token, you won’t see it again</li>
</ul>
<img src="https://cdn-images-1.medium.com/max/1600/1*zPOYQl5CSIzkfVhh6inXmw.png" alt="">
<a href="https://github.com/settings/tokens">GitHub Access Token</a>
<ul>
<li>Install <code>shadcn-ui-mcp-server</code>using npx (Recommended) the fastest way to get started.</li>
</ul>
<pre><code class="code-highlight"># Basic usage (rate limited to 60 requests/hour)npx @jpisnice/shadcn-ui-mcp-server# With GitHub token for better rate limits (5000 requests/hour)npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_your_token_here
</code></pre>
<ul>
<li>Plug it into Cursor via settings (Cmd/Ctrl + Shift + j) → tools &#x26; integrations → New MCP Server</li>
<li>Add MCP Server Configuration:</li>
</ul>
<pre><code class="code-highlight">{ "mcpServers": { "shadcn-ui": { "command": "npx", "args": ["@jpisnice/shadcn-ui-mcp-server", "--github-api-key", "ghp_your_token_here"] } }}
</code></pre>
Once installed, you unlock these tools:
<img src="https://cdn-images-1.medium.com/max/1600/1*WdS5sMY1vSN8LyRb9kGbgw.png" alt="">
<ul>
<li><code>get_component:</code> Get component source code</li>
<li><code>get_component_demo:</code>Get component usage examples</li>
<li><code>list_components:</code> List all available components</li>
<li><code>get_component_metadata:</code> Get component dependencies and info</li>
<li><code>get_block:</code> Get block implementations (dashboard-01, calendar-01, etc...)</li>
<li><code>list_blocks:</code> List all available blocks with categories</li>
</ul>
<hr>
The real secret? I wrote rule files that tell my AI agent how to behave when working with ShadCN.
<pre><code class="code-highlight">I want to build a modern web interface using ShadCN components.
</code></pre>
Goal:- A login page with standard email/password authentication.- After login, a dashboard displays a grid of cards — each representing an MCP server.- Clicking a card opens a detailed view with: - A header image - Metadata (name, status, region, version) - Installation steps shown as bubble cards or collapsible UI
<pre><code class="code-highlight">Please generate an implementation plan:- List the key components and pages to build- Suggest how to structure the project modularly- Recommend the tools/hooks/layout strategies to use for optimal UX
```

![](https://cdn-images-1.medium.com/max/1600/1*LlOwNe3jNVKbUFyJrJaMpw.png)

Claude generate implementation plan

After brainstorming you can create your rule file for cursor [`rule.mdc`](https://rule.mdc)

![](https://cdn-images-1.medium.com/max/1600/1*n-z3TGoHXCCuJrd0Aevhow.png)

[rule.md](https://rule.md) file

So here’s what I did next:

![](https://cdn-images-1.medium.com/max/1600/1*duvcxSnmjrDNefYM9KC6JQ.png)

I asked Claude to **take the entire structure and drop it into a** [**`task.md`**](https://task.md) **file**.

Then, I triggered the next phase with this simple instruction inside my Cursor project:

```
@rule.mdcPlease implement the UI plan outlined @task.md for our next.js app. You can begin building directly from the defined structure.
```

![](https://cdn-images-1.medium.com/max/1600/1*dnnt3MpqJ2gnKpA-8PYkPQ.png)

And that’s when the magic happened.

Because the rule file had already been set up to pull in ShadCN components through the MCP server, Cursor followed the entire logic tree:

1. Parsed the structure from [`task.md`](https://task.md)
2. Identified each ShadCN component needed
3. Called the `get_component_demo` tool to check correct usage
4. Began assembling the full UI **block by block**

It literally turned a spec sheet into a living frontend without me lifting a finger.

This UI wasn’t cobbled together. It followed every rule and planning artifact we built into the system.

The result? A frontend that was not only fast to build but structurally sound and easy to extend.

![](https://cdn-images-1.medium.com/max/1200/1*UdFDsZqkauFK4q4HSteiAw.png)

![](https://cdn-images-1.medium.com/max/800/1*b7NYFK5gSujfF-tLkyuI2g.png)

![](https://cdn-images-1.medium.com/max/800/1*9NqvJiMDSJY7CxQFofR34Q.png)

![](https://cdn-images-1.medium.com/max/800/1*4aQlbl_vqwt-7eyK2Ejv1w.png)

![](https://cdn-images-1.medium.com/max/800/1*DVoq7hkryTLh8Mv8x8te6w.png)

![](https://cdn-images-1.medium.com/max/800/1*4LEuf0cVgzW1aD-MmDm91A.png)

***

### Step 3: Customize Everything with TweakCN

Let’s be honest, a lot of ShadCN sites look the same.

[**Beautiful themes for shadcn/ui - tweakcn | Theme Editor &#x26; Generator**
*Customize theme for shadcn/ui with tweakcn's interactive editor. Supports Tailwind CSS v4, Shadcn UI, and custom…*&#x26;#x74;weakcn.com](https://tweakcn.com/ "https://tweakcn.com/")

To break out of that cookie-cutter mold, I used **TweakCN**. It’s a visual theming tool for ShadCN components that lets you create a **custom UI look** in seconds.

You can:

* Change colors, spacings, borders, typography
* Preview every tweak live
* Export a theme and install it directly into your project

![](https://cdn-images-1.medium.com/max/1600/1*zPquCy07j4bo0kx2wbcacg.png)

[TweakCN](https://tweakcn.com/editor/theme)

If Cursor struggles to install it directly, just copy the custom code and paste it manually. Every variable you need is clearly listed.

***

### Real Talk: Why This Workflow Works (and Why You Should Try It)

Here’s what used to happen:

* I’d ask AI to build a UI → It’d mess up component usage
* I’d waste hours fixing CSS or rewriting layouts
* My site looked like a ShadCN clone factory

Now?

* I plan every UI with structured files
* I implement with context-rich tools
* I design with a visual editor
* And I rarely debug UI anymore

The result? My sites **look custom, feel professional**, and work across devices, the first time.

***

### TL;DR: Your ShadCN Setup Checklist:

* Install the MCP server and connect it to Cursor
* Add your GitHub access token for max performance
* Create rule files to guide AI behavior
* Use demo tools to prevent implementation errors
* Design with TweakCN for a unique, polished look

***

### Final Thoughts:

We’re entering an era where **context-driven AI workflows** are the only way to build fast and at scale. You wouldn’t write backend logic without testing and structure, so why treat your UI like it doesn’t matter?

Start with the MCP server. Design with intent. Let the AI assist you *with guardrails.*

Your users will notice. Your projects will look legit. And you’ll finally feel like your UI matches the quality of your code.

### A message from our Founder

**Hey,** [**Sunil**](https://linkedin.com/in/sunilsandhu) **here.** I wanted to take a moment to thank you for reading until the end and for being a part of this community.

Did you know that our team run these publications as a volunteer effort to over 3.5m monthly readers? **We don’t receive any funding, we do this to support the community. ❤️**

If you want to show some love, please take a moment to **follow me on** [**LinkedIn**](https://linkedin.com/in/sunilsandhu)**,** [**TikTok**](https://tiktok.com/@messyfounder), [**Instagram**](https://instagram.com/sunilsandhu). You can also subscribe to our [**weekly newsletter**](https://newsletter.plainenglish.io/).

And before you go, don’t forget to **clap** and **follow** the writer️!
</code></pre>

I Stopped Writing UI Code. Now I Let MCP Servers Build My Interfaces with ShadCN

![](https://cdn-images-1.medium.com/max/1600/1*d2N6_gZM39tZ6FYTVM0_5Q.jpeg)

[https://unsplash.com/photos/DZe1jK6pk5c](https://unsplash.com/photos/DZe1jK6pk5c)

#### Introduction

[S3 Deployment](https://docs.aws.amazon.com/cdk/api/latest/docs/aws-s3-deployment-readme.html) is a [CDK module](https://docs.aws.amazon.com/cdk/api/latest/docs/aws-s3-deployment-readme.html) from AWS (currently “experimental” during June 2021 at the time of writing)that allows populating an S3 bucket with the contents of .zip files from other S3 buckets or from a local disk.

***

#### TLDR

* You should use S3-Deployment only if you need to upload under 100 files
* **Never use S3-Deployment if you need to upload more 100 files/pages,** this will be most of the time the usual case for people.

***

#### Quick Example to see the main issue

This is what happens under the hood:

1. When this stack is deployed (either via `cdk deploy` or via CI/CD), the contents of the local `website-dist` directory will be archived and uploaded to an **intermediary assets bucket**. This will be the main issue if you have websites with hundreds of pages.
2. The `BucketDeployment` construct synthesizes a custom CloudFormation resource of type `Custom::CDKBucketDeployment` into the template. The source bucket/key is set to point to the assets bucket.
3. The custom resource downloads the .zip archive, extracts it and issues `aws s3 sync --delete` against the destination bucket (in this case `websiteBucket`).

***

#### The problem

The problem we get is that the intermediary bucket is not really needed and is mostly limited to copying the files 2 times!

If you have 5 files you won’t see the problem but with websites of hundreds or thousands of pages you will be stuck in a long deployment that will also be closed automatically after 15 minutes and that will do upload basically twice!

This is due to the fact that this CDK module under the hood uses a Lambda to move the files from the intermediary bucket to the destination bucket.

***

#### Alternatives or solutions?

1. **The Best solution ever:** just use the most simple command to upload files to S3 called “aws s3 cp” like this:

```
aws s3 cp DIRECTORY_OR_FILE s3://BUCKET_NAME — recursive — quiet
```

2\. **Second best choice:** use a Github action to upload again the files without remembering the previous S3 command: [https://github.com/shallwefootball/upload-s3-action](https://github.com/shallwefootball/upload-s3-action)

```
name: Upload to S3on: [pull_request]jobs:  upload:    runs-on: ubuntu-latest    steps:      - uses: actions/checkout@master      - uses: shallwefootball/s3-upload-action@master        with:          aws_key_id: ${{ secrets.AWS_KEY_ID }}          aws_secret_access_key: ${{ secrets.AWS_SECRET_ACCESS_KEY}}          aws_bucket: BUCKET_NAME          source_dir: 'DIRECTORY_OR_FILE'
```

3\. not suggested solution: increasing the memory of the Lambda with the memoryLimit parameter, from the default 128 to 1024, this might help but won’t make a difference with more than 200 files.

***

> ***💡*****Also learn how to efficiently store one million small objects to S3 with AWS Athena integration:**

[**How to write one million small objects to S3**
*Learn how to efficiently store one million small objects to S3 for your stock analytics app with AWS Athena…*&#x64;iffer.blog](https://differ.blog/p/how-to-write-one-million-small-objects-to-s3-c69e8c "https://differ.blog/p/how-to-write-one-million-small-objects-to-s3-c69e8c")

> *👉* To read more such articles, [**sign up for free on Differ**](https://differ.blog/).

***

#### Resources

* [docs.aws.amazon.com/cdk/api/latest/docs/aws-s3-deployment-readme.html](https://docs.aws.amazon.com/cdk/api/latest/docs/aws-s3-deployment-readme.html)
* [gist.github.com/riccardogiorato/428d015dee054d3cb9b06941851ab018](https://gist.github.com/riccardogiorato/428d015dee054d3cb9b06941851ab018)
* [docs.aws.amazon.com/cli/latest/reference/s3/cp.html](https://docs.aws.amazon.com/cli/latest/reference/s3/cp.html)
* [github.com/shallwefootball/upload-s3-action](https://github.com/shallwefootball/upload-s3-action)

#### If you want to help me out you can:

* **Join Medium Membership and get my future Articles:** [https://riccardogiorato.medium.com/membership](https://riccardogiorato.medium.com/membership)
* **Follow me on Twitter suggesting other Topics to cover:** [https://twitter.com/riccardogiorato](https://twitter.com/riccardogiorato)

<img src="https://cdn-images-1.medium.com/max/1600/1*d2N6_gZM39tZ6FYTVM0_5Q.jpeg" alt="">
<a href="https://unsplash.com/photos/DZe1jK6pk5c">https://unsplash.com/photos/DZe1jK6pk5c</a>
<h4 id="introduction">Introduction</h4>
<a href="https://docs.aws.amazon.com/cdk/api/latest/docs/aws-s3-deployment-readme.html">S3 Deployment</a> is a <a href="https://docs.aws.amazon.com/cdk/api/latest/docs/aws-s3-deployment-readme.html">CDK module</a> from AWS (currently “experimental” during June 2021 at the time of writing)that allows populating an S3 bucket with the contents of .zip files from other S3 buckets or from a local disk.
<hr>
<h4 id="tldr">TLDR</h4>
<ul>
<li>You should use S3-Deployment only if you need to upload under 100 files</li>
<li>Never use S3-Deployment if you need to upload more 100 files/pages, this will be most of the time the usual case for people.</li>
</ul>
<hr>
<h4 id="quick-example-to-see-the-mainissue">Quick Example to see the main issue</h4>
This is what happens under the hood:
<ol>
<li>When this stack is deployed (either via <code>cdk deploy</code> or via CI/CD), the contents of the local <code>website-dist</code> directory will be archived and uploaded to an intermediary assets bucket. This will be the main issue if you have websites with hundreds of pages.</li>
<li>The <code>BucketDeployment</code> construct synthesizes a custom CloudFormation resource of type <code>Custom::CDKBucketDeployment</code> into the template. The source bucket/key is set to point to the assets bucket.</li>
<li>The custom resource downloads the .zip archive, extracts it and issues <code>aws s3 sync --delete</code> against the destination bucket (in this case <code>websiteBucket</code>).</li>
</ol>
<hr>
<h4 id="the-problem">The problem</h4>
The problem we get is that the intermediary bucket is not really needed and is mostly limited to copying the files 2 times!
If you have 5 files you won’t see the problem but with websites of hundreds or thousands of pages you will be stuck in a long deployment that will also be closed automatically after 15 minutes and that will do upload basically twice!
This is due to the fact that this CDK module under the hood uses a Lambda to move the files from the intermediary bucket to the destination bucket.
<hr>
<h4 id="alternatives-or-solutions">Alternatives or solutions?</h4>
<ol>
<li>The Best solution ever: just use the most simple command to upload files to S3 called “aws s3 cp” like this:</li>
</ol>
<pre><code class="code-highlight">aws s3 cp DIRECTORY_OR_FILE s3://BUCKET_NAME — recursive — quiet
</code></pre>
2. Second best choice: use a Github action to upload again the files without remembering the previous S3 command: <a href="https://github.com/shallwefootball/upload-s3-action">https://github.com/shallwefootball/upload-s3-action</a>
<pre><code class="code-highlight">name: Upload to S3on: [pull_request]jobs: upload: runs-on: ubuntu-latest steps: - uses: actions/checkout@master - uses: shallwefootball/s3-upload-action@master with: aws_key_id: ${{ secrets.AWS_KEY_ID }} aws_secret_access_key: ${{ secrets.AWS_SECRET_ACCESS_KEY}} aws_bucket: BUCKET_NAME source_dir: 'DIRECTORY_OR_FILE'
</code></pre>
3. not suggested solution: increasing the memory of the Lambda with the memoryLimit parameter, from the default 128 to 1024, this might help but won’t make a difference with more than 200 files.
<hr>
<blockquote>
💡Also learn how to efficiently store one million small objects to S3 with AWS Athena integration:
</blockquote>
<a href="https://differ.blog/p/how-to-write-one-million-small-objects-to-s3-c69e8c" title="https://differ.blog/p/how-to-write-one-million-small-objects-to-s3-c69e8c">How to write one million small objects to S3
Learn how to efficiently store one million small objects to S3 for your stock analytics app with AWS Athena…differ.blog</a>
<blockquote>
👉 To read more such articles, <a href="https://differ.blog/">sign up for free on Differ</a>.
</blockquote>
<hr>
<h4 id="resources">Resources</h4>
<ul>
<li><a href="https://docs.aws.amazon.com/cdk/api/latest/docs/aws-s3-deployment-readme.html">docs.aws.amazon.com/cdk/api/latest/docs/aws-s3-deployment-readme.html</a></li>
<li><a href="https://gist.github.com/riccardogiorato/428d015dee054d3cb9b06941851ab018">gist.github.com/riccardogiorato/428d015dee054d3cb9b06941851ab018</a></li>
<li><a href="https://docs.aws.amazon.com/cli/latest/reference/s3/cp.html">docs.aws.amazon.com/cli/latest/reference/s3/cp.html</a></li>
<li><a href="https://github.com/shallwefootball/upload-s3-action">github.com/shallwefootball/upload-s3-action</a></li>
</ul>
<h4 id="if-you-want-to-help-me-out-youcan">If you want to help me out you can:</h4>
<ul>
<li>Join Medium Membership and get my future Articles: <a href="https://riccardogiorato.medium.com/membership">https://riccardogiorato.medium.com/membership</a></li>
<li>Follow me on Twitter suggesting other Topics to cover: <a href="https://twitter.com/riccardogiorato">https://twitter.com/riccardogiorato</a></li>
</ul>

Do you want to wait hours to upload a React, Next.js, Gatsby, or Nuxt.js project? We hope you don’t and are looking for fast and easy solutions!

Stop Using the CDK S3 Deployment Module

Development based on TON enables fantastic speed and reach for Telegram users, but many builders face the same hidden obstacles. TON is positioned as a "superchain", designed for mass implementation, and is capable of supporting millions of transactions per second at low cost through dynamic sharding technology that divides the blockchain into smaller pieces of parallel processing.

This makes TON highly suitable for data-intensive applications such as gaming and DeFi. In this article, we outline the eight most common and costly mistakes TON developers are making today, from misunderstanding the FunC actor model and asynchronous messaging to writing code that consumes excessive gas and exhausts users.

## **What is TON and Why It's Gaining Traction in 2026**

The Open Network is a high-throughput, layer-1 blockchain for large-scale workflows, supporting flexible sharding, sub-second transaction completion, and transaction fees under 1 cent.

By providing Mini Apps and built-in USDT support, deep integration with the Telegram ecosystem enables developers to reach almost a billion users without requiring additional wallet installation. In 2026, TON's popularity exploded due to tap-to-earn games, DeFi TVL, and the steady influx of users who are not natively familiar with cryptocurrency.

## **TON's Ecosystem Core Components**

Open Network is a rapid, cost-effective network designed to perform well on Telegram for regular customers. All of its components are straightforward, affordable, and powerful enough to serve hundreds of thousands of users simultaneously. Here is a simple explanation of the main components.

### **TON Blockchain**

Smart contracts are developed in FunC and run on the TON Virtual Machine (TVM). They conclude in less than a second and cost less than a penny. Meanwhile, Proof-of-Stake is used by thousands of validators to guarantee security.

### **Toncoin (TON)**

A local cryptocurrency that covers all network expenses. You can use it to make quick payments, stake, vote on governance matters, and pay for gas. DeFi, NFT issuance, and play-to-earn games are also powered by it. Fees are slowly burned by supply, which could eventually raise their worth.

### **TON DNS**

It substitutes short names for the long wallet addresses. Errors are almost eliminated because users enter a name rather than copying 48 random characters. No one can ever take your name because ownership is recorded on the chain.

### **TON Storage**

It is a blockchain-based, decentralized file storage solution comparable to Dropbox or Google Drive. Once you pay the charge and download the file, it is permanently saved. For security, files are divided into segments, encrypted, and backed up on several nodes. Ideal for storing backups, documents, game assets, and NFT images.

### **TON Proxy**

It hides your real IP address and safeguards your personal information while using TON. Traffic passes through several random nodes, just like a built-in VPN. It protects against network tracking, spying, and DDoS attacks. It also makes anonymous voting, payments, and web browsing easy for everyone.

### **Telegram Integration**

TON is fully integrated into Telegram — no third-party apps or complex setup required. Wallets, payments, games, and shops are just a tap away in any chat. Mini-apps operate directly within Telegram and already have over 900 million potential users.

## **Key Benefits of Developing on TON**

The potential to serve millions of customers at the lowest cost and with the fastest confirmation, without investing in customer acquisition, is enabled by building on TON. These five key characteristics set TON apart from the others.

* **Massive built-in user base via Telegram integration**

Your game or dApp can appear as a mini-app directly in Telegram chats, accessible to more than 900 million regular users each month. There are no marketing expenses because the platform's integrated distribution system handles them. This is the simplest method to attract new users in the current Bitcoin landscape.

* **Extremely low transaction fees & high speed**

However, even during periods of high volume, typical TON transactions cost less than $0.01 and are executed in less than a second. With its autonomous network scaling, dynamic sharding avoids the congestion and price spikes experienced by Ethereum and Solana. Without experiencing any fees, users can exchange tokens in different ways or perform hundreds of gaming operations.

* **Developer-friendly tools and languages**

FunC features C-like syntax, built-in continuous storage, and asynchronous messaging, providing intuitive smart contract logic. TON Blueprint and Toniq enable one-click project creation, local testing, and rapid test network expansion. Excellent documentation, active Discord support, and prebuilt libraries significantly accelerate development.

* **Strong economic incentives & ecosystem funding**

The TON Foundation and Telegram organize regular hackathons with prize funds of up to $5 million and grant programs that typically award sums between $50,000 and $500,000. The best projects will receive free direct marketing support on Telegram for millions of users. Successful teams can often secure more funding faster because they have real user numbers from day one.

* **Seamless wallet experience with TON Connect**

Using a simple QR code or deep link, TON Connect connects any wallet to your dApp without any extensions or approvals. Users sign transactions in their familiar wallet app and immediately return to your mini-app. Registration takes just a few seconds and works the same as on a standard website.

## **Common Mistakes in TON Smart Contract Development**

Its architecture is so different from Ethereum or Solana that even seasoned blockchain developers often fall into TON-specific traps without proper guidance. The most dangerous and common ones, along with the clearest solutions to avoid them, are provided below.

### **Ignoring asynchronous execution models**

Because messages are actually asynchronous, many developers write FunC code as if they were synchronous; this can lead to deadlocks, funds being lost, or contracts freezing if responses never arrive. If your contract expects immediate return values or creates loops that wait for external messages, it will freeze permanently.

**How to Avoid:** Use the seqno and replay-protection patterns to test each thread with the local Blueprint simulator, never assuming an operation is complete simply because you have sent a message.

### **Underestimating gas fees and optimization**

The commissions are so small (\~$0.005) that newcomers often forget to optimize, write superfluous, bloated loops, or store unnecessary data, and end up having contracts that are 10–100 times more costly than they need to be. Unoptimized code also contributes to ever-growing storage costs.

**How to Avoid:** Profile every contract using either toncli or Blueprint's gas reporter from day one. Keep dictionaries as small as possible, develop strategies to avoid redundant calculations, use bit lines efficiently, and prefer computation over storage.

### **Poor handling of TON's sharding architecture**

Developers treat all of the accounts as if they were permanently on one shard and frequently send messages with the wrong worker chain or shard ID, which quietly fail or bounce the transaction. Hard-coding addresses without any check for shard migration is a direct path to token loss.

**How to Avoid:** Always use the latest address from get-methods or the Open Network Center API before sending. Use the official TON SDK's routing capabilities and enable replay protection with seqno + timestamp. Never store shard details in cache for more than a few minutes.

## **Errors in TON dApp Integration and Frontend Development**

Though a smart contract may be a perfect solution, many TON dApps encounter issues at the interface and Telegram Mini-App levels, often due to inadequate support from a[ TON development company](https://evacodes.com/ton-development-company), leading to user losses, safety incidents, and negative feedback. Here are the three biggest and most expensive mistakes developers are still making.

### **Failing to secure Telegram Mini-App connections**

Most of these teams use simple HTTP callbacks, allowing attackers to impersonate users and empty their wallets. Session hijacking via MITM on public Wi-Fi also happens quite often when developers skip verification.

**How to Avoid:** Always check initData on your servers using an official Telegram bot token and HMAC-SHA256 verification (code examples are available in the TON documentation). Use only TON Connect v2 with encrypted signatures and never use raw private keys.

### **Neglecting cross-device compatibility**

Developers test only on their iPhones or Android devices and then forget that Telegram also exists on desktop computers, iPads, older Android devices, and eventually in web chats. The layout breaks, buttons become unavailable, the viewport height is calculated incorrectly, and haptic feedback breaks in some versions.

**How to Avoid:** Test on real iOS, Android, desktop, and web versions from day one. Use Telegram's built-in themeParams for automatic dark/light mode switching and safe embeds. Tools like BrowserStack or Telegram's own preview bot help you detect 90% of issues early on.

### **Overlooking data privacy in user interactions**

Most of these mini-apps send wallet addresses, payment history, or chat IDs to analytics or third-party servers without the user's permission. This violates Telegram's strict confidentiality policy and could lead to the app being banned.

**How to Avoid:** Anonymize analytics by using Plausible or self-hosted Umami. Only show the shortened address, like abc, and let users copy the full address when relevant. Make sure to follow Telegram's requirements for mini-app privacy to avoid your application being instantly rejected during review.

## **Deployment and Security Pitfalls in TON Projects**

Many open network applications lose funds or fail permanently, not because of sophisticated vulnerabilities, but because teams rush deployment and treat safety as an afterthought. In 2025–2026, the same three mistakes are repeated in the analysis of hacker incidents and failed launches, often occurring during critical transaction phases.

### **Skipping comprehensive testing environments**

Developers will most often deploy directly from the Blueprint local network onto the main network, having never interacted with the public test network. In this way, real-world shard-splitting issues, message bounces, and differences in gas fees hit them post-launch. In many cases, projects that work on a local network but fail silently on the main network can never recover.

**How to Avoid:** Always do a full cycle on the official TON test network with real faucets and at least 24 hours of stress testing. Then use toncli local-testnet with enforced shard splitting, deploying the same bytecode to the public test network.

### **Vulnerability to common attacks like reentrancy**

Teams are deploying immutable contracts with no admin key or proxy, only to find, multiple weeks later, that there are critical bugs with no way to pause or update the contract. Due to a lack of off-chain monitoring, when funds get drained or contracts become stuck, the only notice is when users cry out in Telegram groups.

**How to Avoid:** Use a transparent proxy template or embed a trusted multi-signature owner who can pause or refresh the contract. Add an emergency withdrawal function protected by a 5-of-8 multisig and test it on testnet. Plan for the ability to upgrade before your first deployment; you won't be able to add later.

### **Inadequate monitoring and upgradability planning**

Although the asynchronous TON model complicates the classic Ethereum-style reentrancy, developers can still create dangerous patterns by rendering external messages before updating the state. In 2025, several DeFi projects lost millions due to reentrancy, despite “being aware” of the issue.

**How to Avoid:** Strictly follow the “check-effect-interaction” principle: first make the state changes, then send outgoing messages. Immediately mark the processed messages with seqno + bitflags and reject duplicates.

## **Best Practices for Successful TON Development**

To build successful projects on The Open Network, you need to follow proven rules that leading teams use every day. These ten practices are designed to help you build apps that are fast, secure, and user-experienced, just like the ones that millions of Telegram users enjoy.

* **Start with Blueprint + public testnet:** Never implement on the mainnet without a complete Blueprint and at least 48 hours on the public testnet. Test all edge events (rebounds, shard splits, seqno collisions) with actual wallets.
* **Optimize for storage first, compute second:** Storage fees are permanent and accumulate indefinitely. Keep your vocabulary small, delete inactive entries, and use bit strings efficiently. A 10-kilobyte contract can cost $500 per year if you are careless.
* **Implement proper upgradability or a pause from day zero:** which can suspend critical functions. You will not be allowed to add this to TON later. Use a simple proxy server or a multi-signature holder (5 out of 8).
* **Validate initData server-side every time:** In mini-apps, do not believe anything from the user interface. Authenticate HMAC-SHA256 with the bot token on every single request and reject anything older than 30 minutes.

## **Final through**

Generally speaking, developing on TON offers unprecedented opportunities for scalability and performance, especially when combined with Telegram. At the same time, these advantages are unique architectural concerns that demand special attention to asynchronous execution, gas optimization, sharding, and strong safety measures.

Understanding and proactively neutralizing the most common mistakes in TON development can help any community avoid costly errors and build reliable, high-performance applications. With the right approach, anyone can unlock the full potential of The Open Network and create solutions that connect millions of users worldwide.

Development based on TON enables fantastic speed and reach for Telegram users, but many builders face the same hidden obstacles. TON is positioned as a "superchain", designed for mass implementation, and is capable of supporting millions of transactions per second at low cost through dynamic sharding technology that divides the blockchain into smaller pieces of parallel processing.
This makes TON highly suitable for data-intensive applications such as gaming and DeFi. In this article, we outline the eight most common and costly mistakes TON developers are making today, from misunderstanding the FunC actor model and asynchronous messaging to writing code that consumes excessive gas and exhausts users.
<h2 id="what-is-ton-and-why-its-gaining-traction-in-2026">What is TON and Why It's Gaining Traction in 2026</h2>
The Open Network is a high-throughput, layer-1 blockchain for large-scale workflows, supporting flexible sharding, sub-second transaction completion, and transaction fees under 1 cent.
By providing Mini Apps and built-in USDT support, deep integration with the Telegram ecosystem enables developers to reach almost a billion users without requiring additional wallet installation. In 2026, TON's popularity exploded due to tap-to-earn games, DeFi TVL, and the steady influx of users who are not natively familiar with cryptocurrency.
<h2 id="tons-ecosystem-core-components">TON's Ecosystem Core Components</h2>
Open Network is a rapid, cost-effective network designed to perform well on Telegram for regular customers. All of its components are straightforward, affordable, and powerful enough to serve hundreds of thousands of users simultaneously. Here is a simple explanation of the main components.
<h3 id="ton-blockchain">TON Blockchain</h3>
Smart contracts are developed in FunC and run on the TON Virtual Machine (TVM). They conclude in less than a second and cost less than a penny. Meanwhile, Proof-of-Stake is used by thousands of validators to guarantee security.
<h3 id="toncoin-ton">Toncoin (TON)</h3>
A local cryptocurrency that covers all network expenses. You can use it to make quick payments, stake, vote on governance matters, and pay for gas. DeFi, NFT issuance, and play-to-earn games are also powered by it. Fees are slowly burned by supply, which could eventually raise their worth.
<h3 id="ton-dns">TON DNS</h3>
It substitutes short names for the long wallet addresses. Errors are almost eliminated because users enter a name rather than copying 48 random characters. No one can ever take your name because ownership is recorded on the chain.
<h3 id="ton-storage">TON Storage</h3>
It is a blockchain-based, decentralized file storage solution comparable to Dropbox or Google Drive. Once you pay the charge and download the file, it is permanently saved. For security, files are divided into segments, encrypted, and backed up on several nodes. Ideal for storing backups, documents, game assets, and NFT images.
<h3 id="ton-proxy">TON Proxy</h3>
It hides your real IP address and safeguards your personal information while using TON. Traffic passes through several random nodes, just like a built-in VPN. It protects against network tracking, spying, and DDoS attacks. It also makes anonymous voting, payments, and web browsing easy for everyone.
<h3 id="telegram-integration">Telegram Integration</h3>
TON is fully integrated into Telegram — no third-party apps or complex setup required. Wallets, payments, games, and shops are just a tap away in any chat. Mini-apps operate directly within Telegram and already have over 900 million potential users.
<h2 id="key-benefits-of-developing-on-ton">Key Benefits of Developing on TON</h2>
The potential to serve millions of customers at the lowest cost and with the fastest confirmation, without investing in customer acquisition, is enabled by building on TON. These five key characteristics set TON apart from the others.
<ul>
<li>Massive built-in user base via Telegram integration</li>
</ul>
Your game or dApp can appear as a mini-app directly in Telegram chats, accessible to more than 900 million regular users each month. There are no marketing expenses because the platform's integrated distribution system handles them. This is the simplest method to attract new users in the current Bitcoin landscape.
<ul>
<li>Extremely low transaction fees &#x26; high speed</li>
</ul>
However, even during periods of high volume, typical TON transactions cost less than $0.01 and are executed in less than a second. With its autonomous network scaling, dynamic sharding avoids the congestion and price spikes experienced by Ethereum and Solana. Without experiencing any fees, users can exchange tokens in different ways or perform hundreds of gaming operations.
<ul>
<li>Developer-friendly tools and languages</li>
</ul>
FunC features C-like syntax, built-in continuous storage, and asynchronous messaging, providing intuitive smart contract logic. TON Blueprint and Toniq enable one-click project creation, local testing, and rapid test network expansion. Excellent documentation, active Discord support, and prebuilt libraries significantly accelerate development.
<ul>
<li>Strong economic incentives &#x26; ecosystem funding</li>
</ul>
The TON Foundation and Telegram organize regular hackathons with prize funds of up to $5 million and grant programs that typically award sums between $50,000 and $500,000. The best projects will receive free direct marketing support on Telegram for millions of users. Successful teams can often secure more funding faster because they have real user numbers from day one.
<ul>
<li>Seamless wallet experience with TON Connect</li>
</ul>
Using a simple QR code or deep link, TON Connect connects any wallet to your dApp without any extensions or approvals. Users sign transactions in their familiar wallet app and immediately return to your mini-app. Registration takes just a few seconds and works the same as on a standard website.
<h2 id="common-mistakes-in-ton-smart-contract-development">Common Mistakes in TON Smart Contract Development</h2>
Its architecture is so different from Ethereum or Solana that even seasoned blockchain developers often fall into TON-specific traps without proper guidance. The most dangerous and common ones, along with the clearest solutions to avoid them, are provided below.
<h3 id="ignoring-asynchronous-execution-models">Ignoring asynchronous execution models</h3>
Because messages are actually asynchronous, many developers write FunC code as if they were synchronous; this can lead to deadlocks, funds being lost, or contracts freezing if responses never arrive. If your contract expects immediate return values or creates loops that wait for external messages, it will freeze permanently.
How to Avoid: Use the seqno and replay-protection patterns to test each thread with the local Blueprint simulator, never assuming an operation is complete simply because you have sent a message.
<h3 id="underestimating-gas-fees-and-optimization">Underestimating gas fees and optimization</h3>
The commissions are so small (~$0.005) that newcomers often forget to optimize, write superfluous, bloated loops, or store unnecessary data, and end up having contracts that are 10–100 times more costly than they need to be. Unoptimized code also contributes to ever-growing storage costs.
How to Avoid: Profile every contract using either toncli or Blueprint's gas reporter from day one. Keep dictionaries as small as possible, develop strategies to avoid redundant calculations, use bit lines efficiently, and prefer computation over storage.
<h3 id="poor-handling-of-tons-sharding-architecture">Poor handling of TON's sharding architecture</h3>
Developers treat all of the accounts as if they were permanently on one shard and frequently send messages with the wrong worker chain or shard ID, which quietly fail or bounce the transaction. Hard-coding addresses without any check for shard migration is a direct path to token loss.
How to Avoid: Always use the latest address from get-methods or the Open Network Center API before sending. Use the official TON SDK's routing capabilities and enable replay protection with seqno + timestamp. Never store shard details in cache for more than a few minutes.
<h2 id="errors-in-ton-dapp-integration-and-frontend-development">Errors in TON dApp Integration and Frontend Development</h2>
Though a smart contract may be a perfect solution, many TON dApps encounter issues at the interface and Telegram Mini-App levels, often due to inadequate support from a<a href="https://evacodes.com/ton-development-company"> TON development company</a>, leading to user losses, safety incidents, and negative feedback. Here are the three biggest and most expensive mistakes developers are still making.
<h3 id="failing-to-secure-telegram-mini-app-connections">Failing to secure Telegram Mini-App connections</h3>
Most of these teams use simple HTTP callbacks, allowing attackers to impersonate users and empty their wallets. Session hijacking via MITM on public Wi-Fi also happens quite often when developers skip verification.
How to Avoid: Always check initData on your servers using an official Telegram bot token and HMAC-SHA256 verification (code examples are available in the TON documentation). Use only TON Connect v2 with encrypted signatures and never use raw private keys.
<h3 id="neglecting-cross-device-compatibility">Neglecting cross-device compatibility</h3>
Developers test only on their iPhones or Android devices and then forget that Telegram also exists on desktop computers, iPads, older Android devices, and eventually in web chats. The layout breaks, buttons become unavailable, the viewport height is calculated incorrectly, and haptic feedback breaks in some versions.
How to Avoid: Test on real iOS, Android, desktop, and web versions from day one. Use Telegram's built-in themeParams for automatic dark/light mode switching and safe embeds. Tools like BrowserStack or Telegram's own preview bot help you detect 90% of issues early on.
<h3 id="overlooking-data-privacy-in-user-interactions">Overlooking data privacy in user interactions</h3>
Most of these mini-apps send wallet addresses, payment history, or chat IDs to analytics or third-party servers without the user's permission. This violates Telegram's strict confidentiality policy and could lead to the app being banned.
How to Avoid: Anonymize analytics by using Plausible or self-hosted Umami. Only show the shortened address, like abc, and let users copy the full address when relevant. Make sure to follow Telegram's requirements for mini-app privacy to avoid your application being instantly rejected during review.
<h2 id="deployment-and-security-pitfalls-in-ton-projects">Deployment and Security Pitfalls in TON Projects</h2>
Many open network applications lose funds or fail permanently, not because of sophisticated vulnerabilities, but because teams rush deployment and treat safety as an afterthought. In 2025–2026, the same three mistakes are repeated in the analysis of hacker incidents and failed launches, often occurring during critical transaction phases.
<h3 id="skipping-comprehensive-testing-environments">Skipping comprehensive testing environments</h3>
Developers will most often deploy directly from the Blueprint local network onto the main network, having never interacted with the public test network. In this way, real-world shard-splitting issues, message bounces, and differences in gas fees hit them post-launch. In many cases, projects that work on a local network but fail silently on the main network can never recover.
How to Avoid: Always do a full cycle on the official TON test network with real faucets and at least 24 hours of stress testing. Then use toncli local-testnet with enforced shard splitting, deploying the same bytecode to the public test network.
<h3 id="vulnerability-to-common-attacks-like-reentrancy">Vulnerability to common attacks like reentrancy</h3>
Teams are deploying immutable contracts with no admin key or proxy, only to find, multiple weeks later, that there are critical bugs with no way to pause or update the contract. Due to a lack of off-chain monitoring, when funds get drained or contracts become stuck, the only notice is when users cry out in Telegram groups.
How to Avoid: Use a transparent proxy template or embed a trusted multi-signature owner who can pause or refresh the contract. Add an emergency withdrawal function protected by a 5-of-8 multisig and test it on testnet. Plan for the ability to upgrade before your first deployment; you won't be able to add later.
<h3 id="inadequate-monitoring-and-upgradability-planning">Inadequate monitoring and upgradability planning</h3>
Although the asynchronous TON model complicates the classic Ethereum-style reentrancy, developers can still create dangerous patterns by rendering external messages before updating the state. In 2025, several DeFi projects lost millions due to reentrancy, despite “being aware” of the issue.
How to Avoid: Strictly follow the “check-effect-interaction” principle: first make the state changes, then send outgoing messages. Immediately mark the processed messages with seqno + bitflags and reject duplicates.
<h2 id="best-practices-for-successful-ton-development">Best Practices for Successful TON Development</h2>
To build successful projects on The Open Network, you need to follow proven rules that leading teams use every day. These ten practices are designed to help you build apps that are fast, secure, and user-experienced, just like the ones that millions of Telegram users enjoy.
<ul>
<li>Start with Blueprint + public testnet: Never implement on the mainnet without a complete Blueprint and at least 48 hours on the public testnet. Test all edge events (rebounds, shard splits, seqno collisions) with actual wallets.</li>
<li>Optimize for storage first, compute second: Storage fees are permanent and accumulate indefinitely. Keep your vocabulary small, delete inactive entries, and use bit strings efficiently. A 10-kilobyte contract can cost $500 per year if you are careless.</li>
<li>Implement proper upgradability or a pause from day zero: which can suspend critical functions. You will not be allowed to add this to TON later. Use a simple proxy server or a multi-signature holder (5 out of 8).</li>
<li>Validate initData server-side every time: In mini-apps, do not believe anything from the user interface. Authenticate HMAC-SHA256 with the bot token on every single request and reject anything older than 30 minutes.</li>
</ul>
<h2 id="final-through">Final through</h2>
Generally speaking, developing on TON offers unprecedented opportunities for scalability and performance, especially when combined with Telegram. At the same time, these advantages are unique architectural concerns that demand special attention to asynchronous execution, gas optimization, sharding, and strong safety measures.
Understanding and proactively neutralizing the most common mistakes in TON development can help any community avoid costly errors and build reliable, high-performance applications. With the right approach, anyone can unlock the full potential of The Open Network and create solutions that connect millions of users worldwide.

Common TON Development Mistakes and How to Avoid Them

Flexible cloud hosting plans have revolutionized developers' management and deployment processes of applications. They offer room to grow and innovate while tackling fundamental pain points. Stable hosting not only supports development but also inspires teams to work with confidence and creativity. By knowing how flexible hosting options benefit developers, teams can select the optimal environment for their work.

## Scalability Supports Project Growth

The workloads of a developer are choppy and constantly changing. For timely changes, traditional hosting solutions can get overwhelmed. Cloud hosting plans allow teams to increase or reduce resources as needed, depending on demand at the time. Such flexibility helps to prevent the lack of resources or excess costs incurred during the slower times. You are still able to grow, and the applications are not overwhelmed by sudden traffic peaks.

## Cost Efficiency for Every Stage

At every step of the software development process, you need to maintain a hold over the budget. Developers can adapt their resource consumption and costs when plans are flexible. This avoids spending a lot of money on infrastructure until it actually needs it. Having these pay-as-you-go models, you have better visibility, and you avoid unnecessary spending. Teams can invest in critical functionality without the burden of high tax on deployment.

## Improved Reliability and Uptime

Regardless of the application, reliable operation is a must. Many flexible hosting plans provide:

* Resource scaling that prevents outages in the event of heavy traffic (for example, around a news event). 
* The service too often goes down, affecting the user experience and reputation of the project. 
* These plans focus on scaling up or down according to changing demands, thus keeping performance and availability where they need to be. 

## Rapid Deployment and Experimentation

Development teams still prioritize speed. By offering preconfigured environments and automated scaling, flexible hosting services further accelerate deployment times. Fast deployment allows teams to test concepts and try experiments with reduced risk. Developers have the freedom to release new features or full-fledged projects without much time constraint. This would mean fewer restrictions and would promote innovation as well as faster work delivery.

## Enhanced Security Measures

One of the most crucial issues in any hosting environment is security. Flexible hosting comes with sophisticated security solutions like:

* Regular backups, firewalls, and real-time monitoring. 
* The updates are automated, so systems would be up-to-date with alleviated vulnerabilities in no time. 
* It helps developers minimize their risk exposure while allowing them to focus on writing secure code. 
* By implementing good security measures, user data can be as secure as the business using the product, and the business's intellectual property can be as protected as the data itself.

## Collaboration and Remote Access

Modern development usually has distributed teams. A collaborative environment is supported by providing project resources in one place through hosting—flexible hosting. No interruption wherever your team members work. A shared environment enables collaboration and keeps versioning simple. In this way, developers use the same tools and files regardless of the place they are in, making all work and processes more productive and consistent.

## Customizable Environments for Every Need

Each project has unique requirements. Hosting plans that allow developers to choose resources that best suit their needs. Teams can select computing power, storage size, and software versions appropriate for their applications. Customization means better performance and lower overhead. It allows developers to configure their environments for different types of technologies and frameworks.

## Automatic Backups and Recovery

Losing data can slow down your progress and harm your trust. Most of the flexible hosting solutions include:

* Automatic backups to shield their clients from losing their precious work. 
* These tools help you retrieve your files quickly when a situation occurs where you need to restore files due to an unintentional deletion or technical failure. 
* These functionalities minimize the downtime and keep the projects tightly on schedule.
* This gives developers peace of mind that their work is secure and easily recoverable.

## Environmental Sustainability

There are growing arguments for sustainability. Flexible hosting servers use shared resources, which is more energy efficient than a conventional setup. The servers also operate at only the required power to do the job and scale it up or down accordingly, which in turn reduces the carbon footprint. Developers who are more concerned with sustainability and wish to use resources responsibly can benefit from eco-friendly hosting options.

## Support and Documentation

Having responsive support and thorough documentation is going to go a long way when developing. Most flexible hosting providers provide you multiple channels for assistance, like chat, email, etc. With detailed guides and best practices, teams can tackle challenges on their own. It enables developers to spend more time on application quality and less time on troubleshooting.

## Conclusion

Flexible cloud hosting plans offer substantial advantages for development teams. These plans provide scalable resources, cost efficiency, strong security, and improved reliability. Quick deployment and experimentation foster creativity, while automatic backups ensure data safety. Customizable environments and remote access support diverse projects and distributed teams. As environmental sustainability grows in importance, flexible hosting also addresses these concerns. By choosing adaptable hosting, developers can create, innovate, and maintain robust applications with greater confidence and effectiveness.

Flexible cloud hosting plans have revolutionized developers' management and deployment processes of applications. They offer room to grow and innovate while tackling fundamental pain points. Stable hosting not only supports development but also inspires teams to work with confidence and creativity. By knowing how flexible hosting options benefit developers, teams can select the optimal environment for their work.
<h2 id="scalability-supports-project-growth">Scalability Supports Project Growth</h2>
The workloads of a developer are choppy and constantly changing. For timely changes, traditional hosting solutions can get overwhelmed. Cloud hosting plans allow teams to increase or reduce resources as needed, depending on demand at the time. Such flexibility helps to prevent the lack of resources or excess costs incurred during the slower times. You are still able to grow, and the applications are not overwhelmed by sudden traffic peaks.
<h2 id="cost-efficiency-for-every-stage">Cost Efficiency for Every Stage</h2>
At every step of the software development process, you need to maintain a hold over the budget. Developers can adapt their resource consumption and costs when plans are flexible. This avoids spending a lot of money on infrastructure until it actually needs it. Having these pay-as-you-go models, you have better visibility, and you avoid unnecessary spending. Teams can invest in critical functionality without the burden of high tax on deployment.
<h2 id="improved-reliability-and-uptime">Improved Reliability and Uptime</h2>
Regardless of the application, reliable operation is a must. Many flexible hosting plans provide:
<ul>
<li>Resource scaling that prevents outages in the event of heavy traffic (for example, around a news event). </li>
<li>The service too often goes down, affecting the user experience and reputation of the project. </li>
<li>These plans focus on scaling up or down according to changing demands, thus keeping performance and availability where they need to be. </li>
</ul>
<h2 id="rapid-deployment-and-experimentation">Rapid Deployment and Experimentation</h2>
Development teams still prioritize speed. By offering preconfigured environments and automated scaling, flexible hosting services further accelerate deployment times. Fast deployment allows teams to test concepts and try experiments with reduced risk. Developers have the freedom to release new features or full-fledged projects without much time constraint. This would mean fewer restrictions and would promote innovation as well as faster work delivery.
<h2 id="enhanced-security-measures">Enhanced Security Measures</h2>
One of the most crucial issues in any hosting environment is security. Flexible hosting comes with sophisticated security solutions like:
<ul>
<li>Regular backups, firewalls, and real-time monitoring. </li>
<li>The updates are automated, so systems would be up-to-date with alleviated vulnerabilities in no time. </li>
<li>It helps developers minimize their risk exposure while allowing them to focus on writing secure code. </li>
<li>By implementing good security measures, user data can be as secure as the business using the product, and the business's intellectual property can be as protected as the data itself.</li>
</ul>
<h2 id="collaboration-and-remote-access">Collaboration and Remote Access</h2>
Modern development usually has distributed teams. A collaborative environment is supported by providing project resources in one place through hosting—flexible hosting. No interruption wherever your team members work. A shared environment enables collaboration and keeps versioning simple. In this way, developers use the same tools and files regardless of the place they are in, making all work and processes more productive and consistent.
<h2 id="customizable-environments-for-every-need">Customizable Environments for Every Need</h2>
Each project has unique requirements. Hosting plans that allow developers to choose resources that best suit their needs. Teams can select computing power, storage size, and software versions appropriate for their applications. Customization means better performance and lower overhead. It allows developers to configure their environments for different types of technologies and frameworks.
<h2 id="automatic-backups-and-recovery">Automatic Backups and Recovery</h2>
Losing data can slow down your progress and harm your trust. Most of the flexible hosting solutions include:
<ul>
<li>Automatic backups to shield their clients from losing their precious work. </li>
<li>These tools help you retrieve your files quickly when a situation occurs where you need to restore files due to an unintentional deletion or technical failure. </li>
<li>These functionalities minimize the downtime and keep the projects tightly on schedule.</li>
<li>This gives developers peace of mind that their work is secure and easily recoverable.</li>
</ul>
<h2 id="environmental-sustainability">Environmental Sustainability</h2>
There are growing arguments for sustainability. Flexible hosting servers use shared resources, which is more energy efficient than a conventional setup. The servers also operate at only the required power to do the job and scale it up or down accordingly, which in turn reduces the carbon footprint. Developers who are more concerned with sustainability and wish to use resources responsibly can benefit from eco-friendly hosting options.
<h2 id="support-and-documentation">Support and Documentation</h2>
Having responsive support and thorough documentation is going to go a long way when developing. Most flexible hosting providers provide you multiple channels for assistance, like chat, email, etc. With detailed guides and best practices, teams can tackle challenges on their own. It enables developers to spend more time on application quality and less time on troubleshooting.
<h2 id="conclusion">Conclusion</h2>
Flexible cloud hosting plans offer substantial advantages for development teams. These plans provide scalable resources, cost efficiency, strong security, and improved reliability. Quick deployment and experimentation foster creativity, while automatic backups ensure data safety. Customizable environments and remote access support diverse projects and distributed teams. As environmental sustainability grows in importance, flexible hosting also addresses these concerns. By choosing adaptable hosting, developers can create, innovate, and maintain robust applications with greater confidence and effectiveness.

How Developers Benefit from Flexible Cloud Hosting Plans

Most travel apps look simple on the surface: you choose dates, compare options, tap to confirm — and within seconds your car, hotel room, or flight is booked. But behind this simplicity lies a massive amount of engineering, automation, and real-time data processing that users never see.

Modern travel platforms operate on top of complex distributed systems built to synchronize inventory, calculate dynamic pricing, verify user identity, coordinate logistics, manage payments, and provide instant support. And the more seamless the experience becomes, the more invisible this infrastructure needs to be.

Here is what is actually happening under the hood.

## **1. Real-Time Inventory: The Core of Every Travel Marketplace**

Every travel booking relies on a single promise: the item you see is actually available.
In reality, maintaining that promise is extremely difficult.

Inventory changes constantly:

* a car gets booked
* a hotel room becomes unavailable
* a partner adjusts pricing
* delivery restrictions update
* maintenance or downtime occurs

To handle this, platforms rely on:

* event-driven synchronization
* supplier APIs and webhooks
* rapid-expiring caching layers
* automated consistency checks

For example, digital mobility systems that allow travelers to[ **rent a car Dubai**](https://drive.yango.com/uae/dubai) must maintain real-time availability across multiple rental partners. When a user selects dates, the platform instantly filters out unavailable vehicles, applies delivery constraints, recalculates pricing, and locks the car to prevent double-booking — all within milliseconds.

To the user, it looks simple. In reality, it's one of the hardest problems in digital travel infrastructure.

## **2. Dynamic Pricing Engines That Recalculate Costs Constantly**

Prices in travel apps are rarely static.
They shift depending on:

* demand patterns
* season or time of day
* location
* vehicle or room class
* supplier rules
* promotions
* rental duration
* extra services
* even real-time competitor behavior

Behind every price shown in a travel app sits a pricing engine — sometimes rule-based, sometimes AI-driven — that must compute final costs instantly while keeping them transparent for users.

This requires:

* efficient pricing pipelines
* multilayer caching
* fallback rules
* reconciliation logic
* supplier-specific overrides

The complexity is hidden, but the accuracy is essential.

## **3. Identity Verification and Compliance Behind the Scenes**

Travel apps must verify that a user is eligible to complete a booking.
For flights, hotels, and car rentals, this often includes:

* document scanning
* OCR and data extraction
* biometric matching
* driver’s license validation
* age checks
* compliance with local regulations

These processes must run quietly in the background without disrupting the user journey.
For example, car rental apps must confirm age and license requirements automatically before allowing a booking.

## **4. Payment Infrastructure With Multiple Parallel Flows**

Travel bookings support a variety of payment structures:

* partial prepayments
* pay-at-pickup flows
* refundable security deposits
* multi-currency handling
* automatic toll and fine settlement
* partner payouts
* refunds and cancellations

Each supplier may require a different flow, which means the travel app must operate a flexible and fault-tolerant payment engine.

This includes:

* smart routing through multiple payment gateways
* tokenization and vaulting
* fraud detection
* ledger systems for supplier settlements
* automatic invoice generation

What looks like a simple “Pay now” button is actually a carefully orchestrated payment workflow.

## **5. Logistics Coordination for Deliveries, Pickups, and Operations**

For mobility platforms, the booking is only step one.
After it comes the operational layer: coordinating real vehicles, real schedules, and real people.

Systems must handle:

* delivery time slots
* driver assignments
* pickup logistics
* real-time route adjustments
* fleet preparation
* communication with users and partners
* inspection checklists

This requires:

* internal dispatching dashboards
* automated notification systems
* SLA monitoring
* partner management tools

All of this complexity is abstracted away so the end user sees only:
“Your car will be delivered at 10:00.”

## **6. Ranking, Search, and Recommendation Algorithms**

Travel apps must return useful and relevant results — instantly.

Under the hood, ranking systems consider:

* location
* availability
* price competitiveness
* user preferences
* partner performance metrics
* conversion history
* cancellation rates
* promotional rules

More advanced platforms use machine learning to optimize rankings in real time and personalize results for each user.

## **7. Support Systems Powered by Automation**

Travel support appears simple — a chat window, quick responses — but behind it is a full customer-service infrastructure:

* ticket routing
* automated classification
* AI-generated responses
* escalation logic
* SLA timers
* multi-channel communication
* integrations with partner systems

Support must respond instantly while maintaining accuracy, especially when the user is physically waiting for a car, a driver, or a check-in.

## **8. Reliability and Scaling: The Invisible Foundation**

Travel demand is unpredictable. Apps must withstand massive load spikes during:

* holidays
* sale events
* last-minute booking surges
* weather disruptions
* flight cancellations

This requires:

* global CDNs
* rate limiting
* autoscaling clusters
* load balancing
* multi-region failover
* continuous monitoring
* alerting systems
* automatic disaster recovery

The smoother the platform feels, the more sophisticated the reliability layer.

## **Travel Apps Feel Simple Because Their Infrastructure Is Not**

The entire travel experience — from browsing to booking to pickup — is built on top of highly complex, deeply integrated systems that users never notice.

Modern travel apps, especially mobility and booking marketplaces, are among the most technically advanced consumer platforms today. Their success depends on how effectively they can hide operational and technological complexity behind a clean, intuitive interface.

The next time a travel app confirms a booking in two seconds, remember: hundreds of processes just ran in the background to make that moment possible.

Most travel apps look simple on the surface: you choose dates, compare options, tap to confirm — and within seconds your car, hotel room, or flight is booked. But behind this simplicity lies a massive amount of engineering, automation, and real-time data processing that users never see.
Modern travel platforms operate on top of complex distributed systems built to synchronize inventory, calculate dynamic pricing, verify user identity, coordinate logistics, manage payments, and provide instant support. And the more seamless the experience becomes, the more invisible this infrastructure needs to be.
Here is what is actually happening under the hood.
<h2 id="1-real-time-inventory-the-core-of-every-travel-marketplace">1. Real-Time Inventory: The Core of Every Travel Marketplace</h2>
Every travel booking relies on a single promise: the item you see is actually available.
In reality, maintaining that promise is extremely difficult.
Inventory changes constantly:
<ul>
<li>a car gets booked</li>
<li>a hotel room becomes unavailable</li>
<li>a partner adjusts pricing</li>
<li>delivery restrictions update</li>
<li>maintenance or downtime occurs</li>
</ul>
To handle this, platforms rely on:
<ul>
<li>event-driven synchronization</li>
<li>supplier APIs and webhooks</li>
<li>rapid-expiring caching layers</li>
<li>automated consistency checks</li>
</ul>
For example, digital mobility systems that allow travelers to<a href="https://drive.yango.com/uae/dubai"> rent a car Dubai</a> must maintain real-time availability across multiple rental partners. When a user selects dates, the platform instantly filters out unavailable vehicles, applies delivery constraints, recalculates pricing, and locks the car to prevent double-booking — all within milliseconds.
To the user, it looks simple. In reality, it's one of the hardest problems in digital travel infrastructure.
<h2 id="2-dynamic-pricing-engines-that-recalculate-costs-constantly">2. Dynamic Pricing Engines That Recalculate Costs Constantly</h2>
Prices in travel apps are rarely static.
They shift depending on:
<ul>
<li>demand patterns</li>
<li>season or time of day</li>
<li>location</li>
<li>vehicle or room class</li>
<li>supplier rules</li>
<li>promotions</li>
<li>rental duration</li>
<li>extra services</li>
<li>even real-time competitor behavior</li>
</ul>
Behind every price shown in a travel app sits a pricing engine — sometimes rule-based, sometimes AI-driven — that must compute final costs instantly while keeping them transparent for users.
This requires:
<ul>
<li>efficient pricing pipelines</li>
<li>multilayer caching</li>
<li>fallback rules</li>
<li>reconciliation logic</li>
<li>supplier-specific overrides</li>
</ul>
The complexity is hidden, but the accuracy is essential.
<h2 id="3-identity-verification-and-compliance-behind-the-scenes">3. Identity Verification and Compliance Behind the Scenes</h2>
Travel apps must verify that a user is eligible to complete a booking.
For flights, hotels, and car rentals, this often includes:
<ul>
<li>document scanning</li>
<li>OCR and data extraction</li>
<li>biometric matching</li>
<li>driver’s license validation</li>
<li>age checks</li>
<li>compliance with local regulations</li>
</ul>
These processes must run quietly in the background without disrupting the user journey.
For example, car rental apps must confirm age and license requirements automatically before allowing a booking.
<h2 id="4-payment-infrastructure-with-multiple-parallel-flows">4. Payment Infrastructure With Multiple Parallel Flows</h2>
Travel bookings support a variety of payment structures:
<ul>
<li>partial prepayments</li>
<li>pay-at-pickup flows</li>
<li>refundable security deposits</li>
<li>multi-currency handling</li>
<li>automatic toll and fine settlement</li>
<li>partner payouts</li>
<li>refunds and cancellations</li>
</ul>
Each supplier may require a different flow, which means the travel app must operate a flexible and fault-tolerant payment engine.
This includes:
<ul>
<li>smart routing through multiple payment gateways</li>
<li>tokenization and vaulting</li>
<li>fraud detection</li>
<li>ledger systems for supplier settlements</li>
<li>automatic invoice generation</li>
</ul>
What looks like a simple “Pay now” button is actually a carefully orchestrated payment workflow.
<h2 id="5-logistics-coordination-for-deliveries-pickups-and-operations">5. Logistics Coordination for Deliveries, Pickups, and Operations</h2>
For mobility platforms, the booking is only step one.
After it comes the operational layer: coordinating real vehicles, real schedules, and real people.
Systems must handle:
<ul>
<li>delivery time slots</li>
<li>driver assignments</li>
<li>pickup logistics</li>
<li>real-time route adjustments</li>
<li>fleet preparation</li>
<li>communication with users and partners</li>
<li>inspection checklists</li>
</ul>
This requires:
<ul>
<li>internal dispatching dashboards</li>
<li>automated notification systems</li>
<li>SLA monitoring</li>
<li>partner management tools</li>
</ul>
All of this complexity is abstracted away so the end user sees only:
“Your car will be delivered at 10:00.”
<h2 id="6-ranking-search-and-recommendation-algorithms">6. Ranking, Search, and Recommendation Algorithms</h2>
Travel apps must return useful and relevant results — instantly.
Under the hood, ranking systems consider:
<ul>
<li>location</li>
<li>availability</li>
<li>price competitiveness</li>
<li>user preferences</li>
<li>partner performance metrics</li>
<li>conversion history</li>
<li>cancellation rates</li>
<li>promotional rules</li>
</ul>
More advanced platforms use machine learning to optimize rankings in real time and personalize results for each user.
<h2 id="7-support-systems-powered-by-automation">7. Support Systems Powered by Automation</h2>
Travel support appears simple — a chat window, quick responses — but behind it is a full customer-service infrastructure:
<ul>
<li>ticket routing</li>
<li>automated classification</li>
<li>AI-generated responses</li>
<li>escalation logic</li>
<li>SLA timers</li>
<li>multi-channel communication</li>
<li>integrations with partner systems</li>
</ul>
Support must respond instantly while maintaining accuracy, especially when the user is physically waiting for a car, a driver, or a check-in.
<h2 id="8-reliability-and-scaling-the-invisible-foundation">8. Reliability and Scaling: The Invisible Foundation</h2>
Travel demand is unpredictable. Apps must withstand massive load spikes during:
<ul>
<li>holidays</li>
<li>sale events</li>
<li>last-minute booking surges</li>
<li>weather disruptions</li>
<li>flight cancellations</li>
</ul>
This requires:
<ul>
<li>global CDNs</li>
<li>rate limiting</li>
<li>autoscaling clusters</li>
<li>load balancing</li>
<li>multi-region failover</li>
<li>continuous monitoring</li>
<li>alerting systems</li>
<li>automatic disaster recovery</li>
</ul>
The smoother the platform feels, the more sophisticated the reliability layer.
<h2 id="travel-apps-feel-simple-because-their-infrastructure-is-not">Travel Apps Feel Simple Because Their Infrastructure Is Not</h2>
The entire travel experience — from browsing to booking to pickup — is built on top of highly complex, deeply integrated systems that users never notice.
Modern travel apps, especially mobility and booking marketplaces, are among the most technically advanced consumer platforms today. Their success depends on how effectively they can hide operational and technological complexity behind a clean, intuitive interface.
The next time a travel app confirms a booking in two seconds, remember: hundreds of processes just ran in the background to make that moment possible.

The Hidden Infrastructure Behind Modern Travel Apps

The gaming industry is entering a transformative era. By 2026, players can expect groundbreaking innovations that will reshape how games are developed, played, and experienced. Here’s an in-depth look at the technologies set to dominate.

Cloud Gaming Becomes Standard

* **From experiment to mainstream:** Cloud gaming platforms like Xbox Cloud Gaming and NVIDIA GeForce NOW are expected to become standard, reducing reliance on expensive consoles or PCs.
* **Global accessibility:** With improved 5G and fiber networks, players will stream high-quality games anywhere, on any device.
* **Impact:** This democratizes gaming, allowing more people to access AAA titles without high upfront costs.

AI in Game Development

* **Generative AI tools:** Developers will use AI to create dynamic worlds, intelligent NPCs, and personalized storylines.
* **Player personalization:** AI will tailor difficulty levels, quests, and even dialogue to individual play styles.
* **Double-edged sword:** While AI accelerates creativity, ethical concerns around bias and originality will be critical.

AR & VR Immersion

* **Next-gen VR headsets:** Lighter, wireless devices with higher resolution will make VR more comfortable and realistic.
* **AR integration:** Augmented reality will blend gaming with real-world environments, expanding mobile and wearable gaming.
* **Social VR:** Multiplayer VR spaces will evolve into social hubs, merging gaming with digital communities.

Hardware Innovations

* **New consoles:** By 2026, mid-cycle upgrades or new consoles from Sony and Microsoft are expected, pushing visual fidelity further.
* **Controller tech:** TMR sensor technology will eliminate controller drift, a long-standing issue for gamers.
* **GPU advancements:** More powerful graphics cards will enable photorealistic visuals and real-time ray tracing.

Esports Expansion

* **Bigger and faster:** Esports will continue to grow, with larger tournaments, faster streaming, and global participation like [online slots real money](https://www.rainbowrichescasino.com/uk/online-slots).
* **Integration with mainstream media:** Expect esports broadcasts to rival traditional sports in production quality.
* **Tech impact:** AI-driven analytics will enhance player training and fan engagement.

Monetization & Blockchain

* **Beyond NFTs:** While the hype around NFTs has cooled, blockchain will still influence ownership of digital assets.
* **Subscription models:** Services like Xbox Game Pass will expand, offering bundled cloud and console access.
* **Microtransactions evolve:** More ethical monetization practices will emerge, focusing on player satisfaction rather than exploitation.

Indie Games & Creativity

* **Indie resilience:** Independent studios will remain the creative heart of the industry, leveraging AI and cloud tools to compete.
* **Experimental formats:** Expect bold experiments in narrative, art style, and gameplay mechanics.
* **Community-driven design:** Crowdsourced ideas and modding communities will influence mainstream releases.

The Big Picture

By 2026, gaming will be **more accessible, intelligent, and immersive than ever before**. Cloud platforms will remove hardware barriers, AI will personalize experiences, and AR/VR will redefine immersion. Meanwhile, esports will rival traditional sports, and indie developers will continue to push boundaries.

The future of gaming isn’t just about better graphics—it’s about **connection, creativity, and inclusivity**. Players will step into worlds that feel alive, tailored, and limitless.

The gaming industry is entering a transformative era. By 2026, players can expect groundbreaking innovations that will reshape how games are developed, played, and experienced. Here’s an in-depth look at the technologies set to dominate.
Cloud Gaming Becomes Standard
<ul>
<li>From experiment to mainstream: Cloud gaming platforms like Xbox Cloud Gaming and NVIDIA GeForce NOW are expected to become standard, reducing reliance on expensive consoles or PCs.</li>
<li>Global accessibility: With improved 5G and fiber networks, players will stream high-quality games anywhere, on any device.</li>
<li>Impact: This democratizes gaming, allowing more people to access AAA titles without high upfront costs.</li>
</ul>
AI in Game Development
<ul>
<li>Generative AI tools: Developers will use AI to create dynamic worlds, intelligent NPCs, and personalized storylines.</li>
<li>Player personalization: AI will tailor difficulty levels, quests, and even dialogue to individual play styles.</li>
<li>Double-edged sword: While AI accelerates creativity, ethical concerns around bias and originality will be critical.</li>
</ul>
AR &#x26; VR Immersion
<ul>
<li>Next-gen VR headsets: Lighter, wireless devices with higher resolution will make VR more comfortable and realistic.</li>
<li>AR integration: Augmented reality will blend gaming with real-world environments, expanding mobile and wearable gaming.</li>
<li>Social VR: Multiplayer VR spaces will evolve into social hubs, merging gaming with digital communities.</li>
</ul>
Hardware Innovations
<ul>
<li>New consoles: By 2026, mid-cycle upgrades or new consoles from Sony and Microsoft are expected, pushing visual fidelity further.</li>
<li>Controller tech: TMR sensor technology will eliminate controller drift, a long-standing issue for gamers.</li>
<li>GPU advancements: More powerful graphics cards will enable photorealistic visuals and real-time ray tracing.</li>
</ul>
Esports Expansion
<ul>
<li>Bigger and faster: Esports will continue to grow, with larger tournaments, faster streaming, and global participation like <a href="https://www.rainbowrichescasino.com/uk/online-slots">online slots real money</a>.</li>
<li>Integration with mainstream media: Expect esports broadcasts to rival traditional sports in production quality.</li>
<li>Tech impact: AI-driven analytics will enhance player training and fan engagement.</li>
</ul>
Monetization &#x26; Blockchain
<ul>
<li>Beyond NFTs: While the hype around NFTs has cooled, blockchain will still influence ownership of digital assets.</li>
<li>Subscription models: Services like Xbox Game Pass will expand, offering bundled cloud and console access.</li>
<li>Microtransactions evolve: More ethical monetization practices will emerge, focusing on player satisfaction rather than exploitation.</li>
</ul>
Indie Games &#x26; Creativity
<ul>
<li>Indie resilience: Independent studios will remain the creative heart of the industry, leveraging AI and cloud tools to compete.</li>
<li>Experimental formats: Expect bold experiments in narrative, art style, and gameplay mechanics.</li>
<li>Community-driven design: Crowdsourced ideas and modding communities will influence mainstream releases.</li>
</ul>
The Big Picture
By 2026, gaming will be more accessible, intelligent, and immersive than ever before. Cloud platforms will remove hardware barriers, AI will personalize experiences, and AR/VR will redefine immersion. Meanwhile, esports will rival traditional sports, and indie developers will continue to push boundaries.
The future of gaming isn’t just about better graphics—it’s about connection, creativity, and inclusivity. Players will step into worlds that feel alive, tailored, and limitless.

The Gaming Tech We Will See in 2026

![](https://cdn-images-1.medium.com/max/1600/1*eBpu9q-OVhY1WRxiuLeqBA.avif)

Yard signs aren't just visual noise. They're behavioral tools that shape perception of popularity, trust, and belonging. Seeing many of the same message makes people think instinctively: "Other people support this—maybe I should too." That psychological mechanism operates largely outside conscious awareness, influencing decisions before people even realize they've been influenced. 

Psychology research on decision-making shows that humans use shortcuts constantly when facing uncertainty. When you don't know much about a candidate or cause, you look for signals from your environment. If many people in your community support something, you assume they know something worth knowing. That assumption isn't cynical. It's practical. People can't research everything, so they use social evidence as a proxy for quality or legitimacy. [The psychology of yard signs](https://www.goodguyssigns.com/blog/the-psychology-of-yard-signs-why-people-notice-follow-and-act/) reveals why neighborhoods saturated with signs create voting outcomes that defy pure logic.

The effect compounds in competitive environments where voters are genuinely undecided. In races where both candidates are unknown or partially known, the candidate whose signs are most visible gains an advantage that has nothing to do with policy knowledge. Voters default to the familiar. They vote for the name they recognize because recognition feels like knowledge. That familiarity, built through repeated exposure to signs, translates into votes. It's not manipulation. It's how human psychology actually works.

## **Social Proof Made Visible**

Conformity drives decisions more than people usually admit. Psychologists study this through simple experiments showing that people conform to group behavior even when they know the group is wrong. In voting contexts, conformity operates through visible social proof. A neighborhood where most yards display one candidate's sign creates the impression that supporting that candidate is normal, expected, and right. Voters conform to that impression without consciously realizing it's happening.

The power of conformity increases in ambiguous situations. When voters don't know candidates well, ambiguity is extreme. In that vacuum, conformity becomes the primary decision-making tool. A voter walks into the booth knowing little about the candidates but having seen one candidate's sign fifty times in their neighborhood. Conformity bias pushes them toward that familiar option. The sign created familiarity, familiarity created comfort, and comfort led to a vote.

This psychological mechanism works across contexts beyond politics. Customers choose familiar businesses. Supporters back causes they see others supporting. Communities form around visible expressions of shared values. Yard signs make values visible. They're declarations placed publicly by people willing to stake their reputation on those values. Other people see those declarations and adjust their beliefs and behaviors accordingly.

## **Familiarity Builds Trust**

The name recognition effect is well-documented in psychology. Repeated exposure to a stimulus creates positive feeling toward that stimulus. This isn't rational. You don't consciously think, "I've seen this name many times, therefore it's trustworthy." The effect operates automatically. Exposure creates familiarity, and familiarity creates trust without requiring any actual knowledge. A voter who's seen a candidate's name on yard signs fifty times feels like they know that candidate better than one whose name they've never seen. That false familiarity translates into trust and voting preference.

The exposure effect also explains why yard signs work better in concentrated geographic areas than spread across wide regions. Someone who sees a sign repeatedly in their neighborhood develops stronger familiarity and trust than someone who sees scattered signs across a city. The concentration creates the repeated exposure that generates psychological impact. That's why saturating a few neighborhoods with signs outperforms spreading signs thinly across many neighborhoods.

Trust also develops from the visibility of community endorsement. When you see multiple neighbors displaying signs for the same candidate, you trust that candidate more because your neighbors apparently vetted them. That trust from seeing community choice is different from trust generated by advertising. It's peer trust rather than commercial messaging. Yard signs generate peer trust by making peer choices visible.

## **Influence Through Geography**

Local validation carries psychological weight that distant endorsement doesn't. A vote for a candidate endorsed by your neighbors feels more legitimate than a vote for one endorsed by strangers from other states. Local visibility creates local consensus, and local consensus creates local validation. That geographic clustering of signs creates the psychological perception of widespread community support rather than outside influence.

The geographic concentration also creates what psychologists call the availability heuristic. Information that comes to mind easily feels more important and true than information you have to search for. A candidate whose signs are everywhere in your neighborhood is available in your memory. That availability makes you assume they must be important or legitimate. You don't consciously think through this. Your brain just defaults to assuming that frequent information is important information.

Geographic influence also works through identity creation. People want to belong to communities and support what their communities support. Visible support through yard signs signals community values. People align themselves with those values and those candidates to maintain community belonging. That identity-based influence is deeper than rational persuasion. It's tribal and psychological rather than logical.

## **Conclusion**

Every sign signals who others believe in, and that changes outcomes more than most voters realize. The psychology of yard signs reveals that influence operates through mechanisms outside conscious awareness. Social proof, conformity, familiarity, and local validation all work together to shape decisions. A neighborhood saturated with signs for one candidate has already influenced voters before they consciously engage with policy positions or candidate records.

For campaigns, causes, and community organizers, understanding the psychology behind yard sign effectiveness explains why they remain central to strategy. It's not about the signs themselves. It's about the psychological mechanisms they activate in voters and supporters. Those mechanisms are powerful, proven, and largely automatic.

The most effective campaigns leverage these psychological truths rather than fighting them. They saturate neighborhoods with visible support. They create consensus that others can see. They trigger the psychological mechanisms that drive conformity, familiarity, and belonging. That strategic understanding transforms yard signs from simple advertising tools into behavioral influence devices.

<img src="https://cdn-images-1.medium.com/max/1600/1*eBpu9q-OVhY1WRxiuLeqBA.avif" alt="">
Yard signs aren't just visual noise. They're behavioral tools that shape perception of popularity, trust, and belonging. Seeing many of the same message makes people think instinctively: "Other people support this—maybe I should too." That psychological mechanism operates largely outside conscious awareness, influencing decisions before people even realize they've been influenced. 
Psychology research on decision-making shows that humans use shortcuts constantly when facing uncertainty. When you don't know much about a candidate or cause, you look for signals from your environment. If many people in your community support something, you assume they know something worth knowing. That assumption isn't cynical. It's practical. People can't research everything, so they use social evidence as a proxy for quality or legitimacy. <a href="https://www.goodguyssigns.com/blog/the-psychology-of-yard-signs-why-people-notice-follow-and-act/">The psychology of yard signs</a> reveals why neighborhoods saturated with signs create voting outcomes that defy pure logic.
The effect compounds in competitive environments where voters are genuinely undecided. In races where both candidates are unknown or partially known, the candidate whose signs are most visible gains an advantage that has nothing to do with policy knowledge. Voters default to the familiar. They vote for the name they recognize because recognition feels like knowledge. That familiarity, built through repeated exposure to signs, translates into votes. It's not manipulation. It's how human psychology actually works.
<h2 id="social-proof-made-visible">Social Proof Made Visible</h2>
Conformity drives decisions more than people usually admit. Psychologists study this through simple experiments showing that people conform to group behavior even when they know the group is wrong. In voting contexts, conformity operates through visible social proof. A neighborhood where most yards display one candidate's sign creates the impression that supporting that candidate is normal, expected, and right. Voters conform to that impression without consciously realizing it's happening.
The power of conformity increases in ambiguous situations. When voters don't know candidates well, ambiguity is extreme. In that vacuum, conformity becomes the primary decision-making tool. A voter walks into the booth knowing little about the candidates but having seen one candidate's sign fifty times in their neighborhood. Conformity bias pushes them toward that familiar option. The sign created familiarity, familiarity created comfort, and comfort led to a vote.
This psychological mechanism works across contexts beyond politics. Customers choose familiar businesses. Supporters back causes they see others supporting. Communities form around visible expressions of shared values. Yard signs make values visible. They're declarations placed publicly by people willing to stake their reputation on those values. Other people see those declarations and adjust their beliefs and behaviors accordingly.
<h2 id="familiarity-builds-trust">Familiarity Builds Trust</h2>
The name recognition effect is well-documented in psychology. Repeated exposure to a stimulus creates positive feeling toward that stimulus. This isn't rational. You don't consciously think, "I've seen this name many times, therefore it's trustworthy." The effect operates automatically. Exposure creates familiarity, and familiarity creates trust without requiring any actual knowledge. A voter who's seen a candidate's name on yard signs fifty times feels like they know that candidate better than one whose name they've never seen. That false familiarity translates into trust and voting preference.
The exposure effect also explains why yard signs work better in concentrated geographic areas than spread across wide regions. Someone who sees a sign repeatedly in their neighborhood develops stronger familiarity and trust than someone who sees scattered signs across a city. The concentration creates the repeated exposure that generates psychological impact. That's why saturating a few neighborhoods with signs outperforms spreading signs thinly across many neighborhoods.
Trust also develops from the visibility of community endorsement. When you see multiple neighbors displaying signs for the same candidate, you trust that candidate more because your neighbors apparently vetted them. That trust from seeing community choice is different from trust generated by advertising. It's peer trust rather than commercial messaging. Yard signs generate peer trust by making peer choices visible.
<h2 id="influence-through-geography">Influence Through Geography</h2>
Local validation carries psychological weight that distant endorsement doesn't. A vote for a candidate endorsed by your neighbors feels more legitimate than a vote for one endorsed by strangers from other states. Local visibility creates local consensus, and local consensus creates local validation. That geographic clustering of signs creates the psychological perception of widespread community support rather than outside influence.
The geographic concentration also creates what psychologists call the availability heuristic. Information that comes to mind easily feels more important and true than information you have to search for. A candidate whose signs are everywhere in your neighborhood is available in your memory. That availability makes you assume they must be important or legitimate. You don't consciously think through this. Your brain just defaults to assuming that frequent information is important information.
Geographic influence also works through identity creation. People want to belong to communities and support what their communities support. Visible support through yard signs signals community values. People align themselves with those values and those candidates to maintain community belonging. That identity-based influence is deeper than rational persuasion. It's tribal and psychological rather than logical.
<h2 id="conclusion">Conclusion</h2>
Every sign signals who others believe in, and that changes outcomes more than most voters realize. The psychology of yard signs reveals that influence operates through mechanisms outside conscious awareness. Social proof, conformity, familiarity, and local validation all work together to shape decisions. A neighborhood saturated with signs for one candidate has already influenced voters before they consciously engage with policy positions or candidate records.
For campaigns, causes, and community organizers, understanding the psychology behind yard sign effectiveness explains why they remain central to strategy. It's not about the signs themselves. It's about the psychological mechanisms they activate in voters and supporters. Those mechanisms are powerful, proven, and largely automatic.
The most effective campaigns leverage these psychological truths rather than fighting them. They saturate neighborhoods with visible support. They create consensus that others can see. They trigger the psychological mechanisms that drive conformity, familiarity, and belonging. That strategic understanding transforms yard signs from simple advertising tools into behavioral influence devices.

Blog

shadcn in React Native?

I Replaced Cursor Agent with Claude Code, Here’s What Happened

I Finally Understood “Attention is All You Need” After So Long. Here’s How I Did It.

I Stopped Writing UI Code. Now I Let MCP Servers Build My Interfaces with ShadCN

Stop Using the CDK S3 Deployment Module

Common TON Development Mistakes and How to Avoid Them

How Developers Benefit from Flexible Cloud Hosting Plans

The Hidden Infrastructure Behind Modern Travel Apps

The Gaming Tech We Will See in 2026

The Secret Influence Lurking in Every Lawn

Main Menu

Follow Us

Blog

shadcn in React Native?

I Replaced Cursor Agent with Claude Code, Here’s What Happened

I Finally Understood “Attention is All You Need” After So Long. Here’s How I Did It.

I Stopped Writing UI Code. Now I Let MCP Servers Build My Interfaces with ShadCN

Stop Using the CDK S3 Deployment Module

Common TON Development Mistakes and How to Avoid Them

How Developers Benefit from Flexible Cloud Hosting Plans

The Hidden Infrastructure Behind Modern Travel Apps

The Gaming Tech We Will See in 2026

The Secret Influence Lurking in Every Lawn