DEV Community: Abhi Varde

I Built an AI Agent That Fixes One of the Most Ignored Parts of Next.js Apps

Abhi Varde — Tue, 27 Jan 2026 08:45:37 +0000

Most Next.js apps still ship with the default 404 page.

Not because developers don’t care but because it’s one of those things that always gets pushed to “later”. The default page works, users rarely see it, and there’s always something more important to ship.

That’s exactly the gap I wanted to solve with Nothify.

Nothify is an AI-powered agent that looks at your Next.js repository, understands how it’s built, and generates a custom 404 page that actually matches your project then opens a pull request for you.

No setup. No config. No copying templates.

👉 Live demo: https://nothify.abhivarde.in

The idea

I kept seeing the same pattern:

Great products
Clean design systems
Thoughtful UX
…and a completely default 404 page

Fixing this manually sounds simple, but in reality you still need to:

Check whether the project uses App Router or Pages Router
Match TypeScript or JavaScript
Follow the existing styling approach (Tailwind, MUI, CSS Modules, etc.)
Place the file in the correct location
Make sure you’re not overwriting an existing 404

So instead of another template gallery, I asked a different question:

What if this entire thing could just happen automatically?

That’s how Nothify started.

What Nothify does (in plain terms)

You paste a Next.js GitHub repository link.

Nothify then:

Analyzes the repo (router, language, styling)
Generates a custom 404 page that fits that setup
Lets you preview the code and the UI in the browser
Either downloads the code or opens a clean GitHub PR for you

That’s it.

You don’t need to sign in just to try it.
And if you do connect GitHub, everything stays stateful no reselecting templates after OAuth.

Preview before you commit

One thing I really cared about was trust.

AI-generated code shouldn’t be a black box, especially when it’s about to touch your repo. So Nothify includes a live code preview powered by Sandpack.

You can:

See the generated files
Inspect the code
View a live preview side-by-side
Close it and decide what to do next

Nothing gets pushed unless you’re happy with it.

Works with real-world setups

Nothify isn’t locked to a single stack.

It supports:

Next.js App Router and Pages Router
TypeScript and JavaScript
Tailwind CSS, MUI, styled-components, Emotion
Bootstrap, CSS Modules, styled-jsx, or plain CSS

It also handles:

Repos you own
Repos you don’t own (auto-forks before PRs)
Private repositories via GitHub OAuth
Existing 404 pages (with conflict detection)

This wasn’t about demos, it was about handling the messy reality of real projects.

Templates, but not just templates

Right now, Nothify includes five 404 templates:

Minimal
Centered
Illustrated
Simple
Elegant

Each one supports light and dark themes, and you can preview them before generating anything.

Recently, I started leaning more into visual character over heavy animation, especially for the illustrated template adding expressive backgrounds and subtle overlays that still feel production-safe.

The goal isn’t flashiness.
It’s to make the page feel intentional.

Under the hood (lightly)

Groq powers the AI code generation
Vercel AI SDK wires the AI workflow
Appwrite handles GitHub OAuth securely
Sandpack runs previews entirely in the browser
Next.js 16, Tailwind, and shadcn/ui power the UI

I’ve intentionally kept the architecture boring where it should be boring — and flexible where it matters.

Why I think this matters

This project isn’t really about 404 pages.

It’s about AI agents that do small, useful things end-to-end:

Understand context
Generate correct code
Let humans review
Integrate cleanly with existing workflows

No dashboards.
No prompts to tweak.
Just: “Here’s something your app should probably have want me to fix it?”

What’s next

I’m currently working on another project focused on solving real problems for Indian vendors, so Nothify is iterating steadily rather than explosively.

That said, I plan to:

Add more polish and interaction to templates
Expand agent capabilities beyond 404 pages
Keep improving detection and edge cases

If you try it and have feedback, I’m very open to it.

Try it out

If you have a Next.js repo lying around with a default 404 page, give it a shot:

👉 https://nothify.abhivarde.in

No signup required. Just paste a repo and see what happens.

[Boost]

Abhi Varde — Thu, 16 Oct 2025 06:54:51 +0000

My Sync UI Journey: From Navratri 2024 to Navratri 2025 🎉

Abhi Varde ・ Oct 1

#productivity #opensource #uikit #devtool

Sendra 🌱 Monitoring Appwrite Sites Deployments with Next.js, Vercel & Resend

Abhi Varde — Fri, 03 Oct 2025 08:05:38 +0000

A funny thing happened while I was scrolling Twitter/X the other day.

On one side, I was noticing the gap between Vercel and Appwrite deployments (Vercel gives you nice deployment emails… Appwrite doesn’t).

On the other side, I saw the #ResendMCPHackathon kickoff tweet. 🚀

That’s when a little spark lit up in my brain:
“Wait… why not use Resend for email alerts, fill this tiny gap, and also build something fun for the hackathon?”

And that’s how Sendra was born. 🌱

What Sendra Does 🛠️

Basically, it’s Vercel-style deployment emails… but for Appwrite Sites.

✅ Checks your Appwrite deployments every 5 mins
✅ Sends email alerts only for new failed deployments (no spam for old issues)
✅ Has a simple dashboard to view deployment history at a glance

That’s it. Clean, lightweight, useful.

Try it live → sendra.vercel.app
Code → [github.com/AbhiVarde/sendra (https://github.com/AbhiVarde/sendra)
MCP Version (for hackathon) → github.com/AbhiVarde/sendra-mcp

Key Features ✨

🔑 Secure GitHub Authentication - log in with your GitHub account
📊 Real-time Dashboard - see the latest deployment status
⏱️ Automated Monitoring - cron job checks every 5 minutes
📧 Smart Email Alerts - only new failures trigger emails
🔒 Encrypted API Keys - your Appwrite credentials stay safe
⚡ Instant Setup - just add Project ID, API key, region + email

How the Stack Fits Together 🧩

Appwrite → database stores history + settings, functions check deployments
Resend → sends the email alerts (API in prod, MCP in hackathon mode)
Next.js + Vercel → frontend + hosting
GitHub OAuth → for secure login
Base64 encryption → for API key security

Super lightweight, but surprisingly reliable.

Screenshots 📸

Why I Built It 🤔

Honestly? Out of curiosity + timing.

I already wanted a smoother way to monitor Appwrite Sites deployments. Then, while scrolling Twitter/X, I saw the #ResendMCPHackathon kick off.

It felt like the perfect overlap:

Scratch my itch for deployment alerts
Learn MCP
Ship something small but useful
And yes… maybe win some hackathon swag 😉

Sometimes, that’s all you need.

My Other Side Projects 🌍

Sendra isn’t my first rodeo. I love building small tools and sharing the journey:

🪩 Sync UI – an animated MUI components library, now with 70+ components & templates
💡 Idea Tracker – manage your ideas with full Appwrite stack + AI expansion
🛠️ ErrExplain – turn cryptic error messages into clear explanations

Each project scratches a different itch. Sendra is just the latest little plant in my growing garden of side projects. 🌱

Final Thoughts ❤️

Sendra is tiny. It’s not some massive SaaS or startup.
But it solves a problem I personally had, and maybe it helps other Appwrite devs too.

If you try it out, let me know! I’d love feedback. And if you’re on Twitter/X, feel free to share your thoughts there as well → @varde_abhi

PS: If you find it useful, a GitHub star or retweet means the world.

ErrExplain: Turning Confusing Errors into Clear Fixes 🚀

Abhi Varde — Fri, 03 Oct 2025 06:06:48 +0000

Every developer knows the feeling:
You ship some code, hit refresh, and boom - an error message stares back at you like it’s written in an alien language. 👽

You copy-paste it into Google. Open 10 tabs. Jump between Stack Overflow posts from 2014. Still confused. Still frustrated.

That pain is where ErrExplain was born.

Why I Built ErrExplain 🤔

I joined the Appwrite Sites Hackathon 2025 with a simple goal:
👉 Make error messages easier to understand and easier to share.

Because let’s be honest - debugging should feel like solving puzzles, not running in circles.

What ErrExplain Does 🛠

ErrExplain has 3 main superpowers:

Explains errors in plain English → No jargon, just clarity.
Suggests fixes → Practical, real-world solutions to try right away.
Generates a shareable link → So you can send the error analysis to a teammate in seconds.

Basically, it’s like having a helpful debugging buddy who doesn’t roll their eyes when you ask, “But why isn’t it working?” 😅

Building It 🧑‍💻

The stack that powered ErrExplain:

Frontend → Next.js 15, React 19, Tailwind CSS 4
Backend → Appwrite Functions + Database, Node.js, node-appwrite
AI → Groq (Llama 4 Maverick) via Vercel AI SDK
Extras → Zod (validation), Sonner (toasts), Lucide React (icons), Recharts (charts)
Deployment → Appwrite Sites 💚

Simple, modern, and fully serverless.

The Journey 🌍

ErrExplain didn’t make it to the hackathon winners’ list, but here’s what happened instead:

→ 50+ upvotes on Peerlist
→ 600+ views, 150+ visitors, 25+ countries
→ Encouraging feedback from the Vercel AI SDK team, the Appwrite community, and devs on Twitter/X

And honestly? That kind of love felt like a win in itself. 🙌

Highlights I’m Proud Of ✨

Built in just a few weeks during the hackathon sprint
First time combining Vercel AI SDK + Appwrite Functions in a real-world project
Developers actually using it and telling me it saved them time
Showcased in the Vercel community - which was surreal for me 🚀

What’s Next 🔮

I’m excited to keep improving ErrExplain!
This was just version 1.0 - the potential is way bigger.

Final Thoughts ❤️

Building ErrExplain taught me two things:

Hackathons aren’t only about winning - they’re about building, learning, and sharing.
If you solve your own frustration, chances are others will thank you for it too.

So thank you to Appwrite for organizing the hackathon, to Vercel for the amazing AI SDK, and to everyone who supported ErrExplain with upvotes, shares, or feedback. 💚

→ Try ErrExplain here
→ Source Code on GitHub
→ Vercel Community Showcase
→ Follow me on Twitter/X

Here’s to fewer headaches and clearer errors for all of us. 🚀

My Sync UI Journey: From Navratri 2024 to Navratri 2025 🎉

Abhi Varde — Wed, 01 Oct 2025 09:03:06 +0000

Last year, during Navratri 2024, I launched a little side project called Sync UI.
Today, Navratri 2025, it officially turns 1 year old. 🥳

This is the story of how Sync UI went from an idea in my head → to 70+ free animated components → to 3 ready-made templates → to being used and loved by developers across 80+ countries. 🌍

Why I Built Sync UI 🤔

At my company, we mostly used MUI (Material UI) for projects. And honestly? MUI is great… but whenever I wanted some animated components (fancy buttons, modals, cards, etc.), I had to build them from scratch.

Meanwhile, my Twitter/X feed was flooded with cool TailwindCSS + Framer Motion libraries. Every week, someone dropped a new “animated components” pack built with Tailwind, shadcn, or both.

But for MUI? Nothing. 😅
No animated components library. No “plug-and-play” UI kit. Just vibes.

So I thought: “Why not build one myself?”
I didn’t know how it would happen, but I had a reason. And sometimes, a reason is enough.

The First Steps 🐣

I went on a little GitHub adventure-checking out UI libraries, folder structures, and design patterns. Then, I started experimenting:

Take a Tailwind + Framer Motion component.
Try to replicate it with MUI + Framer Motion.
Fail. Retry. Fail again. Somehow succeed. 🎯

At first, it was hard to make things look exactly the same with a totally different utility system. But slowly, I found my groove and even started adding my own little uniqueness into the components.

Before I knew it, I had built around 10 components, each with 3-4 variations → almost 30-40 ready-to-use components.

Naming the Baby 👶

“What should I call this thing?”

I brainstormed, searched domains, rejected names that were already taken… until finally, I landed on:

Sync UI - a library where UI components stay in sync with design, motion, and developer experience.

Perfect.

And in true Gujarati style, I launched it during the best festival ever: Navratri 2024! 🪔💃

Growing Month by Month 🌱

After launch, I promised myself: “Every month, I will add something new to Sync UI.”
And I kept that promise.

Each month: new components, new features, new polish.
You can actually see this consistency in the changelog.

I shared updates with friends, office mates, LinkedIn, and Twitter. The response? Amazing. The love? Real. The motivation? Sky high. 🚀

Free or Paid? 💸

All the components were free.
Some friends told me: “Bro, why free? Others are selling theirs.”

But honestly, I didn’t build Sync UI for money. I built it for developers who just want to copy-paste something cool into their projects and move on.

That said, money is still important. So instead of charging for components, I introduced templates:

Portfolio template
SaaS template
Startup template

Each priced at just $29 (super low compared to the market).

I haven’t made sales yet-but the templates actually opened doors for freelance work. People saw my work, loved the quality, and hired me. That was a huge win. 🏆

The Highlights ✨

Here’s what Sync UI has achieved in just 1 year:

70+ free animated components
3 ready-made templates (only $29 each)
Searchable components for quick access
Newsletter integration (Appwrite + Resend) for new drops
75+ GitHub stars ⭐ (including devs from Google, Shopify, Appwrite, Vercel)
8K+ views, 2K+ visitors, 80+ countries 🌍 and still growing

Not bad for a one-person passion project, right?

What’s Next 🚀

Sync UI is still just getting started. The vision is bigger:

More polished templates
More animated MUI components
More integrations to make developers’ lives easier

And most importantly, staying consistent. Because if there’s one thing this journey taught me: discipline beats motivation.

Got it 👍 I’ll weave those hopes into the closing section so the blog ends on a heartfelt + lighthearted note (just like your Idea Tracker one). Here’s the updated ending with your thoughts included:

Final Thoughts ❤️

Building Sync UI has been one of the most rewarding experiences of my life. It gave me consistency, opportunities, and connections I never imagined.

If you’ve been following, starring, or just copy-pasting from Sync UI-thank you.
If not, maybe now’s the time 😉

🔗 GitHub Repo
🔗 Website
🐦 Twitter/X

Here’s to the next year of Sync UI. 🥂
Hopefully with more stars ⭐, some template sales 💸, and maybe even a chance to work with one of the best product-based companies out there-companies who believe I’m not just a builder, but also a real thinker. ✨

[Boost]

Abhi Varde — Wed, 10 Sep 2025 08:02:58 +0000

Matej Bačo for Appwrite

May 19 '25

Announcing Appwrite Sites: The open source Vercel alternative

#opensource #webdev

Comments 2

4 min read

🌱 My Idea Tracker Journey with Appwrite (from “Hello World” to Hoodie!)

Abhi Varde — Thu, 28 Aug 2025 11:48:49 +0000

Hey everyone 👋 This is my very first post here on Dev.to! I wanted to share something close to my heart - the journey of building Idea Tracker and how it unexpectedly brought me lots of love from the community… and even an Appwrite hoodie! 🧡

🚀 How It All Started

I’d always wanted to try out Appwrite, but never really got around to it. Then one day, I saw a tweet about Appwrite Sites (kind of like an alternative to Vercel) and that instantly grabbed my attention.

That weekend, I decided: Okay, time to finally explore Appwrite.
I followed the React quickstart blog (since I’m a React/Next.js dev) and step by step, I built a small app with:

🔐 User auth + sessions
⚡ Real-time DB operations
🛡 Secure permissions (users own their own ideas)

It worked! 🎉 But I didn’t want to stop there…

🌟 The Birth of Idea Tracker

What started as following a guide turned into a full project. I began adding my own features:

🍀 Tags & Categories
🥒 Dynamic search & filters
🌱 User profiles with stats
🧩 Smooth UI with Tailwind + Framer Motion

At first, I deployed it on Vercel (Appwrite Sites was in high demand and not open yet 😅). Then I shared it on X (Twitter) and with the community.

The response? Incredible ❤️

Lots of appreciation for the UI
Small bug reports
Suggestions like editing ideas, OAuth signups (Google/Discord), and a dark/light theme

So I went back, built those features, and shared again.

🎁 The Game Changer: Appwrite Sites Access

I kept saying in my posts: “I really wish I could deploy on Appwrite Sites too…”

One day, out of the blue, I got a DM from an Appwrite core team member. They gave me early access to Appwrite Sites 🚀 - which at the time wasn’t open to everyone. That moment was huge for me.

From then on, Idea Tracker was running on:

Auth ✅
Database ✅
Sites ✅

…and I was only getting started!

🌍 Exploring More (Lingo.dev + AI)

Around that time, I discovered Lingo.dev, an AI-powered localization service. I thought: Why not make Idea Tracker multilingual?

It wasn’t easy (I even switched the whole project from React to Vite just to integrate it properly), but eventually it worked! The Lingo.dev team themselves noticed, liked, and reposted my work. That gave me so much encouragement.

Then came AI expansion ✨ I integrated Gemini AI so users could expand their ideas. The community loved it, but I accidentally leaked my API key in the URL 🙈.

Guess what? A kind stranger from Switzerland DMed me about it. He suggested: “Why not use Appwrite Functions to secure it?” Boom 💡 That pushed me to finally explore Appwrite Functions, and it worked perfectly.

📧 Completing the Stack

By now, Idea Tracker was already using:

Auth
Database
Functions
Storage
Sites

Only Messaging was left. So I explored the docs, watched YouTube tutorials, and finally decided: let’s add email notifications.

I built a system where users could choose what notifications they want (new idea added, AI expansion, weekly summaries). Functions + Messaging handled it beautifully.

And that was the moment I realized: Idea Tracker now uses the entire Appwrite stack. 🎉

🧡 Hoodie Moment + Recognition

All this work and community love led to something really special:

Idea Tracker was featured in Appwrite’s July 2025 Product Update.
I received an Appwrite Community Recognition Award.
And yes… the Appwrite hoodie arrived! 🧡 (my tweet)

That was surreal. A hoodie might sound small, but for me it represented the kindness of the Appwrite team and community.

📊 Where It’s At Today

Here’s what Idea Tracker has achieved so far:

5K+ views
500+ visitors
65+ countries
50+ upvotes on Peerlist

And it now includes:

Core features (auth, CRUD, privacy, real-time sync)
Extended features like search, tags, dark/light mode, OAuth login, multilingual support, AI expansion, notifications, discover page, GitHub links, and much more.

💚 Thank You

What started as “just following a tutorial” has grown into one of my favorite projects ever.

I’m deeply thankful to:

The Appwrite team for building such an amazing open-source platform (and for noticing my little project).
The community for feedback, encouragement, and love at every step.
Kind strangers (and even Lingo.dev & Gemini folks) who nudged me in the right direction.

Idea Tracker is free & open source, and I’d love for you to check it out:

🌐 Preview: idea-tracker-v2.appwrite.network
💻 GitHub: github.com/AbhiVarde/Idea-tracker
🔗 Peerlist: peerlist.io/abhivarde/project/idea-tracker
📝 Featured in Appwrite’s July 2025 Update

Thanks for reading my journey. This is just the beginning 🌱

— Abhi Varde