DEV Community: Karan

🏗️ Still Planning — But This Time It Actually Matters

Karan — Tue, 14 Apr 2026 10:23:49 +0000

Hey guys,

Still stuck in planning mode 😅. But these decisions may be more worthwhile than they seem.

🔀 The Monolith Decision

Monolithic architecture is simply a software development model where the entire app lives in a single codebase. Pretty much the traditional setup most beginner developers follow naturally without even realising it.

Microservices on the other hand is a distributed architecture where several individual services connect and communicate with each other to function as one application. Scalability is the main reason why microservices is so widely adopted — companies like Netflix, Amazon, Uber and Spotify all run on it. Imagine Netflix operating on a single server and a single codebase. Debugging would be a nightmare, maintenance would be chaos, and one bad bug could potentially take down the entire platform for millions of users. Not ideal. 😬

For me though, the choice was obvious — monolith. No plans to massively scale this app, a single codebase keeps things simple, and it's cost-effective.

Sometimes the boring choice is the right one.

📐 SOLID Principles

A great man named Robert C. Martin created the SOLID principles — giving us developers yet another thing to study😒. Just kidding, it's genuinely useful.

In short, following SOLID makes your code:

Maintainable — easier to update and refactor
Scalable — grows with fewer issues
Reusable — modular and decoupled
Readable — cleaner and easier to understand

There are 5 principles in total — S, O, L, I, D. I studied all five. I applied two.

And that was intentional.

Since my app is small with minimal business logic, forcing all 5 would just be over-engineering for the sake of it. Good principles applied in the wrong context are still bad decisions.

🤖 How Claude Helped Apply It

Once I studied the principles, I asked Claude Code to analyse my project and apply
SOLID to the planning. What it did was clean and practical.

For Single Responsibility (S), it wasn't just about separating files — it also
meant breaking down logic into focused modular functions rather than having one
function trying to do three things at once. Models only hold Mongoose schemas.
Routes only handle HTTP. Middleware only handles authentication. Nothing overlaps.

For Interface Segregation (I), it split the API folder by domain —
scheduleApi.js and authApi.js became separate concerns — so different parts
of the app only import what they actually need, rather than pulling from one
bloated module that knows too much.

For O, L and D — Claude explicitly flagged these as unnecessary for this project. The business logic is too minimal to justify them. The philosophy was
simple — use SOLID where it helps, skip it where it doesn't.

🙏 The Mentor Behind All This

None of this planning rigour came from nowhere. I have been fortunate enough to
have a mentor — a senior professional at GoDaddy — who has been guiding me
through these concepts completely voluntarily. Having someone with real industry
experience push you to think about architecture and principles before touching
code is something most student developers don't get. Genuinely grateful for it. ✨

👀 What's Next

OOP is on the study list — the 4 pillars, how they connect to this project,
and then finally, actually building something.

The planning era is almost over. See you on the other side. 🚀

Before Writing a Single Line of Code — Planning My Gym App🏋️

Karan — Sat, 28 Mar 2026 06:27:01 +0000

Hey fellow devs, 👋

Moving on from AI chaos, this time it's all about learning something new.

💡 What I'm Building

I'm building a simple gym schedule app — entirely with the help of Claude.

The app lets users set a weekly schedule from Monday to Sunday, with their gym
timings, workout split, exercises, reps and sets. Nothing fancy — this is purely
a practice project. But the plan is to build it right, not just fast.

Since vibe coding is clearly the future, getting comfortable with it early felt
like a smart move. 🚀

📊 Sequence Diagrams — What Even Are They?

A sequence diagram maps out how different parts of a system interact with each
other in a specific order over time.

Think of it like a WhatsApp conversation — you can see exactly who said what, to whom, and in what order.

Here's the sequence diagram I made for my app:

🧠 How I Actually Built It

The first step is identifying your actors — the objects that interact with
the system. For my app this was straightforward:

The User — inputs the schedule
The UI — handles what the user sees and does
The Database — saves and retrieves the data

Simple enough. But here's where it gets interesting.

Good developers don't just map out the ideal scenario. They think about
everything that could go wrong. Because it's an imperfect world.

For example — what happens if the user tries to save a workout day without
filling in all the fields? No exercises, no reps, just an empty entry hitting
the database. The diagram needs to account for that validation step, otherwise
that's a bug waiting to happen from day one.

Thinking about failure early is what separates planned apps from messy ones.

🗺️ Why Planning Actually Matters

Jumping straight into code is tempting. I get it.

But mapping the flow first forces you to ask questions you'd otherwise miss —
Is this feature actually necessary? What happens if this step fails? Does this
even make sense?

In a small project like this it keeps things clean. In larger projects, it can
save weeks of rework. The planning stage is unglamorous but it's genuinely
important.

🤖 Claude's Role — Plan Mode

Claude is brilliant at building apps, but even Claude isn't perfect — and
usually when something goes wrong, it's because the prompt wasn't clear enough.
That's on the user, not Claude.

So before touching any code, I sent Claude my sequence diagram and we
brainstormed the entire app structure together in plan mode — no building,
just thinking. Getting Claude to deeply understand what I want before it starts
writing anything makes the whole process cleaner and faster.

Context first, code later. ✨

Next up — enough planning, time to actually build something. See you there. 👀

🤖 Adding AI to My Project Wasn't Easy. Until It Was.😅

Karan — Fri, 20 Mar 2026 08:44:14 +0000

Hey fellow developers, 👋

My hyped up hopes and dreams of adding AI magic to my project did not go as planned.🥲 Reality often hurts.

🔍 First Attempt — HuggingFace

I asked ChatGPT for free AI model options and landed on HuggingFace — free, easy to set up, seemed perfect. Got the API key, set the environment variables, wrote the post route, and sat back to enjoy the fruits of my labour.

The model loaded… and then just returned garbage. Incomplete sentences, broken outputs, nothing close to an actual quote. Turns out the model I picked wasn't built for clean text generation from short prompts.

Wrong tool, wrong job. Classic. 🙃

😤 Second Attempt — OpenAI

So I switched to OpenAI with my head held high, because that's what optimistic developers do.

Same process — new keys, new route, new hope. This time I got hit with billing issues and quota errors before I even got started. 404s everywhere. I didn't fully understand what was happening and honestly? I didn't want to. I just moved on.

Then came my board exams and the project sat untouched for a while.

🚀 Enter Claude — The SAVIOUR🙌

When I came back, Claude was everywhere. My dad got the subscription, I took Anthropic's Claude 101 course, and I finally tried Claude Code.

Best decision I've made in this entire project.

I explained my project in plain English — what it does, what I want, what's broken. It analysed everything, suggested Gemini Flash 2.5 as the model, and within minutes had:

Built the API route
Added proper error handling
Updated the frontend elements

All I had to do was paste the API key and watch. 👀

🐛 Minor Setbacks (Because Nothing Ever Works First Try)

Did everything work perfectly on the first run? No. Obviously not. 😂

Because no code ever works on the first try — and every developer has used the infamous "it should work now" line at least a hundred times. I am no different.

But whenever something broke, I'd screenshot the console error, show it to Claude, and it would fix it almost immediately. Within about an hour — a working AI quote generator.

✨ What I Actually Learned

Being a developer today isn't just about writing code. It's about knowing which tools exist, being willing to switch when something isn't working, and not being too proud to ask for help.

Two months ago I'd never heard of Claude Code. Now it's a core part of how I build.

Change is inevitable. Ride along with it.

My live project here👇
https://techgenius-karan.github.io/Random-quote-generator-upgraded/

Next up — I'm not done hyping Claude just yet. More on how it levelled up this entire project in my next post. 👀

🚀 Deploying My Full-Stack App: From Localhost to Live

Karan — Wed, 31 Dec 2025 04:53:25 +0000

Hey everyone! 👋
Picking up right from where we left off — both the frontend and backend of my project were working beautifully on my local system.
All that was left was to deploy everything to the real world… where the real magic (and bugs 😅) happen.

🌐 Deployment Setup

Frontend (GitHub Pages)
I took the straightforward route and deployed my frontend using GitHub Pages. The process was smooth, and the site was up and running almost instantly. No major issues here since it was a static frontend.

The real challenge? The backend.

☁️ Backend Deployment (Render)

I used Render to deploy my backend because:

It’s beginner-friendly
Free to use
I had prior experience with it

Initially, my backend was connected to local MongoDB (Compass).
Once deployed, everything stopped working.

🐛 The Problem (Symptoms)

Clicking Generate did absolutely nothing:

No new quote
No background change
No errors on the UI

That meant one thing:

quotes was empty, so newQuote() exited immediately.

if (quotes.length === 0) return;

So the real question became:

Why was fetchQuotes() no longer populating data?

🔍 Debugging the Issue

Here’s the logic trail I followed:

Frontend now points to Render backend
Render backend CANNOT access local MongoDB (the part I had missed)
API returns an empty response
Frontend correctly refuses to render empty data

So technically… nothing was “broken”.
The system was doing exactly what it was told to do.

✅ The Real Fix: MongoDB Atlas

The solution was to move from local MongoDB to a cloud-based database. I:

Set up MongoDB Atlas
Created a new cluster
Seeded the database with sample quotes
Connected Atlas to Render using environment variables

MONGO_URI = mongodb+srv://quoteAdmin:YOUR_PASSWORD@.../quoteGeneratorDB PORT = 5000
Then I updated the frontend API_URL:

let API_URL = "http://localhost:5000";

⬇️⬇️⬇️

let API_URL = "https://YOUR-RENDER-URL.onrender.com";

🐛 Debugging (The Second Heartbreak💔)

After connecting MongoDB Atlas, Render, and updating all the environment variables, I was confident everything should work.

But… clicking Generate still did nothing.
Same symptom. Same silence. Honestly, it was heartbreaking.

At this point, I had no idea what was wrong because everything was technically correct.

To dig deeper, I directly visited my API endpoint in the browser:
https://quote-generator-5qei.onrender.com/quotes

I saw the words Cannot GET and assumed it was an error and something was wrong with my code, but after repeatedly checking my console and recieving no errors -
That’s when it finally clicked.

There was nothing wrong with my code, deployment, or API.
I had simply forgotten to seed data into MongoDB Atlas. All my quotes were still sitting in my local database.

A painful but valuable lesson:

Sometimes, the bug isn’t in the code — it’s in the data.

🎉 Final Result

And… voilà! 🎉
Once the database was seeded with sample quotes and connected properly:

Quotes started loading
Generate button worked
Categories functioned perfectly
Full-stack data flow was live

This felt like the moment the project officially became real.

🔮 What’s Coming Next

Next up:

🧠 AI integration ideas (brief planning)
✨ Generating original quotes
🎯 Personalization & scalability

See you in the next post — stay tuned! 🚀

🧠 Going Full Stack: Building the Backend & REST API

Karan — Fri, 26 Dec 2025 08:26:42 +0000

Hey fellow developers! 👋

In my last post, I mainly focused on upgrading the frontend UI and UX. While it looked much better, it still lacked the full-stack feel of a real application.
So this post is all about the backend — where things actually started getting serious.

❓ Why Adding a Backend Was Necessary

Initially, I wanted to add a backend to practice and improve my backend skills. But from the app’s perspective, a backend was essential for:

📚 Large amounts of quote data
🤖 Future AI scalability
🗂️ Category-based filtering

Handling all of this purely on the frontend would’ve been messy and unrealistic.
With a backend? Clean and manageable.

⚙️ Backend Setup & Structure

I used a simple and efficient stack:

Node.js + Express → REST API
MongoDB (Compass locally) → Database
Render → Backend deployment (more on this next post 👀)

📁 Project Structure
/
├── index.html
├── style.css
├── script.js
├── backend/
│ ├── server.js
│ └── models/
│ └── Quote.js
└── README.md

🧩 Schema Creation

At the core of the backend was the quote schema:

const quoteSchema = new mongoose.Schema({
  text: { type: String, required: true },
  author: { type: String, required: true },
  category: { type: String, required: true }
});

This schema made everything possible.

Here’s how it works:

A category button is clicked on the frontend
A request is sent to the backend
The backend filters quotes by category
The text + author are sent back
The quote is displayed to the user

This is where the magic of schemas really clicked for me ✨

🔗 Connecting Backend to Frontend

Once the backend was ready, it was time to connect everything.

Inside index.js, I created a fetchQuotes() function:

async function fetchQuotes(category = null) {
  try {
    let url = category
      ? `${API_URL}/quotes/category/${category}`
      : `${API_URL}/quotes`;

    const res = await fetch(url);
    quotes = await res.json();

    usedQuotes = [];
    usedColours = [];
    newQuote();
  } catch (err) {
    console.error("Backend not available:", err);
  }
}

fetchQuotes();

For now, API_URL points to localhost.
Later, this will switch to a deployed backend URL — which leads perfectly into the next post 👇

✅ Final Result (Locally)

And… voila! 🎉
Everything was working perfectly on my local system:

Quotes fetched from the backend
Categories filtered correctly
No more hardcoded data

All that was left was deployment.

🚀 What’s Coming Next

In the next post, I’ll cover:

🌐 Frontend deployment → GitHub Pages
☁️ Backend deployment → Render
🧪 Live-data debugging
🔄 MongoDB Compass → MongoDB Atlas

Be stoked for the next update — see you soon! 😄🔥

Improving the UI & UX of My Quote Generator✨🎨

Karan — Sat, 20 Dec 2025 12:03:14 +0000

Improving the Frontend: UI & UX

Hey everyone!,
This is the second post in my quote generator project series. In this one, I’ll talk about why and how I updated the UI and UX on the frontend to make the project feel more appealing and realistic.

Why I Had to Change the UI

Personally, an unnatural and featureless UI completely repels me.
And honestly, you DO judge a book by its cover — I definitely do. I didn’t want my project’s “cover” to be something that makes people close the tab instantly.

That said, functionality matters too. So instead of focusing only on looks or only on logic, I decided to pair both together.

The goal was simple:

Make the app enjoyable to use and realistic enough to feel like a real product.

What I Decided to Improve

I started adding simple CSS styles and logical frontend features — nothing too crazy, but enough to make the project feel alive.

Here’s what I added:

Dark / Light Mode
Dynamic Backgrounds
Smooth Animations
Better layout
Copy Quote Button
Category-Based Quotes

🔁 Dark / Light Mode: The Toggle Logic

One of the most important pieces of logic I worked on was the dark/light mode toggle.
It’s a small feature, but it completely changes how the app feels.

Here’s the JavaScript behind it:

function toggleMode() {
  darkMode = !darkMode;
  document.body.classList.toggle("dark-mode");

  let btn = document.getElementById("modeToggle");
  btn.classList.toggle("active");
  let ball = document.querySelector(".toggle-ball");

  ball.textContent = darkMode ? "🌞" : "🌙";

  document.body.style.backgroundColor = darkMode ? "#121212" : "#49B587";
}

The logic is simple:

Toggle a dark-mode class on the body
Update the button state
Switch icons (🌞 / 🌙)
Dynamically change background colors

Nothing too complex — but very effective.

🌗 Before vs After: Toggle in Action

Visually, this made a huge difference.

Light Mode (Before):

Dark Mode (After):

This single feature alone made the app feel far more modern and usable.

🎯 What I Took Away From This

Working on this frontend taught me a lot about the ins and outs of CSS — layouts, animations, theming, and how small UI details can completely change user experience.

These are skills that I know will come in handy in pretty much any future project I work on.

In the next post, I’ll move away from UI and dive into the backend side of this project — APIs, databases, and making this app truly full stack.

Stay tuned!🚀

A Simple Project That Turned Into Something Much More!

Karan — Thu, 18 Dec 2025 07:59:12 +0000

Hey everyone!
I’m back after a while — mainly because of preboard examinations. During this short break, I wanted to build a small mini project just to refresh my programming skills a bit. But somehow, that “small project” turned into something much bigger than I had planned.

The Original Project (30 Minutes, Max)

The original project was a simple combination of HTML, CSS, and JavaScript. Nothing fancy at all.
It was a basic quote generator — a text area and a button. On clicking the button, it would randomly display quotes that I had (very honestly) copied from Google and stored inside a JavaScript array.

I added some CSS for structure and background styling. I also tried a few button tricks that didn’t really work out, but at that point, I didn’t care much. It was just a quick, silly project — and let’s be real, a quote generator is not exactly a billion-dollar idea.

Still, it worked. And for a 30-minute project, that felt good enough.

(I’ll link the original live version here 👇)
👉 Original 30-minute Quote Generator

Why It Felt… Incomplete

After a while, I started feeling that this project was pretty dumb in its current state. It did the job, but that was it. So instead of looking for a brand-new project to improve my full-stack skills, I asked myself:
Why not just improve what’s already in front of me?

This version was missing a lot:

No backend
No data storage
No uniqueness
Very limited scope
Zero “real-world” feel

The Idea to Rebuild It Properly

Like most of us, I went to ChatGPT hoping for some magical ideas. It didn’t really give me anything groundbreaking — but it did get me thinking.

That’s when I came up with my own ideas:

Adding a backend with a REST API
Storing quotes properly using a database
Improving the UI and UX (because if it looks boring, I stop working on it)
Eventually integrating AI to generate original quotes based on user mood or preferences

At that point, this was no longer a 30-minute project.

What This Series Is About

This post is essentially about showing the impact of time:

a quick 30-minute frontend-only project
VS
a 3 week full-stack, feature-rich, AI-ready application**

This will be a multi-part series where I document how I upgraded this project step by step — from UI improvements to backend development and beyond.

So yeah, buckle up! Some interesting updates are coming soon!! 🚀

OAuth, Firebase & Some ChatGPT Magic🎉

Karan — Thu, 22 May 2025 08:04:40 +0000

Hey guys! I'm back with another update on my progress with the app I've been building.

After spending a good amount of time learning and absorbing all kinds of new concepts (OAuth, RBAC, Auth Context, etc.), this week was all about putting that knowledge into action.

🔨 Time to Build

My goal? Set up a working login and signup system with OAuth providers like Google and Apple — you know, those buttons that say “Sign in with Google” or “Continue with Apple”.

I followed this great Firebase Authentication Crash Course on YouTube, and it really helped me understand how to use Firebase to manage users.

🤯 The Smart Shortcut

At first, I was going to do a complete code-along, but halfway through, I had a better idea…

Instead of copying code line-by-line and pausing constantly, I asked ChatGPT to analyze the video, extract the code, and explain the steps I needed to follow. And honestly? It saved me hours.

I got the full code setup — Auth Context files, Firebase integration, and even styling — in under 10 seconds.

🛠 Debugging & Finishing Touches

Of course, the code didn’t work right away (does it ever?). I ran into a bunch of errors, but I used ChatGPT again to help me understand what they meant and how to fix them.

One by one, I squashed the bugs, and finally, my beautiful login screen came back to life. 🎉

Now, users can:

Sign up with email and password
Log in
Use “Forgot Password”
Sign in with Google (OAuth)

All of it works perfectly and updates the Firebase console. Super satisfying.

🧠 What's Next?

I’m currently prepping for the SATs, so updates might slow down a bit — but I’m still building, and I’ll be back with more progress soon!

See you guys!(hopefully soon)

What I’ve Been Up To 🧑‍💻

Karan — Thu, 15 May 2025 12:22:15 +0000

Hey again Devs!
Following up from my last post, I wanted to share what I’ve been working on these past couple of weeks in the LearningTrackingApp project.

🛠️ My Role in the Project:

🔧 Week 1: UI & Setup

I kicked things off by building a clean and minimal login/signup interface — just a simple email and password form with a touch of CSS to make it look neat. Nothing too crazy yet — but it was a nice warm-up.

🧠 Week 2: Auth Learning Phase

After syncing with my partner, I got the breakdown of the system roles and what I needed to handle next. That meant diving into the world of authentication and authorization.

Here’s what I had to learn:

Authentication
Types of Authentication
OAuth & Token-based Auth
Authorization
RBAC (Role-Based Access Control)

To be honest, I got kinda bored reading docs 😅 — so I turned to YouTube.

This React Authentication Crash Course with Firebase really helped me out. It covered everything I needed and made things click.

Wrapping It Up (for now) 📦

So yeah, I basically spent 2 days just watching and learning. Didn't write much code those days, but learning was the main goal — and trust me, it was worth it.

That’s all for this update. I’ll be back soon with more progress and how I actually started implementing all of this.
See you soon, and stay tuned! 👋

Back After a Break — Building Something Meaningful!

Karan — Mon, 12 May 2025 07:07:05 +0000

Hey Devs! 👋

Yeah, I know… it’s been a while 😅
I kinda got caught up with school, exams, and, well, life. But hey — I’m back! And I’m really excited to share a new project I’ve been working on.

📱 The Project: LearningTrackApp (name still under construction 😅)

So this new app I’m building is a platform made for NGOs — specifically the ones that teach underprivileged kids. The idea is to help them keep track of their students’ progress, batch sessions, timings, names — basically everything important in one place. It’s simple, but I think it’s gonna be really useful.

👥 The Roles in the App

The app has a few different roles to keep everything organized:

Super Admin – can access and manage all the NGOs.
Admin – manages just their own NGO.
Supervisor – the on-site person ensuring sessions are running smoothly.
Volunteers – the awesome people who teach the kids.
Students – well, this one explains itself 😄

That’s pretty much what I wanted to share for now. I genuinely feel like this app can be something impactful, and I’m excited to build it step by step. I’ll be posting more about the tech, my role, and the challenges I face in the next few posts.

Until then, peace out ✌️

Building a Palindrome Checker 🚀

Karan — Tue, 06 Aug 2024 12:18:13 +0000

Introduction

Hi, everyone! My name is Karan Mhetar, and today I'm excited to share my journey of building a simple yet intriguing project: a Palindrome Checker. A palindrome is any word or number that reads the same forwards and backwards.

The Challenge

While I was working in my dad's office, one of his friends gave me a task to create a palindrome checker. The goal was to take user input and determine if it's a palindrome or not. He was very keen on figuring out the logic part, so I took a pen and paper to jot down what I could do.

Developing the Logic

I initially got distracted by designing the CSS and adding different elements, which didn’t turn out pretty at all. Then, I thought about what conditions the computer needs to check to complete the task. I realized that checking if a text is a palindrome is basically checking if its reverse is the same.

To implement this, I used:

.split(''): to split the string into an array of characters.
.reverse(): to reverse the array.
.join(''): to combine them back into a string.
if condition: to check if the reversed string is the same as the original. If it was false, it wasn’t a palindrome. If it returned true, it was a palindrome.

Debugging the Code

After doing all this, I received an error. It wasn't working. I spent two hours trying to solve it but nothing worked. Finally, when my dad came, I asked him for help. He said that fixing errors is a major skill developers need and is essential. We used console.log to find out where the issue was coming from and finally narrowed it down to the if condition. I had accidentally used == instead of ===. It was a real learning lesson for me. I wasted my entire day on such a silly problem that could have been resolved with one single key click. Yeah, I know it was a stupid mistake, but now I can actually laugh about it.

Adding Some Flair

The next day, I still wasn’t satisfied with my project. I felt it was too boring. I was curious about learning animations and thought of adding one to the project as well. I found a cool 360-degree horizontal rotation animation on W3Schools. I thought it could work perfectly for my palindrome project (it didn’t go as well as I thought). I tried to put the animation onto the text the user would input, making it spin around to reverse, and if it stayed the same throughout, it was a palindrome. To find the source code of that animation, which wasn’t given as an example, I had to inspect the element and see what had been done. I used that code and experimented with mine until I got it. Don’t hesitate to use AI tools and other resources. They are there to help you. I finally put the animation with some help, but it didn’t exactly come out as I had expected. It still looked nice though, so I kept it.

Feel free to try out my Palindrome Checker on GitHub. Let’s learn and grow together!

Hello Dev Community!

Karan — Wed, 31 Jul 2024 13:53:35 +0000

Hi, everyone! My name is Karan Mhetar, and I’m a 9th-grade student with a passion for coding and technology. My coding journey began in 7th grade when my dad took me to his office and set me up with a Zero to Mastery Udemy course. It was then that I discovered the magic computers create, and I’ve been hooked ever since.

While creating a bunch of projects (you can find them here on GitHub), I encountered many simple errors and problems that I just couldn't solve. I often wished there was someone who had already explained the issues I was facing. That's when I realized I could be that someone for other fellow developers.

One thing you should know about me: I love CSS! There’s something incredibly satisfying about making a webpage look just right. However, I’m still grappling with the dark arts of advanced JavaScript. If you have any tips, I’m all ears!

What I’m Going to Do

Share My Projects: Walk you through the projects I’m working on,
including the challenges I face and how I overcome them.
Problem-Solving: Discuss common coding problems and provide step-by-
step solutions.
Learning Experiences: Share what I learn along the way, from new
programming languages to development tools.

Feel free to follow me, leave comments, and share your thoughts. Let's learn and grow together!