Mert

TL;DR

• Build a complete CRUD data grid app using Next.js (Server Components + Server Actions), Prisma ORM (type-safe DB access), and AG Grid (inline editing, sorting, virtual scroll).
• Server Components fetch data on the server; Server Actions let clients call server-side functions like regular async functions — no REST API needed.
• Prisma provides auto-generated TypeScript types from your schema, making DB queries fully type-safe.
• AG Grid’s applyTransaction API enables optimistic updates — the UI updates instantly, and rolls back on failure.

Key Concepts

Next.js: Server Components & Server Actions

Server Components run on the server and can call business logic directly:

// app/page.tsx — Server Component
export default async function Home() {
  const orders = await getOrders(); // Direct DB call
  return <OrderGrid orders={orders} />;
}

Server Actions let client components call server functions with a simple 'use server' directive:

'use server';

export async function createOrderAction(input: CreateOrderInput) {
  return createOrder(input);
}

The client calls it like a normal function — Next.js handles the HTTP layer internally.

Prisma ORM: Type-Safe Database Access

Define your schema in Prisma’s DSL, then generate a fully typed client:

model Order {
  id    Int @id @default(autoincrement())
  price Int
  qty   Int
}

CRUD operations are concise and type-safe:

// Create
await prisma.order.create({ data: { price, qty } });

// Read with filters
await prisma.order.findMany({
  where: { price: { gt: 1000 } },
  skip: 20,
  take: 20,
});

// Update
await prisma.order.update({ where: { id }, data: { price, qty } });

// Delete
await prisma.order.delete({ where: { id } });

AG Grid: Optimistic Updates with applyTransaction

The optimistic update pattern — update the UI first, then sync with the server:

async function handleCreate() {
  const tempId = -Date.now();
  const tempRow: Order = { id: tempId, price: 0, qty: 0 };

  // Optimistic: add temp row immediately
  gridRef.current?.api.applyTransaction({ add: [tempRow] });

  try {
    const created = await createOrderAction({ price: 0, qty: 0 });
    // Replace temp row with real data
    gridRef.current?.api.applyTransaction({
      remove: [tempRow],
      add: [created],
    });
  } catch {
    // Rollback on failure
    gridRef.current?.api.applyTransaction({ remove: [tempRow] });
  }
}

The same pattern applies to update (rollback cell value on failure) and delete (re-add the row on failure).

Code Examples

Setting up the AG Grid component with inline editing and a delete button:

const colDefs: ColDef<Order>[] = useMemo(() => [
  { field: 'id', editable: false, sort: 'asc' },
  { field: 'price', editable: true },
  { field: 'qty', editable: true },
  {
    headerName: '',
    width: 100,
    cellRenderer: (p: ICellRendererParams<Order>) => (
      <button onClick={() => handleDelete(p.data!)}>Delete</button>
    ),
  },
], []);

<AgGridReact
  ref={gridRef}
  rowData={orders}
  columnDefs={colDefs}
  getRowId={(p) => String(p.data.id)}
  onCellValueChanged={handleCellValueChanged}
/>

This is a summary of my original 3-part series written in Korean.
For the full articles with step-by-step setup instructions, check out the originals:

👉 Part 1: Next.js Basics
👉 Part 2: Prisma ORM Setup & CRUD
👉 Part 3: AG Grid & Optimistic Updates

Hi all I am new here.

Let me please share not even a story (“success story”) but just a quick situation and quick satisfaction with result.

I’m a Java developer with 10+ years of enterprise experience.
But every time I needed to write down something during work, it was a pain.

So I built Quick Notes. A Chrome extension that opens instantly, saves locally, and has no bullshit.

What it does:

Click the icon, type, hit Ctrl+Enter, done. Notes are stored in your browser. No cloud, no login, no tracking.

Tech stack:

Pure JavaScript, Storage API. That’s it.

Honest part:

I used AI to help with the frontend code — I’m a Java developer, so JavaScript isn’t my main thing. But I reviewed everything, made sure it works, and it does exactly what I need. The extension is solid, and that’s what matters.

So let me describe implementation a bit. I needed something that:

Opens in under a second
Works offline
Doesn’t ask for an account
Stores notes locally
Has my personal UI styling (I use same for all my products)

None of the existing tools gave me that without bloat. So I solved this one exact problem at least just for me. I started using it yesterday and it’s a pleasure because it solves exact tiny inconvenience I had.

Next step:

I’m planning to publish it on Chrome Web Store. The review process is the only thing I’m nervous about. If you’ve been through it, let me know — what are the common rejections?

Links:

GitHub repo: https://github.com/ievgeniipodovinnikov/quick-notes

Star if you find it useful. Chrome Store link coming soon.

Sincerelly,
Ievgenii

https://ievgenii.com

TL;DR

• AntiGravity is a VS Code fork by Google DeepMind, built for agentic coding with enhanced AI agent features.
• The .agent folder lets you define Rules, Skills, and Workflows to give your AI agent project-specific context.
• Rules set coding conventions the agent must follow (e.g., architecture, style guides). Use always_on sparingly — prefer model_decision to avoid context overload.
• Skills teach the agent how to solve specific problems using specific tools (e.g., using GitHub MCP to fetch commit history).
• Workflows automate repetitive command sequences (e.g., install → type-check → build) and can be triggered via slash commands.

Key Concepts

Rules: Coding Standards for Your Agent

Rules live in .agent/rules/ and define principles the agent must follow. Each rule file uses frontmatter to control when it activates:

---
trigger: always_on
---
# Always-on rules (use sparingly)

---
trigger: model_decision
description: Backend rules for Server Actions, Prisma, Auth, etc.
---
# Contextual rules — agent decides when to apply

Keep rules concise. If the agent wouldn’t make a mistake without the rule, leave it out — too much context causes hallucinations.

Skills: Teaching Your Agent How to Solve Problems

Skills (.agent/skills/) define what tool to use and how to use it for specific scenarios.

---
name: git-history
description: Uses GitHub MCP to fetch and summarize recent commit history.
---

## When to Use
- "What changed recently?"
- "Summarize recent commits"

## Steps
1. Identify repo owner/name
2. Call `list_commits` via GitHub MCP (perPage: 5-10)
3. Optionally call `get_commit` with `include_diff: true`
4. Summarize changes in categories (features, fixes, refactors)

Workflows: Automating Repetitive Tasks

Workflows (.agent/workflows/) chain commands together:

---
description: Build & type-check workflow
---

1. Install dependencies
// turbo
'pnpm install'

2. Type check
// turbo
'pnpm check-types'

3. Build
// turbo
'pnpm build'

The // turbo comment tells the agent to run the command automatically without user approval.

This is a summary of my original post written in Korean.
For the full article with detailed explanations and more examples, check out the original:

👉 Read the full post on my blog

Starting a side project is exciting — until you realize how much time you waste on things that aren’t coding. Window management, context switching, losing track of API costs, doomscrolling when you should be shipping.

After launching three side projects over the past year, these are the Mac apps that genuinely kept me moving. No fluff, no affiliate links — just tools that earned their spot on my dock.

1. Raycast — The Launcher That Replaces Five Other Apps

If you’re still using Spotlight, you’re leaving speed on the table. Raycast is a launcher, clipboard manager, snippet expander, and window manager rolled into one. I use it to quickly search docs, switch between projects, and run custom scripts. The free tier covers everything most side project devs need.

🔗 raycast.com

2. Warp — A Terminal That Actually Feels Modern

Warp rethinks the terminal from scratch. Command blocks, AI-powered command search, and real collaboration features make it feel like a terminal built in 2026 instead of 1985. If your side project involves any CLI work (and it does), Warp cuts friction immediately.

🔗 warp.dev

3. Rectangle — Window Management Without the Learning Curve

When you’re juggling a code editor, browser, terminal, and design tool, you need snapping that just works. Rectangle gives you keyboard-driven window management for free. Drag to edges or use shortcuts — either way, your screen stays organized without thinking about it.

🔗 rectangleapp.com

4. TokenBar — Know What Your AI Tools Actually Cost

If your side project uses any LLM APIs — ChatGPT, Claude, Gemini — TokenBar sits in your menu bar and tracks token usage and costs in real time. I didn’t realize how fast my API spending was climbing until I could literally see it ticking up. At $5 lifetime, it paid for itself on day one.

🔗 tokenbar.site

5. CleanShot X — Screenshots and Screen Recording Done Right

Every side project needs screenshots eventually — for your landing page, docs, bug reports, or social posts. CleanShot X handles screenshots, annotations, scrolling captures, and screen recording in one tool. The built-in editor saves you from opening Figma for quick mockups.

🔗 cleanshot.com

6. Monk Mode — Block the Feeds, Keep the Apps

This one changed my shipping velocity more than any code tool. Monk Mode doesn’t block entire apps like traditional blockers — it blocks the feeds inside apps. So you can still use Twitter for customer support or Reddit for research, but the infinite scroll is gone. When I’m in a deep coding session on my side project, this is what keeps me there.

🔗 mac.monk-mode.lifestyle

7. Bear — Markdown Notes That Stay Out of Your Way

For side project planning, I don’t need Notion’s complexity. Bear gives me fast, beautiful markdown notes with tagging, search, and sync across devices. I keep a running doc for each project — ideas, decisions, bugs — and Bear makes it effortless to capture thoughts without breaking flow.

🔗 bear.app

Honorable Mentions

• Homebrew — if it’s not installed yet, stop reading and go install it: brew.sh
• MetricSync — I use this on my iPhone to snap photos of meals instead of manually logging calories. When you’re deep in side project mode, health tracking is the first thing to slip. $5/mo and way less friction than MyFitnessPal. metricsync.download
• Hand Mirror — one-click webcam check in your menu bar before standups or demo calls

The Pattern

Notice something? Most of these tools are small, focused, and stay out of your way. The best side project toolkit isn’t about power features — it’s about removing friction so you can spend your limited evening hours actually building.

What’s in your side project toolkit? Drop your picks in the comments 👇

In my previous post, I shared why GA4 felt painfully overkill for my Angular SPA.

Many of you replied asking: “Okay, but what actually makes Pulzivo different from Plausible, PostHog, Fathom, or Mixpanel?”

So I created the Why Pulzivo page. Here’s the honest story behind it, from a developer’s perspective.

The Frustrating Choice Most Tools Force On Us

You basically have two types of tools today:

• Web analytics tools → Great for page views, bounce rate, traffic sources, but they become useless once the user logs in.
• Product analytics tools → Excellent for funnels, feature usage, and retention, but they’re heavy, expensive, and overkill for landing pages or content sites.

What if you’re building a SPA where the website is the product?

Or you’re a solo founder running both a marketing site and a SaaS?

Most people end up with two scripts, two dashboards, two bills, and double the privacy/compliance stress.

I got tired of that compromise.

Pulzivo’s Core Idea: One Lightweight Script That Does Both Well

With just one ~5KB script tag, Pulzivo gives you:

Web Analytics (great for content sites, blogs, agencies)

• Page views, sessions, bounce rate
• Time on page, traffic sources & referrers
• Geography and device stats

Product Analytics (great for SaaS and logged-in experiences)

• Custom events & click tracking
• Onboarding funnels and drop-offs
• Feature usage, retention, and returning users

All from the same script. No more choosing sides.

How Pulzivo Compares (Developer View)

Here’s the table I put on the site:

The real wins for me as a developer:

• Truly cookieless by default → no ugly consent banners in most cases
• Built specifically for modern SPAs (Angular, React, Vue, Next.js…)
• Almost zero configuration needed

Who Is Pulzivo Actually For?

• Indie hackers & solo founders who hate bloated tools
• Developers frustrated with GA4 in single-page apps
• Small teams that need both marketing data and product insights
• Anyone who values speed, simplicity, and real privacy

Ready to Try It?

If this resonates with you, give it a spin.

Start free forever — 10K events per month, no credit card required.

👉 Try Pulzivo Now

Follow the journey on X: @Pulzivo

What do you think?

Are you currently using separate tools for web vs product analytics?

What’s your biggest analytics headache right now?

Next up: A deep dive into reliable form tracking in Angular SPAs (the 6-event funnel that actually works).

Let me know in the comments!