DEV Community: Khushiii

A Perfect Desi Chai App 🍵 | React + Tailwind + A Monsoon Side Project (Part 01)🏝️

Khushiii — Sun, 27 Jul 2025 17:45:25 +0000

Errors, Anxiety, Code & My Not-So-Perfect Yet Honest Week-04🪻

"Jab jago tabhi savera" — When you wake up, it’s your morning.
And that’s exactly how this week felt — late starts, chaos, doubts, but still showing up.☘️

🌼 My Week in One Line?

Errors, anxiety, fear, zero productivity... and me forcing myself to build something.
Honestly, this week was so messy I don’t even know where to begin. 😮‍💨

I had health issues, motivation issues, and major self-doubts.
Was questioning myself, my resume, my skills, my existence as a dev — literally everything. And don’t even get me started on applying for jobs... that whole cycle has its own anxiety.

But still — here I am. Posting my 6th blog of the month. Because I made a promise to myself : -

✨ At least 1 blog every week in July — and I’m not breaking that.

🌼 My Mind Said "No", So I Said "Let’s Build"

I was trying to learn React properly this week — like actual lectures and tutorials.
But it was sooo slow. I couldn’t sit through them without zoning out or feeling meh.
And then I told myself : -

"Khushi, chill. You don’t need to master it first — just try building something with it. Figure it out on the way."🌸

So I picked a silly little project idea and gave it a heart — and that’s how ChaiMate happened.

🪻Storytime First…

Tadaaaa!🥁 Let’s go with a story.
It’s rainy season in India. That vibe where everything smells like mitti and you just wanna curl up with CHAI.🍵
(Yes, not "tea", we call it CHAI proudly.)

So the idea hit me : -

Why not build an app that helps you make the perfect desi chai every single time?

Like...

What ingredients to use 🍵
How long to boil it ⏱
Visuals for the vibe 👀
AND of course… background music 🎶 (because vibes > everything)

🫶How I Started: Me, Chatty, and Chaos

I opened VS Code, asked Chatty (aka ChatGPT) for help with some basic structure, and started piecing things together.

Before even touching Figma, I wrote a rough structure in VS Code —
but yeah... forgot to take a screenshot 🥲 (why am I like this?)

Then moved on to designing the actual UI in Figma.

🧱Stack I Used (And Fought With 😂)

React.js (first time using it in a real project)
Tailwind CSS (which I ditched halfway 😭)
Plain CSS (because Tailwind literally stopped working mid-code)
Figma (for design)
A lot of Chatty back-and-forth🧠

I tried hard with Tailwind... but errors kept coming, and I just wanted to see something work. So I said:

“Nope. Switching to basic CSS for now.”

My little blooper moment🥹 : -

Project Glimpses☘️
Here's my ICONSSSS🥨...

🗂 Folder Structure : -

🏝️Figma Design : -

⚒️ Code Structure So Far

💚GitHub Repo : -
I’m still figuring things out and tweaking a lot, but if you wanna peek or suggest anything : -
https://github.com/khushikumari239/A-Perfect-DESI-CHAI.git

🌼What Else I Was Juggling

Updating my resume
Feeling unsure about job applications
Questioning my portfolio
Getting stuck in overthinking mode
But still... coding (even if slow)

🧡Resources I Used

Flaticon — for some cute icons (https://www.flaticon.com/)
Chatty (yes, again. The MVP 💅)
Figma & VSCode — my two fav corners of chaos

🫶Ending the Week Like…

This wasn’t the most productive or aesthetic week.
But it was real.

I tried showing up even when I didn’t feel like it.
I pushed through the boring, the anxious, the messy.
And honestly? That counts. That really counts.

If you're also in a slump, feeling stuck, lost, or doubting yourself -
You're not alone. You're growing. 🌱

Thanks for reading. And please please please — would love to hear your thoughts, feedback, or just say hi in the comments 🥹💬

❤️Reminder : -

This is my 6th blog this month — yep, went beyond the original 4-blog challenge 🙌
So here’s to more chai, more code, and more little stories from my developer journey☕🏝️🥨🪻🌸🕊️

Catch you next week!💌
Khushi🌸

🪻MY Bento (Connect with me ) : - https://bento.me/khushimehappy

Learning MongoDB Like a Main Character 🍃🧑‍🚀

Khushiii — Wed, 16 Jul 2025 13:27:35 +0000

hellooooo everyone!!!
I am back again with a journey update📹

AND This girl’s learning by DOING❤️

I am done with Express and now,
I finally unlocked the M in MERN stack — MongoDBBBBBB☁️💚
(or mangoDB for me because my brain loves fruits...😭)

🌸And What I did...

So the idea was simple in my head —
I wanted to build a todo app
but this time not storing things locally like arrays 😭
this time with real database stuff like MongoDB (NoSQL)…

Main concept was — users can sign up and log in with their info,
and then their todos will get added/updated directly into the database (MongoDB cloud 🌥️).

I used JWTs & tokens for authentication,
Postman for testing,
bcrypt + salt for password hashing (no plain text drama here 😤),
Zod for input validation,
and of course handled all the random errors and bugs that came my way 🐛

...anddd trust me, many more things I cried over but figured out eventually 😭✨

And it was my first time doing all thisss...

Like for real, I had zero clue in the beginning.🥹

But here I am now —
sharing my actual journey of how I built this MongoDB-powered Todo App💚

I’ll be sharing all the resources, the mistakes, and the little “OMG IT’S WORKING” moments 😭

And yes — after every single bug fix or code run,
I was literally like:

"IT’S WORKINGGGG!!!" (😭 screaming alone in my room lol)

Also big win for me —
I’m finally able to maintain a real coding streak and this time it feels so so real 🫶

So here’s a little breakdown of everything I did,
and if you’re a beginner — I promise, you can build this too 🫶

🌸Also… here's the link to my GitHub repo if you wanna check it out or run with me → https://github.com/khushikumari239/TODO-DB.git

🌸Let’s build the backend skeleton first!

So after setting up the project, I started creating the main backend structure —
and trust me this was the part where things finally started to feel real-real🌼

🛠️4 Core Routes I Created : -

POST /signup
POST /login
POST /todo (authenticated)
GET /todos (authenticated)

So after setting up MongoDB and Compass (yupp I did the full ritual 😭)...

I created a file called db.jswhere I wrote the schema for my app using Mongoose.

Using two collections : -

users
todos

and my database looks something like this📸

🌸Mongoose docs here : - https://www.npmjs.com/package/mongoose

After setting up my schema in db.js,

I imported the models inside index.js like this : -

const { UserModel, TodoModel } = require("./db");
Now I could actually start doing the fun part — working with real data!

Postman literally became my BFF during this whole process 😭
I used it to : -

Send user data for signup/login
Test protected routes with tokens
Create and fetch todos

📸 Here's a shot from the Postman chaos 👇

anddd every time I got a 200 OK response,
I literally screamed “Yesss it’s workingggg” like 3 times 😭

💀PLOT TWIST : -

Imagine Paytm or BigBasket gets hacked…
and they were storing passwords in plain text 😩

Now my villain finds the leaked data —
and sees: "khushiiii@mail.com" → "mainCharactervibes12" 😭

And because I reused that password (don’t judge 🥲),
they now have access to my Insta, Gmail… basically my whole digital life.

Lesson learned : - no more plain passwords.
We hash. We salt. We protect. 🔐

🌸 A BLOG I Found (That Saved Me 😭)
So while I was figuring out how to hash passwords properly,

I came across this amazing blog : -
👉 https://heynode.com/blog/2020-04/salt-and-hash-passwords-bcrypt/

It explains hashing, salting, and bcrypt so well —
I swear if you’re also confused like I was,
this will help you breathe again 😭💗

Anddd ofc I went to the docs and read a bit like a serious dev 😤
Look at these screenshots I took:

MongoDB Auto Update Moment 💚 : -

And look at this!!

MongoDB auto-updated the stored password with the hashed version —
no plain text, no drama ✨

😭 Silly Mistake I Made (Classic Dev Moment™)
So at one point my DB was only showing the email, not the password...

And I was like : -
"Wait... where's my hashed password???"

Turns out — in my db.js schema, I had written Password (with a capital P) instead of password (small p) 💀

And MongoDB was like : girl, I don’t know what you’re trying to save, but okay??

After fixing that — boom 💥
Password saved correctly, hashes looking good, all chill 😌

Finally felt so relaxed after that fix… like yes,
I’m still learning, but I’m figuring it out 🫶

⚠️ Error Handling(aka: why is my server screaming!? 😭)
Did some quick error handling using try–catch because my server was crashing when I used the same email twice 😩

Now it doesn’t cry every time I mess up 😭
Doneeee. Finallyyyy. ✅

-- My server's smart now 😤
Thanks to Zod, it checks if your inputs are in the right format — or throws a tantrum 😌

📦 Installed with: npm install zod Docs: https://zod.dev/

Clean. Safe. No random junk hitting my DB anymore ✅

🧾Code? Yup, it’s all on GitHub! : -

I built the whole logic from scratch —

from defining schemas in db.js, to writing routes, hashing passwords, JWT auth, input validation... everything 🔥

But instead of pasting pages of code here,

check out my full GitHub repo 👉 (https://github.com/khushikumari239/TODO-DB)
(it’s neater there, I promise 😭💗)

Still, here’s a sneak peek 👀👇

💌 If You’re Coding Along…
The code above is for anyone building this with me —
copy, break it, fix it, vibe with it🌼

Happy coding everyone! 💗

What’s Next???💚
This week’s packed...
👾 I just started React (yes, the frontend glow-up begins!)
👾 Planning a big project combining all the backend stuff I’ve learned
👾 Also doing a code challenge I’ve been scared of for weeks…

🌸 A Little Real Talk...
There was a time I kept asking myself : -
“Why would they choose me? What if I try and fail? Why even apply?”

But then I was like...

Wait Khushi — why NOT you??
If I don’t try, how will I know what I’m capable of?

So this time, I’m doing it.
I’ll give it my honest best.
If I win — yay. If I don’t — I’ll still learn a LOT.
And that’s always a win, right?❤️

I’ll share the whole journey of the challenge too —
how I planned, wrote code, tackled bugs, everything!

But for now…
just know that I’m coding fearlessly this time 🫶
and I’d love your support along the way 💌

Building an Express App — My Fullstack Girly Era Unlocked (Part 01) 💅🏻🛠️

Khushiii — Fri, 11 Jul 2025 08:56:07 +0000

aka backend chaos, Postman errors, and drawing tokens with pens 😭✍️

Yess guys, I'm back with another weekly update (or a chaotic blog, same thing at this point).

This week was all about Express.js, learning backend basics and unlocking new dev girl powers💪🫠.

From setting up servers, hitting Postman with 403s, figuring out tokens, to finally meeting JWTs —
it was FULL vibes and full chaos.🥹🫶

So let's dive into building a basic Express app for authentication (and yeah, some hand-drawn madness included to explain my logic 😭).and googling google 🌸

🏁 Setting Up: Express Auth App Begins
Let’s initialise an Express app — super simple.

npm init -y                 # Step 1: Start Node project
touch index.js              # Step 2: Create entry file
npm install express         # Step 3: Add Express

Open it all in VS Code. IYKYK. 👩🏻‍💻

🔐 Basic Auth — Signup & Signin
Let’s keep it minimal (but working):

✅ POST /signup → save user info
✅ POST /signin → validate + send token
✅ Use express.json() middleware
✅ Store users in an in-memory array (no DB rn, just memory lane 🧠)

And here’s what my logic sketch looked like:

Also here's how I planned storing tokens and user info 👇
(I added JWT later, ignore that for now 😅)

🎯/me Endpoint — Authenticated Route
So I created an endpoint called /me that returns user details only if they send a valid token.

Because we love some privacy 😌

📫 Hitting It with Postman

GET for reading
POST for registering or logging in
Use http://localhost:3000/me to hit that private route

How I ran it:

node index.js

Now Postman just waits for your requests like:

🔓 Signup Flow
Start with /signup
(yes I made spelling errors at first... dev things 🙃)

Then hit /signin to receive your token 🎟️

🔑 Use the Token in Headers
After you receive the token, you gotta copy it and paste it in the headers when hitting /me.

⚠️ The token changes every time — it’s randomly generated by generateToken() in this version.

🧠 Auth in Action
Now when I hit /me using the valid token — boom, it works!
Returns only my data 🔥

And yeah, GET method it is 👇

Here’s what I get in my terminal too — actual user info 🔥

Now unless someone steals my token (pls don’t 😭),
they can’t access my /me endpoint.

🤔 Problem — But This Isn’t JWT Yet!

This whole setup uses a random token saved in memory.
That means every time we validate, we must query the users array.

Big no-no for real apps 😶‍🌫️

🧃 Solution — Enter JWT (JSON Web Tokens)
JWT lets us sign and verify tokens — no need to store anything server-side.
It carries its own data and verifies itself 🔐

Here’s how I understood it (and drew it out 😅): -

Some more doodles to make it clear 🖊️ ( I drew that🥹)

🔁 Replacing Token Logic with JWT

Step 1: Install JWT

npm install jsonwebtoken

Step 2: Remove generateToken()
We don’t need it anymore.

Step 3: Create a secret key

const JWT_SECRET = "USER_APP";

Step 4: Sign JWT
When the user logs in, generate a JWT token like this:

const token = jwt.sign({ username: user.username }, JWT_SECRET);

🧾 Bonus Sketch: Encryption vs Decryption
I found this while figuring out how encryption works in JWT.
Hope it helps someone 😅👇

🔐 JWT Verification: The /me Endpoint
Once you’ve switched to JWTs, it’s time to verify them when users hit your protected route.

Here’s how I did it in the /meendpoint using jwt.verify()👇

🌻Running the Final Flow (With JWT Now!)
Now let’s see it in action from start to finish, this time with JWT-powered logic.

📝 Step 1: Sign Up

🔐 Step 2: Sign In (Get Your JWT Token)
it’s long, has 3 parts separated by dots (.), and carries your data securely : -

🧠 Step 3: Authenticated /me Route
Boom 💥 — you’re in!

This time it works without needing to check the DB — JWT handles the identity 🎟️.

And here's how the terminal looks when all things align perfectly ✨

🌸 Wrapping Up (for now...)
This was one wild ride through backend basics, but here’s what we nailed:

✅ Created a Node + Express app
✅ Built basic auth logic with random tokens
✅ Upgraded to secure JWT-based authentication
✅ Tested it all via Postman
✅ Cried once, debugged twice, and learned a LOT 😵‍💫🛠️

🌸 MY github Repo : - [https://github.com/khushikumari239/Express-APP.git]

🚨 What’s Next?
This was Part 01 of my backend chaos — stay tuned for:

🖼️ Frontend integration
🌿 Real-time form handling
🍃 And starting MongoDB (finally unlocking the M in MERN 😭)

Let me know if you vibed with this post (or if Postman scarred you too).
Until then — more bugs, more doodles, and more dev girly energy 💅✨

With 💻 & ☀️,
Khushiii❤️

raw and real. just me to you 🌼

Web Dev x AI x CLI: Just Me & My Mini Project Vibes🫶🧩(Weekly updates)

Khushiii — Sun, 06 Jul 2025 12:51:04 +0000

Heyyy Techies👋

It’s me, Khushi — A girl in tech who’s just out here learning, building, vibing, and making a little bit of chaos in the terminal 🌸💻.

Sooo this week was so random but so fun — I did a little bit of everything : -
Web Dev x Node.js x Express x HTTP servers x Gemini CLI x AI experiments — I was everywhere.

And guess what? I LOVED it.
That’s the vibe 🌸

🌻 Weekly Sweet Highlights : -

Started with Node.js (because JavaScript is my comfort zone now ☕)
Built HTTP servers from scratch 🚪
Played around with Express.js, middlewares, CORS, and all that backend spice 🔧
Connected Frontend to Backend (full-stack girly era unlocked 🛠️)
Tried Google’s Gemini CLI (spoiler: it’s kinda cool ngl 🤖)
Wrote some sweet lil blogs on the side 📝

🔮 Mini Project of the Week: Yane-AI
Yane (屋根) means roof in Japanese — I picked this because just like a roof gives you a wide, cozy view from the top,
Yane-AI helps you “see” what’s inside an image through AI-powered tagging.

👉 Yane-AI GitHub Repo : - https://github.com/khushikumari239/Yane-AI.git

It’s super simple : -

Send an image URL 🖇️
AI analyses it 🧠
API sends back the tags 📦

🌻Features:

Accepts image URLs via POST API
Uses Clarifai’s General Image Recognition model
Returns a neat list of tags (concepts)
Handles errors like a pro 👀
Beginner-friendly and super clean to extend

Clarifai site link : - clarifai.com/explore

🌻How to Run : -

git clone https://github.com/khushikumari239/Yane-AI.git
cd Yane-AI
npm install

Add your Clarifai API Key in a .env file : -

CLARIFAI_API_KEY=your_personal_access_token_here

Start the server : -
node index.js

Your server is LIVE at : http://localhost:3000🎉

🛠️ API Quick Test:

Endpoint: POST /analyze
Request Body : -

{ "url": "https://samples.clarifai.com/metro-north.jpg" }

Response :-

{
  "tags": ["train", "railway", "transportation", "vehicle", "station", "city"]
}

📦 Other Cool Repos I Touched This Week:
🧵 CLI Tool + Gemini Playground : - https://github.com/khushikumari239/CLI-Node.js.git

⚡ Express App : - A basic Express.js app with signup and signin authentication (https://github.com/khushikumari239/Express-APP.git)

🧩 HTTP-Server : -Building my first HTTP server using Node.js — beginner-friendly and clean. (https://github.com/khushikumari239/HTTP--SERVER.git )

🌱 Wrapping Up My Tech Week : -

This week was so me —
A lil backend, a lil frontend, a lil AI, a lil blog — I’ve been everywhere and honestly? I loved every second.

If you’re building too, or just vibing in your terminal —
Slide into my GitHub 🌼 → https://github.com/khushikumari239

Or scream into the void with me on Twitter → @khushimehappy 🪐

and LinkedIn -> https://www.linkedin.com/in/khushimehappy/ (You can stalk my journey here 👀🫶)

I’ll be back next week with more chaotic, messy, sweet lil mini projects. See ya! 💌

Too Broke for Claude? Google’s Gemini CLI Got You.

Khushiii — Sun, 06 Jul 2025 01:34:09 +0000

It's been more than a Week Google finally dropped Gemini for the command line.

Yep, now you can basically hand over the total control of your machine to AI. It can write code, create files, execute commands automatically, and pretty much do the stuff we programmers used to get paid for🥹.

But let’s be honest… once again, Google is late to this party 🎉.

Because guess what? We already have tools like Claude Code, OpenAI Codex, Warp, and a bunch of others absolutely dominating the CLI vibe.

Butttt Gemini CLI hits different.
And here’s why:
🌼 It’s fully open-source.
🌼 It’s FREE. Like, actually free with suuuper generous usage limits.

We're talking thousands of free model requests per day to one of the most powerful coding models out there.

Meanwhile, over at the Claude Pro Max Ultra Club, you’d probably need to cough up $200/month to generate the same amount of… well, slop in your terminal 😂.

But hey, you get what you pay for, right?

So, in today’s blog, I’m just going to vibe through Gemini CLI and see what’s up 🚀

Claude Kinda Ruled, Till Now
Right now, Claude Code is the vibe king when it comes to coding CLIs. They were the first major player to drop something like this, and since then, many others just tried to copy the vibe.

But two things kinda kill it:
🌼 It’s closed source 🥲
🌼 It’s expensive as hell 💸

If you’re like me and too broke to afford Claude, Google just became your bestie.

Because Gemini gives you thousands of model requests per day… FOR FREE.
Like whatttt? That’s kinda wild.

And in today's Blog we will find out the gemini CLI....

🔗Github Repo (Gemini CLI) :- https://github.com/google-gemini/gemini-cli
🔗My Github Repo :- https://github.com/khushikumari239/CLI-Node.js

Getting Started with Gemini CLI
It’s super simple to install 👇

yess, just that easy. One line of code and you’re in.

Here are some sweet screenshots I grabbed while playing around with it:-
I tried to build a tic-tac-toe app using javaScript...

I Built a Tic-Tac-Toe App 🎮
Just to test the vibe, I asked Gemini to help me build a Tic-Tac-Toe app in JavaScript.

Here's what I did:

Installed Gemini CLI
Ran gemini in my terminal
Wrote the prompt for Tic-Tac-Toe
It instantly started generating the code — BOOMMM 💥
I ran it… and there was the magic ✨

Look at thisss:

Final Thoughts 🌸
Okay, so is it perfect? No.
But it’s actually super fun to use. Gemini CLI is still growing, but the fact that it’s open-source and free makes me wanna explore it more.

If you love CLI tools, wanna vibe with coding buddies, or you’re just too broke for premium AI subscriptions (like me 😅) — give Gemini CLI a try.

Have you vibed with Gemini CLI yet?
Let me know in the comments or come scream into the void with me on Twitter [@khushimehappy] — I’m always down to geek out 😆🚀

Building My First CLI Tool — Messy but Worth It!

Khushiii — Thu, 03 Jul 2025 13:40:21 +0000

It wasn’t perfect, but I built it — and that’s the vibe🌼

Hellooo Devs👋
It’s me, Khushi — A curious kid just figuring things out 🌸

This is not some expert tutorial.
This is just a lil story about how I learned to build a CLI (Command Line Interface) tool — in my own messy, random way 😭✨

🌼Where I Started
I just started with the basics — JavaScript vibes only.
Learning how to play with strings, arrays, and the console.

This gave me the lil push to actually try something on my own.

💭My First Thought:
What if I build a CLI that counts how many lines are there in my .txt file?

Sounds simple right? Let’s gooo.

For this, I used the Commander library 👉https://www.npmjs.com/package/commander?activeTab=readme
It helped me create and print commands easily.

Here’s what it looked like 👇

The code👀: -

✨ Level Up: Gimme Some Colors!
After this lil project, I thought — let’s build something cuter and more interactive.

So I built a CLI that:

Shows a fancy welcome banner using figlet (https://www.npmjs.com/package/figlet)
Prompts the user’s name using inquirer (https://www.npmjs.com/package/inquirer)
Greets them back with colorful text using gradient-string (https://www.npmjs.com/package/gradient-string?activeTab=readme)

Basically, a whole vibe.

Outcome👀: -

🚧 The Problem I Faced (Yup, Struggled)
Okay, this one actually got me 😵‍💫

I had issues with type: module in package.json.
At first, my CLI wasn’t working because I was mixing Node.js modules and ES modules 💀

So I had to figure it out:

Use .cjs instead of .js (yeah that works!)
OR update package.json to support both module types.

Here’s a lil screenshot of that chaos:

When I saw that I can actually make my terminal look cute with colors and banners, I was sold 😂✨

🔗GitHub Repo link : - https://github.com/khushikumari239/CLI-Node.js.git

⚙️What I Built (the basic starter pack)

Showed a cool banner
Asked the user their name
Greeted them back with colorful text (obviously)

All this — in the terminal.
Running it in Node.js was actually not that scary once I broke it down into small lil steps.

Also had to figure out promises, callbacks, and async code (not gonna lie, it fried my brain a bit but we survived 🫠)

🌸What I Learned (aka life lessons lol)

Breaking stuff into tiny steps is literally the hack
Using ready-made libraries is NOT cheating — it’s smart
You learn the most by just TRYING and tweaking random stuff

If you’ve been thinking about building a CLI — just do it. Start small, keep it fun, don’t overthink.
Trust me, you’ll vibe.

So yeah — figuring this out was a whole mission but I did it 🤌

💌 Let’s Talk!
That’s my messy lil CLI story, straight from me to you 🤍
Not perfect, but definitely worth it.

Are you building something? Tell me in the comments!!
I wanna see your journey too — let’s build, fail, laugh, and vibe together 🫶
Big thanks to GeeksforGeeks (GFG)💚