DEV Community

Gaurav Pandey
Gaurav Pandey

Posted on

From Learning CSS to Shipping My First Real Feature: My Developer Story

I still remember the first time I opened a .html file in a code editor and had no idea what half the tags meant. Div this, span that, css not loading, half the layout breaking on refresh — bro, it was humbling. I am not from a fancy CS background where everything comes naturally. I learned CSS the hard way, one broken layout at a time, and then pushed into Java because everyone kept saying "backend samjhna hai toh Java karo."

Months of tutorials, months of small toy projects that nobody would ever use — a to-do list here, a calculator there. Good for practice, but honestly, they never felt real. There is a difference between writing code that runs on your laptop and writing code that a real customer sees, on a real website, while they're deciding whether to buy something or not.

So when I got the chance to build something for an actual live e-commerce store, I did not want to build just another form or button. I wanted to build something a customer would actually notice and actually find useful.

The Problem I Wanted to Solve

Anyone who has shopped online knows this moment — you're about to buy something, and then that one question pops up in your head: "Yeh mujhe kab tak milega?" Most sites make you dig through a shipping policy page to find out, or you just don't know until checkout. I wanted to remove that friction completely. I wanted the customer to land on a product page and immediately know — without clicking anywhere — roughly when their order would arrive.

That became my first real project.

What I Actually Built

The idea was simple to explain but took real effort to get working cleanly: detect the visitor's approximate location using their IP address, match it against our shipping zones, and instantly show an estimated delivery window right there on the product page — no login, no pincode typing required upfront.

I built it on a live product page — the Cream Oval Lace Table Mat — as my test case. When someone visits that page from Delhi NCR, the script detects the location, matches it to the shipping zone, and shows something like:

Detected location: New Delhi, Delhi, India
Estimated delivery: Same day / Next day (Delhi NCR)
Shipping zone and dispatch city shown clearly

I made sure to keep it honest, not oversold — IP-based location detection isn't perfect, especially on mobile data where the IP can point to a nearby city instead of the exact one. So I added a small disclaimer under the estimate: location is detected automatically and may not always be exact. Small line, but it mattered to me. I didn't want to build something that gives people false confidence.

The Part Nobody Tells You About Learning to Code

The tutorials don't prepare you for the debugging at 1 AM when the location API returns null for no clear reason. They don't prepare you for realizing your "same day delivery" logic was showing the wrong estimate for one specific shipping zone because of a silly off-by-one mistake in your zone-matching condition. They don't prepare you for the feeling when you finally fix it, refresh the page, and see the correct city and correct delivery window pop up exactly the way you imagined it in your head weeks ago.

That refresh — that one moment — is the whole reason people keep coding after the frustrating parts.

Why This Project Meant Something

This wasn't a toy project sitting in a GitHub repo that only I would ever open again. This was live, on a real product page, seen by real customers deciding whether to buy a table mat or not. If it broke, someone would notice. If it worked well, someone would have one less doubt before checkout. That pressure and that purpose is what separates tutorial projects from real ones.

I'm not saying it's some huge, complicated system — it's not. It's a focused feature that solves one real friction point. But it's mine, end to end. I picked the problem, I wrote the logic, I tested it across different networks, and I shipped it to a live page.

Every developer remembers their first real, live feature. This one is mine.

Frequently Asked Questions

How does automatic delivery estimation work on Ramaya's product pages? It uses the visitor's IP address to detect an approximate location, matches it to a defined shipping zone, and displays an estimated delivery window instantly on the product page.

Is IP-based location detection always accurate? No — it's approximate. On mobile data especially, the detected city can differ from the visitor's actual location, which is why the estimate is shown with a disclaimer rather than as a guarantee.

Why show delivery estimates directly on the product page instead of at checkout? It removes a common point of hesitation — customers get delivery clarity before they decide to buy, not after.

What was the first live feature built for Ramaya's website? A location-aware delivery estimate widget, first tested on the Cream Oval Lace Table Mat product page for the Delhi NCR shipping zone.

Top comments (0)