DEV Community: ujjwal

🐳 How Docker Saved My Full-Stack Project (And My Sanity)

ujjwal — Mon, 01 Dec 2025 05:00:57 +0000

When I built VBlog, a full-stack application with Next.js, Express, Prisma, and PostgreSQL, everything ran flawlessly on my local machine.

Then I tried deploying it to another environment.

💥 Chaos ensued. Missing dependencies. Mismatched Node versions. Prisma binaries that refused to cooperate. PostgreSQL connection failures. The backend would work while the frontend crashed, or vice versa.

That's when Docker shifted from a "someday" learning goal to an immediate necessity.

In this article, I'll walk you through:

Why Docker became essential for my project
How I containerized each component of my stack
The Prisma binary issue that almost broke me (and how I fixed it)
My final docker-compose workflow that ties everything together

🤯 The "Works on My Machine" Nightmare

My tech stack consisted of:

Next.js 15 for the frontend
Node.js + Express for the backend API
Prisma ORM for database operations
PostgreSQL as the database
JWT for authentication

Everything worked perfectly on my Fedora laptop. But when I tried containerizing the app using Alpine Linux, Prisma immediately complained:

Error relocating query-engine-linux-musl: RELRO protection failed

The frontend built successfully locally but failed inside containers. PostgreSQL would start, but the backend couldn't establish reliable connections during startup.

I was juggling three different environments—my host machine, the backend container, and the frontend container—each with its own quirks and failures.

This is exactly where Docker proves its worth.

🎯 Why Docker Actually Matters

Here's what Docker solved for me:

Consistent environments across machines

Identical Node versions
Same OS layer
Matching Prisma engine binaries
Predictable network configuration

Once your app runs in Docker, it runs the same way everywhere Docker is installed—whether that's Linux, macOS, Windows, or cloud infrastructure.

Zero manual dependency installation

No one needs to install Node, PostgreSQL, Prisma, or package managers. Everything runs inside isolated containers.

True component isolation

Each container has a single responsibility. The frontend container runs Next.js. The backend handles Node and Prisma. The database runs PostgreSQL. No version conflicts. No dependency interference.

Infrastructure as code

One file (docker-compose.yml) defines your entire stack.

Start everything:

docker compose up --build

Stop everything:

docker compose down

This approach eliminates roughly 80% of environment setup problems.

🏗️ Backend Dockerfile: Why I Switched from Alpine to Debian

Initially, I chose Alpine Linux for its small image size. But Prisma and Alpine's musl libc implementation don't play nicely together, resulting in constant crashes.

The solution: switch to debian-bullseye, which uses glibc.

FROM node:20-bullseye

WORKDIR /app

COPY package*.json ./

RUN apt-get update && apt-get install -y openssl
RUN npm install

COPY . .

RUN npm run build

EXPOSE 8000

CMD ["npm", "start"]

After this change:

No more binary incompatibility errors
Prisma worked reliably on every request
The RELRO errors disappeared completely

⚛️ Frontend Dockerfile: Production-Ready Next.js

I used a multi-stage build to keep the final image lean:

FROM node:20-bullseye AS builder
WORKDIR /app

COPY package*.json ./
RUN npm install

COPY . .
RUN npm run build

FROM node:20-bullseye AS runner
WORKDIR /app

COPY --from=builder /app ./
EXPOSE 3000

CMD ["npm", "start"]

This produces a production-optimized Next.js build ready for deployment.

🎼 The Complete Docker Compose Setup

Here's how I orchestrated all three services:

version: "3.9"
services:
  postgres:
    image: postgres:16
    container_name: vblog-postgres
    environment:
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: password
      POSTGRES_DB: vblog
    volumes:
      - postgres_data:/var/lib/postgresql/data
    ports:
      - "5433:5432"
    healthcheck:
      test: ["CMD-SHELL", "pg_isready -U $$POSTGRES_USER"]
      interval: 5s
      timeout: 5s
      retries: 5
      start_period: 10s

  backend:
    build: ./backend
    container_name: vblog-backend
    security_opt:
      - seccomp:unconfined
    depends_on:
      postgres:
        condition: service_healthy
    environment:
      NODE_ENV: production
      DATABASE_URL: postgres://postgres:password@postgres:5432/vblog?schema=public
      PORT: 8000
    ports:
      - "8000:8000"
    command: >
      sh -c "npx prisma generate &&
             npx prisma migrate deploy &&
             npm start"

  frontend:
    build: ./frontend
    container_name: vblog-frontend
    depends_on:
      - backend
    environment:
      NEXT_PUBLIC_API_URL: http://vblog-backend:8000
    ports:
      - "3000:3000"

volumes:
  postgres_data:

With this setup, I can launch the entire application stack with a single command, and it behaves identically on any machine.

🔍 Debugging Tips That Saved Hours

View container logs

docker logs <container-name>

Inspect running containers

docker exec -it vblog-backend sh
ls /app/node_modules/.prisma/client

Configure Prisma for the correct platform

Add this to your Prisma schema:

binaryTargets = ["native", "debian-openssl-3.0.x"]

Avoid Alpine unless necessary

The combination of musl libc and Prisma often leads to compatibility headaches.

✨ What I Gained from Dockerizing

The transformation was remarkable:

Anyone can clone the repository and start the app with one command
No more "Prisma engine not found" errors
PostgreSQL connection issues vanished
Development and production environments are identical
The entire setup is deployment-ready

Docker didn't just fix my environment issues—it made my project portable, predictable, and production-grade.

💭 Final Thoughts

If you're building a full-stack application with Node.js, Next.js, Prisma, and PostgreSQL, Docker should be part of your stack from the beginning.

The debugging time it saves is substantial. The portability is unmatched. And deployment becomes dramatically simpler.

Have you faced similar environment issues in your projects? How did you solve them? I'd love to hear your experiences in the comments below.

Want to see the complete VBlog source code? Check out my GitHub repository.

“The Struggle is Real. So is the Dream.”💭💻🌟

ujjwal — Fri, 23 May 2025 16:22:45 +0000

💬 A Thought That Hit Me at Midnight

So… today it happened again.

That same overwhelming-but-somehow-motivating thought that hits when you're deep into a scroll spiral you didn’t plan.

I was on LinkedIn, just looking. But suddenly, it turned into a stress bomb:

Layoffs.
Hiring freezes.
And every third post? “Just landed a 20 LPA package!” 😵‍💫

And there I was—coffee in hand, halfway through some DSA in Java, balancing a React internship, and just sitting there thinking:

“Why am I even doing this? Is there even a point anymore?”

It felt like the whole software world was overbooked. Web dev? Saturated.
Jobs? Slowing down.
And me? Just trying to hold it all together.

So I did what most of us do.

I closed LinkedIn.
Opened Instagram.
And started scrolling reels. 🌀

🎭 Reels, Escapes & Unexpected Realizations

Insta was the usual escape:

Beautiful creators.
Dancers.
Actors lip-syncing.
People going viral in a flash.

At first, it was just noise. But then… I caught myself thinking:

“Wait. Isn’t this space saturated too?”

There are so many influencers now. Every day, every scroll, someone new. It made me wonder:

Why are they still doing it?

Then it hit me. The truth is—they're not just making reels.
They're chasing something deeper.

They want to be seen. Admired. Respected. Remembered.
They want to be superstars.

And aren’t we the same?

We, the devs. 💻👨‍💻👩‍💻
We chase our own version of that spotlight: the dream job ✨, the offer letter 📩, the startup that takes off 🚀, the 20 LPA, the unicorn badge on LinkedIn 🦄💼.

But let’s be real—
We’re not Shah Rukh Khan to keep doing the same pose and still rule. 🫴✨

But even he evolved. 🔁👑

In the '90s, he gave us the classic SRK—the king of romance 💘, the open arms 🙌, the soft smile 😊. That signature pose? Iconic. 🎬🌹

But fast forward to now?

He’s flipping cars 🚗💥, throwing punches 👊🔥, headlining action thrillers at 57. 🧨🎥

He evolved. He didn’t survive by clinging to the past. He adapted, even after owning an entire genre. 🔄🏆

So why are we, as devs, clinging to 2016 tutorials and expecting 2025 jobs? 📚🕰️💭

That’s the part we skip in our hustle talks.

The market isn’t just saturated—it’s evolving. 📈🌐
The rules are changing. The easy wins? Gone. ❌
But the dream? Oh, it’s still alive. 💡🔥

💪 Struggle Isn’t Failure — It’s the Entry Fee

Here’s what I’m slowly learning:

You can’t avoid the grind.
You can’t shortcut your way through evolution.
You can’t keep doing the same “pose” and expect new results.

Even stars have to switch genres to stay in the game. So do we.

Grind your DSA—but also learn why, not just how.
Get good at React—but explore the stack behind it.
LeetCode? Yeah, it’s tough. But so is the gym—and that’s how you grow. 🧠💪

Saturation doesn’t kill your dream. Stagnation does.

🌊 How I’m Trying to Stay Afloat

No, I don’t have it all figured out. This post isn’t advice. It’s just me… processing out loud.

But maybe you’re here too, feeling stuck in this flood of talent, trends, and job rejections.

Here’s what I’m holding onto:

Be a T-shaped dev: Deep in one thing, but aware of many.
Build in public: Even small projects can echo.
Ride waves with strategy: AI, DevOps, Web3—explore, but don’t chase blindly.
Find your tribe: Get around people who push you.

It’s not about who knows the most. It’s about who adapts the fastest.

🎯 My Final Rant (From One Dreamer to Another)

Yes, this market is intense.
Yes, you’ll doubt yourself—a lot.
Yes, there will be days you’ll feel behind. Maybe today’s one of them.

But I promise:

Every “overnight success” was a long fight behind the scenes.
Every “dream job” post hides a hundred silent breakdowns.
Every “effortless dev” once cried over a LeetCode hard.

So if you're struggling, feeling small, tired, lost—same.

But I also believe this:

“The struggle is real. But so is the dream. And if you keep evolving, you’ll get there.” 🚀

📣 One Last Thought to Stick With You:

“Saturation doesn’t bury talent. It buries the ones who stop evolving.”

👇 If this felt like your story too—drop a ♻️, leave a comment, or just type “HUSTLE.”

We’re in this together. 💻❤️‍🔥

🧠 Knowing When to Copy-Paste Is Also an Art 🎨

ujjwal — Tue, 20 May 2025 06:21:29 +0000

As junior developers, we’re constantly bombarded with advice from all directions:

❌ "Don’t repeat yourself!"
❌ "Avoid copy-paste coding!"
❌ "Use loops, maps, functions – be clever!"

And I took that very seriously. Like, maybe a bit too seriously. 😅

The Hustle to Be a "Cool" Dev 🧑‍💻

In my projects, I went above and beyond to avoid repetition. Even if a simple copy-paste would’ve worked just fine, I would twist my logic into a pretzel 🥨 using map, reduce, and whatever else I could find on YouTube tutorials just to prove:

"I’m not a repetitive coder. I’m different. I’m cool 😎."

But let’s be real – deep down, I just wanted my seniors at work to think I’m smart.

The Wake-Up Call 🔔

One day, while my senior was reviewing my code, he paused and looked confused.

👨‍💼: "Why are you doing this hard stuff?"
👦 (me): "What hard stuff?"
👨‍💼: "These weird loops and logic... it’s too complicated."
👦: "But… we’re not supposed to repeat code, right?"
👨‍💼: "Says who?"
👦: "Uhh… everyone?"

Then he dropped a truth bomb 💣 on me that I’ll never forget:

"You're writing your program. Do what makes things easy for you.
We program to make things simple, not complicated.
The client wants a working product – they don’t care if you used forEach, map, or handwritten each line.
Make the product cool, not your code.
So do the easy thing. Make it work."

That Hit Hard. 🫠

He was right.

I realized I was coding for validation, not for clarity. I was trying to impress, not solve. And worst of all, I was over-engineering something simple because I feared being called "repetitive."

But here’s the truth 👇

✨ Sometimes Being Repetitive Is Okay

You’re still learning.
You’re building something that works.
You’re meeting the requirements.
That’s enough.

Not everything needs to be "optimized" or "abstracted" from day one. Over time, you’ll naturally refactor things as the project grows. But early on?

🔁 A little copy-paste never hurt anybody. 😉

Final Thoughts 💭

Learn every day. Stay hungry. 🍽️
Don’t be afraid to repeat yourself when it makes sense.
Write code that works and makes your life easier.
Impress your future self with clean, understandable logic – not your current team with unnecessary cleverness.

🙌 Thanks for reading. If you’ve ever fallen into the trap of “over-engineering to impress,” drop a 🧠 in the comments and let’s talk!

🤖📚 Build Your Own AI-Powered Book Chatbot using Python, Flask, Lang Chain, and Pinecone!

ujjwal — Mon, 05 May 2025 13:58:29 +0000

Hey Devs! 👋
Have you ever wanted to chat with your favorite books like you're texting a friend? 📖💬
Well, you're in the right place! In this blog post, I’ll walk you through how I built BookChatBot, an AI-powered chatbot that can answer questions about a book, using:

🧠 LangChain (for LLM logic)
🌲 Pinecone (for vector search)
🧾 PDF loading and splitting
⚡ Google Gemini (for answering questions)
🧪 Flask (as the web framework)

You can find the full code on GitHub:
👉 GitHub Repo

💡 What are we building?

We're building a chatbot web app that can read PDFs (like a book 📘), store them in Pinecone’s vector database, and allow users to ask questions about the content!
The AI will retrieve the most relevant chunks and generate human-like answers using Google's Gemini model.

💸 Note: Pinecone’s free tier only allows one index. So for now, you can't dynamically upload new books — but once set up, it's super efficient for Q&A!

🗂️ Project Structure

bookchatbot-/
├── app.py               # Flask app and RAG chain
├── helper.py            # PDF loading, chunking, and embeddings
├── src/
│   ├── prompt.py        # System prompt for LLM
├── data/                # Folder with your PDF files
├── templates/
│   └── chat.html        # Simple frontend
├── .env                 # API keys (not shared!)

🧠 How does it work?

This is a RAG (Retrieval-Augmented Generation) pipeline:

Load and split PDFs into chunks
Convert chunks into vector embeddings
Store in Pinecone (vector DB)
Accept user question
Find the top relevant chunks (via Pinecone)
Use Gemini to answer based on retrieved content

🧾 helper.py – Preprocessing the PDFs

def load_pdf(data):
    loader = DirectoryLoader(data, glob="*.pdf", loader_cls=PyMuPDFLoader)
    return loader.load()

📥 We load all PDFs from the data/ folder.

def text_splitter(extraced_date):
    text_split = RecursiveCharacterTextSplitter(chunk_size=500, chunk_overlap=20)
    return text_split.split_documents(extraced_date)

📚 We split documents into manageable 500-token chunks to help with better retrieval.

def load_geneni_embeddings():
    embeddings = GoogleGenerativeAIEmbeddings(
        model="models/embedding-001",
        google_api_key=os.getenv("GOOGLE_API_KEY")
    )
    return embeddings

🔍 We use Google's embedding model to turn text chunks into vectors!

🚀 app.py – The Flask App + AI Brain

We start by setting up Pinecone:

pc = Pinecone(api_key= PINECONE_API_KEY)
docsearch = PineconeVectorStore.from_existing_index(index_name="bookchat", embedding=embeddings)
retriver = docsearch.as_retriever(search_type="similarity", search_kwargs={"k": 3})

🧠 This allows us to retrieve 3 most similar chunks from our stored book.

Then we build a prompt + Gemini LLM:

llm = ChatGoogleGenerativeAI(model="gemini-2.0-flash")

prompt = ChatPromptTemplate.from_messages([
    ("system", system_prompt),
    ("human", "{input}"),
])

💬 system_prompt defines how the AI should behave (e.g., polite, detailed).

Create the RAG chain:

question_answer_chain = create_stuff_documents_chain(llm, prompt)
rag_chain = create_retrieval_chain(retriver, question_answer_chain)

💡 This is the brain of the chatbot — retrieval + generation.

Finally, the Flask endpoints:

@app.route("/")
def index():
    return render_template('chat.html')

@app.route("/get", methods=["GET", "POST"])
def chat():
    msg = request.form["msg"]
    response = rag_chain.invoke({"input": msg})
    return str(response["answer"])

📡 The front end sends a message → gets a smart reply from the AI!

🧪 Testing it Out

Just run:

python app.py

Then open http://localhost:8080 and start chatting with your book! 🗨️📕

⚠️ Limitations

Pinecone’s free tier = only one index. So, you can't upload new books at runtime unless you upgrade or manage your own embedding storage.
Static loading: you must re-run the app if you want to embed a different book.
Basic HTML frontend – could be upgraded with React, Tailwind, or Chat UI kits.

🛠️ Ideas for Improvements

Add file upload (if using a paid Pinecone plan or local vector store like FAISS)
Use streaming responses for a more chat-like feel
Add authentication and user-specific history
Display source chunk(s) below each answer for transparency

🌐 Conclusion

Building an AI chatbot like this is easier than ever thanks to:

🧠 LangChain for chaining LLM workflows
🌲 Pinecone for fast vector search
⚡ Google Gemini for intelligent responses
🧪 Flask for quick APIs

If you liked this post, don’t forget to ⭐ the GitHub repo and follow me here on Dev.to!

Got questions or ideas? Drop them below! 💬👇

🔍 Font Finder: Never Wonder "What Font Is That?" Again

ujjwal — Thu, 06 Mar 2025 07:17:18 +0000

🎨 The Problem: Identifying Fonts Is a Pain

We've all been there. You come across a stunning website, a sleek UI, or a beautifully designed ad, and the font just clicks.

"That’s the one! I need this for my project!"

But then reality kicks in:

❌ You have no clue what the font is.

❌ It could be a premium or free typeface.

❌ Finding a close match is a tedious process.

Until now, your only options were:

Guessing & Googling → Endless font library searches.
Crowdsourcing → Posting on forums and hoping for help.
Manual Matching → Painstakingly comparing fonts side by side.

🚀 Enter Font Finder

Font Finder solves this by using AI-powered font detection. Upload an image, and within seconds, get accurate font matches—no more guessing games.

Built with Next.js, React, and Tailwind CSS, and powered by Google’s Gemini 1.5 Flash AI model, this tool provides fast and precise font recognition with minimal effort.

🛠️ Under the Hood: How Font Finder Works

At its core, Font Finder leverages multimodal AI to analyze both visual and textual characteristics of fonts. Unlike traditional font-matching methods that rely on pre-defined databases, Font Finder understands typography.

Here’s a simplified version of how image-based font detection works:

// Process the uploaded image and detect fonts using AI
export async function detectFontFromImage(imageData) {
  const genAI = initializeGeminiAI();
  const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" });

  const base64Data = imageData.split(',')[1];
  const mimeType = imageData.split(';')[0].split(':')[1];

  const imagePart = {
    inlineData: {
      data: base64Data,
      mimeType
    }
  };

  const result = await model.generateContent([fontAnalysisPrompt, imagePart]);

  return processResponse(result);
}

This approach offers significant advantages over traditional methods:

✅ AI-powered recognition → Goes beyond pattern matching.

✅ Understands font context → Recognizes variations in weight, style, and spacing.

✅ Works with real-world images → Handles noise, distortions, and different lighting conditions.

🔎 How to Use Font Finder

There are two ways to identify fonts:

📸 Image-Based Font Detection

Found a cool font in the wild?

1️⃣ Take a picture.

2️⃣ Upload it to Font Finder.

3️⃣ Get instant font matches.

📝 Text-Based Font Detection

Already have a sample text but don’t know the font?

1️⃣ Paste the text.

2️⃣ Click "Detect Font".

3️⃣ View the closest matches with confidence scores.

🔤 What You Get: A Full Typography Profile

Font Finder doesn’t just tell you the font name—it gives a detailed breakdown:

🏷 Font Family → The exact match or closest alternatives.
🔠 Weight Classification → Light, Regular, Medium, Bold, etc.
✍ Style Properties → Italic, Condensed, Extended, etc.
🎯 Confidence Score → AI certainty level.
🔗 Similar Fonts → Alternative suggestions for flexibility.

For designers and developers, this means no more losing track of great fonts.

🏗️ For Developers: Easy Integration & Customization

Want to integrate Font Finder’s detection into your own project? It’s super simple:

# Clone the repository
git clone https://github.com/ujjwal-207/Font-finder.git

# Install dependencies
npm install

# Set up environment variables
echo "GEMINI_API_KEY=your_api_key_here" > .env.local

# Start the development server
npm run dev

With a modular architecture and clean codebase, you can easily:

🔹 Customize the UI with Tailwind CSS.

🔹 Extend the functionality with additional AI models.

🔹 Integrate it into your apps or workflows.

🎨 Bonus: Color Detection

Font Finder also provides basic color detection from images, helping you identify the dominant colors used in typography.

Limitations:

⚠️ Lighting and screen calibration can affect accuracy.

⚠️ RGB vs. CMYK can cause slight variations.

⚠️ Print vs. digital colors may differ.

Still, it’s a handy extra tool for getting in the right color neighborhood.

🧠 The Technical Challenge (And How We Solved It)

Font detection isn’t as straightforward as it seems. Here are some challenges we tackled:

🔍 Fonts Look Different in Different Contexts → AI learns from multiple character variations.

🔍 Some Typefaces Are Nearly Identical → Advanced AI models detect subtle differences.

🔍 Weight & Style Variations → Gemini AI can distinguish Regular vs. Bold vs. Italic.

🔍 Low-Quality Images → The model compensates for blur and distortions.

Thanks to multimodal AI, Font Finder doesn’t just compare fonts—it understands typography.

🚀 Try It Now!

🔗 Check out Font Finder on GitHub

💡 It’s open-source, so feel free to:

✅ Contribute improvements

✅ Suggest new features

✅ Fork and build your own version

💬 What font have you been trying to identify? Drop a comment below if Font Finder helped you solve your typography mystery! 🚀

I am Lazy and Exam is here,So here is Easy way to kill It.

ujjwal — Mon, 24 Feb 2025 13:16:02 +0000

I Know Hard Work is the Only Way💪
There’s no shortcut to success🛣️—no magic powers🪄, no Doraemon gadgets🤖 to cheat in exams, and no secret brain exercises🧠 to instantly learn everything.

But what I do best is finding smart ways to tackle tough situations. So, here’s my approach—let’s break down topics step by step and practice effectively!

I have build this habit👨‍💻

I just can't simply understand things by just studying topic i have do some practise in that topic to understand it clearly.And here come the doremon gadget to make me practise properly to ace my exam ie Practise Question

Practise Question

This is the superAi⚙️ Tool which will give all the sets of practise question with its solution, if you just enter the topic name or any subtopic which you want to understand clearly and ace the exam.You have the option to choose like if you are new to the topic,you are intermediate in the topic and you want to be pro.Or you want to try some new difficult question which will make your understanding more stronger.

So Lets Use this Gadget🤖

This is simple Nextjs program you can just run it in your local device.

Here is the way to do it

Clone this repo
https://github.com/ujjwal-207/practice-question.git
Create your .env file
Enter you Gemini api key
And all set to ace your exam🎯