Forem: Varun Krishnan

How to Create Product GIFs for Your Landing Page (No Video Editing Required)

Varun Krishnan — Fri, 02 Jan 2026 18:24:08 +0000

The Brochure vs. The Demo

Imagine walking into an electronics store.
You see a sleek new laptop.
Do you just stare at the turned-off screen? No. You touch the trackpad. You open a window. You want to see it work.

Your landing page is that store.
But most SaaS landing pages are just... brochures.

They have beautiful, high-res, completely static screenshots. They force the user to read about the features instead of seeing the features.

And reading is hard work.

The 3-Second Rule
You have roughly 3 seconds to convince a visitor to stay on your site.

Static Image: The brain has to process the text, look at the UI, map the text to the UI, and simulate the interaction mentally. Cognitive load: High.
GIF/Video: The brain sees movement. It instantly understands "Clicking X does Y." Cognitive load: Low.
Motion is a cheat code for attention.

Why Not Just Use Video?
"Okay," you say. "I'll just embed a YouTube video."

You could. But videos are heavy. They require a click to play. They have sound (risky). They take over the experience.

GIFs are the sweet spot.

Autoplay: No click needed.
Silent: Safe for work.
Looping: Reinforces the core value proposition.
Lightweight: Loads faster than a 4K video embed.

The Problem with GIF Creation
Creating a polished product GIF used to be painful.

Record screen (OBS/Loom).
Import to Premiere/After Effects.
Add a device frame overlay.
Mask the video to fit the screen.
Add a background.
Export and pray the file size isn't 50MB.
Most developers (and even designers) don't have time for this. So they settle for static screenshots.

The Shotframe Solution: GIFs in the Browser
We added GIF support to Shotframe to solve exactly this problem. We wanted the polish of After Effects with the speed of a screenshot tool.

How it works:

Record Your Screen: Use any tool to grab a short clip of your key feature. (Keep it under 5 seconds for best results).
Drop into Shotframe: Upload your video file just like an image.

Frame It: Choose a premium device frame (iPhone, MacBook, Browser). Shotframe handles the masking automatically.

Style It: Add a custom gradient background (use BlendIt to match your brand colors!).
Export: Download a highly optimized GIF ready for your landing page.

Best Practices for Product GIFs
If you're going to use GIFs, do it right:

Keep it Short: 3-5 seconds max. Focus on ONE interaction.
Start with Action: Don't have 2 seconds of a stillness at the start. Movement should happen immediately.
High Contrast: Make sure the cursor and the button clicks are visible.
Optimization: Don't upload a 20MB GIF to your hero section. Use Shotframe’s export settings to balance quality and size.
Conclusion
Your product is dynamic. Your marketing should be too.
Stop letting your hard work sit still. Make it move.

[Try the Shotframe GIF Maker →]

How to Make Product Mockups That Don't Look Like Templates

Varun Krishnan — Thu, 01 Jan 2026 15:59:59 +0000

Stop using generic mockup backgrounds. Learn how to create custom, brand-aligned mockups (and GIFs) directly from your browser. No Figma required.

The Problem With Modern Mockups
Scroll through Dribbble, Product Hunt, or any SaaS landing page. You’ll see the same thing:

A generic MacBook or iPhone frame.
A "mesh gradient" background (usually purple or blue).
A shadow that looks slightly fake.
It’s the "Startup Starter Pack." And because everyone uses the same templates, no one stands out.

If you’ve spent weeks building a unique product, wrapping it in a generic mockup kills the vibe instantly.

Your product deserves better.

Why Context Matters (And Why Templates Fail)
A mockup's job isn't just to frame your screenshot. Its job is to extend your brand.

When you use a random gradient template, you are clashing with your product's actual design.

The Pro Move: Your background colors should be extracted from the product screenshot itself.
The Result: Perfect color harmony. The background feels like an extension of the UI, not a wrapper.

Method 1: The "Figma Workflow" (The Hard Way)
You can do this manually, of course.

Take a screenshot.
Open Figma.
Import screenshot.
Use the Eyedropper tool to pick 3-4 dominant colors.
Create a rectangle layer behind the image.
Apply a linear or radial gradient using those colors.
Add a device frame (search community files for a mockup).
Add drop shadows manually.
Export.
Time: ~15-20 minutes per image.
Result: Good, but slow.

Method 2: The Shotframe Workflow (The Fast Way)
We built Shotframe to automate the "Pro Move."

Step 1: Upload Your Screenshot
Drop your image into the browser. No login needed.

Step 2: Auto-Match the Background
Instead of picking a random color, use a tool like BlendIt to generate a gradient directly from your screenshot. Upload that gradient as your background in Shotframe.

Now your background matches your UI perfectly.

Step 3: Choose Your Device
Select from premium device frames (Safari Dark, iPhone 15, Chrome Light). It wraps your screenshot automatically with perfect shadows.

Step 4: Go Beyond Static (New Feature)
Static images are fine. Motion is better.

Shotframe now lets you export as GIF.

Show a scrolling capture.
Show a UI interaction.
Show a workflow.
This turns a "picture of an app" into a "demo of an app."

Why GIFs Convert Better Than Images
On a landing page, you have about 3 seconds to explain what your tool does.

Screenshot: The user has to read the UI to understand it.
GIF: The user sees the UI working.
It builds trust. It proves the software is real. It catches the eye.

Creating Your First Custom Mockup
Go to Shotframe.xyz.
Drop your image.
Tweak the background (or upload your custom BlendIt gradient).
Hit Export.
Stop letting generic mockups lower your product's value. Make it look as premium as the code behind it.

[Create a Free Mockup Now →]

How to Create a Gradient from Any Photo (Step-by-Step)

Varun Krishnan — Wed, 31 Dec 2025 19:40:58 +0000

Learn how to extract colors from any photo and turn them into beautiful gradients. Stop guessing hex codes—let your photos pick the perfect palette.

Stop Guessing Hex Codes. Let Your Photos Decide.
Every designer has been here:

Open a gradient generator. Pick random colors. Hate it. Repeat 47 times. Settle for something "fine."

There's a better way.

Instead of inventing colors from scratch, extract them from photos you already love. Sunsets, coffee cups, product shots—they all contain palettes that already work together.

Why? Because nature figured out color harmony millions of years ago. We're just borrowing it.

This guide shows you how to turn any photo into a usable gradient in under 60 seconds.

Why Photos Make Better Palettes
Most gradient generators give you "trending" palettes. The problem? Everyone uses the same ones.

That's why every SaaS landing page has the same purple-blue mesh gradient.

Photos solve this:

Colors Already Harmonize

Colors in a photo exist together naturally. A sunset has warm oranges, soft pinks, and deep purples—all in perfect balance. You didn't pick them. Light did.

"Nature Is Never Wrong"

An old design principle. Flowers, landscapes, street scenes—colors that appear together in real life just work. No color theory degree required.

Unique to Your Brand

If you pull colors from YOUR product shot or YOUR office photo, the gradient is instantly tied to your brand. Not a trending palette. Yours.

Step-by-Step: Photo to Gradient
Here's the simple workflow:

Step 1: Choose Your Photo

Pick something with colors you like:

Product screenshot (brand-aligned)
Landscape (natural, calming)
Street photography (urban, moody)
Even a coffee cup on your desk
The best photos have a clear color mood. Avoid images with too many competing colors.

Step 2: Upload to a Color Extraction Tool

Drop your image into BlendIt (or similar tool).

It automatically detects the dominant colors and arranges them into a gradient.

No eyedropper. No manual picking. Done in seconds.

Step 3: Adjust If Needed

Sometimes the auto-pick isn't perfect. Most tools let you:

Swap colors
Adjust positions
Change gradient style (mesh, linear, radial)
Tweak until it feels right.

Step 4: Add Texture (Optional)

Flat gradients can look sterile. Adding subtle grain or noise gives depth and a premium feel.

This is popular in modern SaaS and Web3 design.

Step 5: Export

Download as PNG for landing pages and social media.

Or copy the CSS for direct use in code.

Done. 60 seconds. No guessing.

Use Cases
Where can you use photo-extracted gradients?

Landing Page Backgrounds

Hero sections need something more interesting than solid color but less busy than photos. Gradients from your product colors = perfect middle ground.

Social Media Graphics

Instagram posts, LinkedIn carousels, Twitter headers. Matching gradients make your content look cohesive.

Presentation Slides

Pitch decks and internal presentations. Stand out from the default PowerPoint templates.

Device Wallpapers

Personal touch for your phone or desktop.

Mockup Backgrounds

When showcasing your product in mockups, use a gradient from the product itself. Everything matches automatically.

Tips for Best Results
Use Photos with Clear Color Themes

A photo of a sunset works great. A photo of a busy street market? Too many colors competing.

Product Shots = Brand Alignment

Pull colors from your actual product screenshot. Your gradient will match your brand without any extra effort.

Landscapes = Natural Vibes

Mountains, oceans, forests. These give calm, organic palettes.

Experiment with Unexpected Sources

Coffee. Book covers. Album art. Some of the best gradients come from random everyday photos.

The Lazy Designer's Secret
Here's the truth:

Great color choices aren't about talent. They're about sources.

Designers who seem to have "good taste" often just steal from better sources—nature, photography, real life.

Now you can too.

Stop staring at color pickers. Stop cycling through trending palettes.

Take a photo. Extract the colors. Move on with your life.

Try It Yourself
BlendIt makes this workflow instant:

Drop any photo
Colors extracted automatically
Gradient generated with grain texture
Export PNG or copy CSS
Free to use. No account needed.

[Try BlendIt →]

The 48-Hour Button: Fighting Supabase, Google Auth, and "Scope Creep"

Varun Krishnan — Fri, 28 Nov 2025 20:19:28 +0000

I just spent 48 hours building a feature the user will never notice.
It wasn't a complex algorithm. It wasn't a 3D animation.

It was a "Sign in with Google" button.

For the past two days, the Direct Google Sheets integration—my most requested feature—was dead on arrival.

Here is the technical breakdown of why "simple" integrations are rarely simple, and how I solved the Supabase Scope conflict.

The Invisible Villain:

Supabase vs. Google Scopes
The goal was simple:

User logs into SpeakSheet.
User clicks "Export to Google Sheets."
My app writes the data to their Drive.

I am using Supabase for authentication. It handles the login flow perfectly. But when I tried to push data to the Google Sheets API, I got the same error loop:
403: Insufficient Permission

I debugged for hours. I checked the Google Cloud Console. I checked the API keys. Everything looked green.

The Realization
The issue wasn't the API; it was the Auth Token.
By default, Supabase Auth requests basic scopes: email and profile. It does not request spreadsheets (write access).

The token I held verified who the user was, but it didn't have permission to touch their files.

The Fix: Decoupling the Auth
I tried to force the scope into the initial login, but it created a messy user experience (asking for full Drive access just to sign up?).

I realized I had to change the workflow.

The New Flow:

Login: User signs in via Supabase (Standard Email/Profile scope).
App Access: User builds their prompt and generates the schema.
Integration: When they click "Export to Google Sheets," I trigger a secondary re-authentication.
This specific step asks only for the Sheets permission. It separates "Identity" from "Capability." It’s cleaner, safer, and it finally works.

From "Text" to "Logic"
Once the gate was open, I had to ensure the payload was correct.

This is the difference between ChatGPT and SpeakSheet.
If you ask a standard LLM for a "Budget Tracker," it gives you a text explanation.
I need to give you working cells.

My system prompt enforces a strict JSON schema. It flags specific fields as Formula:

{"formulaLabel":"Sum", "formula":"("=SUM(C:C))"}

Before: The API treated formulas as text strings.
Now: The API recognizes the = operator and parses logic, including complex IF statements.

What’s Next? (The boring part)
The engine is running. The integration is live.
Now, I have to build the toll booth.

I am implementing the Pricing page next.
I have chosen LemonSqueezy as my merchant of record.

Why? Because Stripe is currently not onboarding new businesses in India.
The Upside: LemonSqueezy handles the tax compliance, which lets me focus on the code.

The MVP is 90% complete.
Next update: The Mobile Responsiveness fix.

"Is this just a wrapper?" (How a Reddit Comment Changed My Roadmap)

Varun Krishnan — Sun, 23 Nov 2025 10:46:13 +0000

I launched the MVP of SpeakSheet on Reddit this week.

The concept is simple: You type a prompt, and my app generates a structured Excel file using Gemini.

The post got 2,400 views. Most feedback was standard. But one comment stopped me cold.

Is it not just a system prompt for Gemini? It is not a product... users still have to prompt. You could chat with Gemini on Google Sheets all day long and it is free.

My initial reaction was defensive.
I wrote the NextJS frontend. I set up the Supabase backend. I wrote the complex system prompts that enforce schema validation so the JSON doesn't break. Of course it's a product!

But after the sting faded, I realized he was right.
And he was also wrong.

The "Wrapper" Fallacy
Developers (including me) obsess over the tech stack. We think "value" means proprietary algorithms.

But to a user who doesn't know what an API key is, raw technology is useless.

They don't know how to write a system prompt to enforce column structures.
They don't know how to parse a file upload to extract context.
They don't want to "chat" with a spreadsheet; they want the spreadsheet to exist.
My value isn't the AI model. My value is the packaging.

SpeakSheet wraps the chaos of an LLM into a predictable, one-click interface. That is the product.

The Pivot: Listening to the Haters
The most interesting part of the comment was this line:

"You could chat with Gemini on Google Sheets all day long."

I realized I had missed a massive use case.
Right now, SpeakSheet generates a downloadable .xlsx file. But many users live in the browser. They don't want to download, open, and upload.

Because of that "hater," I am shifting my roadmap.

I am now researching Google Sheets Integration via OAuth 2.0.
The goal: A user types a prompt in SpeakSheet, and it pushes the data directly into their live Google Sheet. No downloads. No file management.

Building the Integration (The Plan)
I haven't built this yet. I am currently studying the Google Workspace API documentation.
The plan is:

Authenticate the user via OAuth 2.0.
Generate the schema via Gemini (as I do now).
Push the structured data into a new Sheet via the API.

Conclusion
If you are building a Micro-SaaS, do not fear the "Wrapper" accusation.
Power users will always say they can do it themselves. They are not your customers.

Your customers are the people who gladly pay to skip the learning curve.

And sometimes, your harshest critics give you your best feature ideas.

My Code Worked. Excel’s "Protected View" Killed It.

Varun Krishnan — Sat, 22 Nov 2025 12:07:46 +0000

I am building a Micro-SaaS called SpeakSheet. The premise is simple: You speak (or type) a prompt, and it generates a structured Excel file.

The stack is solid: NextJS, Tailwind, Supabase, and Gemini on the backend.

This week, I tackled the hardest part of the MVP: Formulas.

Teaching an LLM to understand "Profit Margin" is tricky. It knows the math, but it doesn't know the context. After hours of tweaking the JSON schema and refining the prompt, I finally got a green light in the console.

The logic was perfect. The schema was validated. I downloaded the generated file to test it.

Profit Margin: 0.

I stared at the screen. I felt that specific mix of confusion and anger that only developers know. I checked the backend logs—the calculation was correct. I checked the cell data—the formula was there.

But the cell displayed 0.

I spent an hour debugging a bug that didn't exist.

The Invisible Villain
Then, I looked at the top of the Excel window. A thin yellow bar:

Protected View: Be careful—files from the Internet can contain viruses.

Because my software generated the file programmatically, Excel didn't trust it.

It blocked the execution.
It suppressed the formula results.
It made my product look broken.
This is the reality of building Micro-SaaS. You spend 20% of your time writing logic in NextJS, and 80% of your time fighting edge cases in the tools your customers actually use.

I realized that for a user with low Excel literacy (my target audience), this is a dealbreaker. They won't click "Enable Editing." They will just churn.

I had to refactor the user journey to account for a security feature I have no control over.

The Design Pivot (feat. Gemini 3.0)
Once the logic was fixed, I looked at the UI. It was functional, but it looked like a Bootstrap template from 2015.

I am a developer, not a designer. Usually, this is where I stall.

I decided to test Gemini 3.0 Flash. I gave it a simple instruction: Design a modern, clean landing page for a SaaS that converts text to Excel.

I expected the usual generic AI slop.
Instead, it one-shot a layout that actually looked... premium. It understood whitespace. It utilized the ShadCN components correctly.

It saved me two days of CSS wrestling.

The Lesson
Building SpeakSheet has taught me that code is only half the product.

Your logic can be perfect, but if Excel's UI hides it, you failed.
Your backend can be robust, but if the frontend looks cheap, you failed.
I am building this in public to show the messy reality of shipping a product.

Follow me here for the next update.
@NotVarunKV

Watch Demo of the working here:
Demo Working

When Users Ask for 'Profit Margin' and You Realize Formulas Are Harder Than You Thought

Varun Krishnan — Thu, 20 Nov 2025 11:13:36 +0000

Formula support is working in SpeakSheet.

But getting here? That was a journey I didn't expect.

Here's what happened when I tried to teach AI the difference between "calculate total" and "calculate profit margin."

The Request That Started It All

My Brain

"This is cool, but can it add formulas? Like, I want to track revenue and cost, and have it automatically calculate profit margin."

Me: "Sure, how hard can that be?"

Model: It was, in fact, harder than that.

The Naive Approach (That Failed)

My first thought: "Just tell the AI to add formulas."

Prompt to Gemini:
User wants: "Track sales with revenue and cost. Calculate profit margin."

Generate an Excel file with a profit margin formula.

The Problem: AI Doesn't Understand Context

I realized the issue:

Gemini is great at understanding WHAT the user wants:

✅ "Calculate profit margin" → User wants ((Revenue - Cost) / Revenue) * 100

But terrible at the specifics:

❌ Should it be a decimal or percentage?
❌ Should it use cell references (B2) or column names (Revenue)?
❌ Should it calculate the value or generate a formula?

Every time I asked, I got different outputs.

Not good enough for production.

Solution (That Actually Works): Schema-Based Formula Generation

Here's what I changed:

The New Flow:

Step 1: AI analyzes user's file + prompt

When user uploads an existing Excel file and adds a prompt like:
I send to Gemini:

{
  "userPrompt": "Calculate profit margin",
  "fileSchema": {
    "columns": [
      { "name": "Revenue", "type": "number", "position": "B" },
      { "name": "Cost", "type": "number", "position": "C" }
    ],
    "rowCount": 100
  }
}

Step 2: AI returns structured schema (not formulas)
Gemini responds with:

{
  "calculation_type": "profit_margin",
  "columns_needed": ["Revenue", "Cost"],
  "output_column": {
    "name": "Profit Margin",
    "type": "percentage"
  }
}

Step 3: I generate the formula using system prompt template

This is where it gets interesting.

*The Problem I Didn't Expect: *
Excel's "Enable Editing" Button
Formulas were generating perfectly.

But when users opened the files:
"The profit margin shows 0 instead of 40%"

I tested on my machine: Worked fine.
Sent to beta tester: Shows 0.
What??

The Investigation
After an hour of debugging, I asked the beta tester to screen share.

What I saw:
They open Excel file
Yellow banner at top: "PROTECTED VIEW"
Formula cells show: 0
They click "Enable Editing"
Formula cells suddenly show: 40%
Oh no.

The Root Cause:
Excel Protected View
Excel opens files from "untrusted sources" (downloads, programmatically-generated files) in Protected View.

In Protected View:

Formulas calculate in the background ✅
But Excel shows 0 instead of the calculated value ❌
Users must click "Enable Editing" to see results ❌
This made my AI-generated files look broken.

Users thought: "The formula doesn't work."

Reality: "The formula works, Excel is hiding the value."

But Wait, There's More:
Complete UI Overhaul
While fixing formulas, I realized the UI was... not good.

The old UI:
Generic input box
Basic "Generate" button
No feedback during processing
Looked like a 2010 Bootstrap template

The new UI

_The Rebuild: _
Using Gemini 3.0 Flash to Design the New UI
I did something unconventional:

I asked Gemini 3.0 Flash to design the UI for me.

Not just generate code. Actually DESIGN the user experience.

How's the new look?

Day 6: Why Excel Shows '0' for My AI-Generated Formulas (And How I Fixed It)

Varun Krishnan — Tue, 18 Nov 2025 20:56:31 +0000

Yes I did nothing on Day 5. Had my exams, it hit me with anxiety. So was studying late night.

Back to the point:
I added formula support to SpeakSheet today (my AI Excel generator).

Formulas generated perfectly. But when users opened the files, they saw 0 instead of calculated values.

Took me an hour to realize: The formulas WERE working. Excel was just hiding the results.

Here's what happened.

The Feature: AI-Generated Formulas

SpeakSheet now supports formulas in prompts.

User types:
Track employees: Name, Salary. Calculate average salary

AI generates:

Excel file with Name and Salary columns
=AVERAGE(B2:B10) in cell B11
Formula should display calculated average

The Bug Report
When opening the file the data has:

A4: Average:
B4: 0
Not the calculated value. Just: 0

My reaction: "That makes no sense. The formula is =AVERAGE(B2:B4). It should show 55000."

The Root Cause: Protected View Display Behavior
Excel's Protected View doesn't just disable editing. It also hides calculated formula values.

What's actually happening:

When file opens in Protected View:

Cell B4:

Formula: =AVERAGE(B2:B4) ✅
Calculated value: 55000 ✅
Displayed value: 0 ❌

After clicking "Enable Editing":

Cell B4:

Formula: =AVERAGE(B2:B4) ✅
Calculated value: 55000 ✅
Displayed value: 55000 ✅ The formula WAS calculating correctly. Excel just wasn't showing the result.

Why Excel Does This
Protected View is a security feature for files from "untrusted sources":

Email attachments
Downloads from internet
Programmatically-generated files
Security measures:

❌ Editing disabled
❌ Macros blocked
❌ External connections blocked
❌ Formula values hidden (shows 0 instead)
Why hide formula values?

Malicious files could use formulas to:

Display misleading information
Exploit calculation bugs
Trigger unintended behavior
By showing 0 instead of calculated values, Excel forces users to consciously "Enable Editing" before trusting the displayed data.

Reasonable security. Confusing UX.

Day 4: Why I Spent More Time on UI Than Features

Varun Krishnan — Mon, 17 Nov 2025 22:27:14 +0000

Today I completed both core features of SpeakSheet (AI Excel generator).

Then I spent twice as long rebuilding the UI.

Here's why that mattered more than I expected.

What I Shipped Today

Feature 1: Generate Excel from Text ✅

User flow:

Type: "Client orders: Name, Product, Quantity, Price, Date"
Click "Generate"
Download formatted Excel file (~10 seconds)

Backend: Gemini API → Schema generation → Excel creation

Status: Complete

Feature 2: Upload + Intelligent Data Insertion ✅

User flow:
What it does:
→ User uploads messy Excel file
→ Types: "Client orders: Name, Product, Quantity, Price, Date"
→ AI finds the right table and inserts into the new updated file
→ Download the file

Backend: File parsing → AI matching → Validation → Insertion

Status: Working, needs more edge case testing

The Problem I Didn't Expect

Both features worked perfectly on the backend.

But when I tested with 3 friends yesterday:

Every single one thought it was broken.

Why?

The UI gave zero feedback.

User clicks "Generate" → 10 seconds of silence → File appears

During those 10 seconds:

AI is processing ✅
Schema is generating ✅
Excel file is being created ✅

But users see: Nothing.

Result: "Is this working? Should I click again?"

The Rebuild: Adding Micro-Interactions[Demo Code for understanding Purpose]

I spent 6 hours today adding feedback for every state.

1. Button States

Before:

<button onClick={handleGenerate}>
  Generate Sheet
</button>

<button 
  className={`
    transition-all duration-200
    hover:scale-[1.02] hover:shadow-lg
    active:scale-[0.98]
    disabled:opacity-50 disabled:cursor-not-allowed
    ${loading ? 'pointer-events-none' : ''}
  `}
  onClick={handleGenerate}
  disabled={loading}
>
  {loading ? (
    <>
      <Spinner className="animate-spin" />
      Generating...
    </>
  ) : (
    <>
      <Sparkles />
      Generate Sheet
    </>
  )}
</button>

Impact:

Hover: User knows it's clickable
Loading: Shows something is happening
Disabled: Can't double-click

Providing the right UI makes or breaks the product.
Building SpeakSheet in public.
@NotVarunKV

Day 4 down. Many more to go.
Questions? Drop them in the comments 👇

Day 3: Fixed the Data Insertion Bug – SpeakSheet Now Generates Working Excel Files

Varun Krishnan — Fri, 14 Nov 2025 09:15:58 +0000

TL;DR: The product now works. Excel files generate correctly with actual data.

The bug: I was sending an object instead of an array.
Time wasted: 2 hours.
Lesson learned: Always log your data structures.

Here's what happened.

🐛 The Problem
Yesterday, SpeakSheet was generating Excel files... but they were completely empty.

The structure was there:

✅ Columns
✅ Headers
✅ Formatting
But no data was populating.

🧠 What I Learned

Data structure bugs are silent killers
No error messages. No stack traces. Just... nothing works.
These are the hardest bugs to debug because there's no obvious failure point.
Always log the EXACT data you're sending
Don't just log console.log(data).
Small bugs block everything
This one bug prevented:
Testing the full user flow
Recording demo videos
Getting user feedback
Moving on to formulas/formatting

Fixing it unlocked everything.

What's your most frustrating "it was just a data structure" bug?
Drop a comment. I need to know I'm not alone in wasting 2 hours on square brackets 😅

Day 2: Building SpeakSheet – Hit My First Rate Limit and Learned Why JSON Schemas Are Evil

Varun Krishnan — Thu, 13 Nov 2025 19:34:47 +0000

Day 2 of building _SpeakSheet _in public – an AI tool that generates Excel spreadsheets from natural language prompts.

Today was a mix of small UX wins and frustrating technical challenges. Here's what happened.

✅ Shipped: One-Click File Uploads
The Problem:
Users had to select a file AND click an "Upload" button before the backend would process it.

The Fix:
Made the upload trigger automatically when a file is selected.

The Code (simplified):

  const handleFileSelect = async (selectedFile) => {
    if (!selectedFile) return;
    console.log
    if (validateFile(selectedFile)) {
      setFile(selectedFile);
      toast.success(`File "${selectedFile.name}" selected`);

      try {
        setUploading(true);

        // Use selectedFile directly, not file state
        const { publicUrl } = await uploadToSupabase(selectedFile, user.id);

        setFile(publicUrl);
        toast.success("File uploaded successfully!");
      } catch (error) {
        console.error("File upload failed:", error);
        toast.error("File upload failed");
      } finally {
        setUploading(false);
      }
    }
  };

The Lesson:
Sometimes the best features are the ones you remove. One less click = better UX.

🐛 Challenge #1: Supabase Storage Structure
The Problem:
Files weren't saving to Supabase storage, but no errors were showing in the console.

The Debug Process:

Checked file size limits ✅
Checked bucket permissions ✅
Checked network requests ✅
Re-read the Supabase docs... and found it.

The Issue:
A JSON schema error in my storage bucket configuration.
Error because of this line data[0].schema

The fix:One missing pair of square brackets.

The lesson: JSON schema errors fail silently and waste time. Always validate your config.

Challenge #2: Gemini API Rate Limits
Halfway through testing, I started getting this error:

text

Error: 429 - Resource has been exhausted (e.g. check quota).
First reaction: "Did I break something?"

Reality: I'm hitting rate limits already.

Quick fix:

Swapped to a backup API key
Kept building
Long-term fix (needed):

Add request queueing
Show "High demand, please wait..." to users
Consider upgrading API tier or adding fallback models
The silver lining:
Hitting rate limits this early means I'm actually stress-testing the product. Better to discover this now than during launch.

🧠 What I Learned Today

UX wins come from removing steps
Fewer clicks > fancy features
Test with production-level load early
Hitting rate limits in dev > hitting them in production
JSON schema errors are silent killers
Always validate your configs
Rate limits are validation
Means you're using the product enough to stress-test it

Day 1: Building SpeakSheet – An AI-Powered Excel Generator (NextJS + Gemini + Python)

Varun Krishnan — Wed, 12 Nov 2025 20:59:37 +0000

I'm building my first SaaS product in public. It's called SpeakSheet, and it generates Excel spreadsheets from natural language prompts.

This is my Day 1 devlog.

🧠 The Idea

Most people create the same spreadsheets repeatedly. Budget trackers. Sales logs. Task lists. Client rosters.

What if you could just describe what you need and get a fully structured .xlsx file in seconds?

That's SpeakSheet.

💡 How It Works

User types a prompt (e.g., "Track gym members with name, age, membership type, join date")
AI (Gemini Pro + LangChain) parses the prompt and extracts:
Column names
Data types
Required vs optional fields
Python backend generates the .xlsx file using openpyxl
User downloads or receives it via email[Future Feature]

✅ What I Built Today

Basic MVP UI (used ChatGPT to speed up scaffolding)
Prompt → schema generation pipeline
File upload feature
Email/password authentication via Supabase

💬 Feedback Welcome

I'm building this 100% in public. Follow along:

Twitter: [@NotVarunKV]
Drop a comment if you have ideas, questions, or just want to roast my code 😅