Forem: Muhammad Rabbi

I Built My Portfolio to Look Like VS Code 👨‍💻

Muhammad Rabbi — Sat, 07 Mar 2026 15:23:03 +0000

Link: Portfolio

Most developer portfolios follow the same pattern:

A hero section
Some project cards
A contact form

Clean? Yes.
Memorable? Not always.

So I decided to try something different.

I built my portfolio to look and feel like VS Code.

Why a VS Code Style Portfolio?

As developers, we spend most of our time inside Visual Studio Code.

It’s the place where ideas turn into code.

So I thought:

Why not make my portfolio feel like a developer's natural environment?

Instead of a traditional website layout, the portfolio mimics the VS Code interface, including:

File explorer navigation
Code-style content sections
Developer-focused UI interactions
A familiar coding environment

The goal was to create something that feels natural for developers visiting the site.

What I Focused On
While building it, I tried to focus on three things:

1. Developer Experience
The interface should feel like a real coding environment, not just a visual copy.

2. Clean UI
Even though it mimics an editor, it still needs to be clear, readable, and responsive.

3. Personality **
Your portfolio should show **how you think as a developer, not just what tools you use.

What I Learned

Building this portfolio taught me a few things:

UI inspiration can come from tools developers already use
Small interactions make a big difference
Portfolios are a great place to experiment with ideas

Final Thought

Your portfolio doesn’t have to follow the same template as everyone else.

Sometimes, trying something different makes it more memorable.

If you're a developer, what kind of portfolio style do you prefer?

Minimal landing page
Interactive experience
Something creative like a dev environment

Curious to hear your thoughts 👇

AuthKit Pro – Simplifying NextAuth Setup in Next.js

Muhammad Rabbi — Sat, 14 Feb 2026 16:40:47 +0000

Setting up authentication in a Next.js project is powerful — but let’s be honest…

It’s repetitive.

Every time we start a new project with NextAuth, we end up writing the same boilerplate:

Provider configuration
Auth config setup
Environment variables
Basic file structure

After doing this multiple times, I thought:

Why not automate the boring part?

So I built authkit-pro — a CLI tool that initializes basic NextAuth setup instantly.

✨ What is authkit-pro?

authkit-pro is a simple CLI tool designed to:

1. Reduce authentication boilerplate
2. Speed up project setup
3. Let developers focus on core features
4. Provide a clean starting structure Instead of manually configuring everything, you just run one command.

⚡ How to Use
Simply run:

npx authkit-pro init

That’s it.

It scaffolds the basic authentication setup so you can move faster.

🎯 Why I Built This
As a developer, I love optimizing workflows.

When you repeatedly write the same setup code, it slows down creativity. I wanted something that:

Saves time
Keeps projects consistent
Makes starting new apps easier

So this is my small contribution to improving the developer experience.

🛠 Current Status

The project is still evolving.
I’m actively improving it and planning to add more features.

If you try it, I would genuinely appreciate your feedback.

💬 Feedback & Contribution
If you’re working with Next.js and authentication:

Give it a try → npx authkit-pro init

Let me know:

What should be improved?
What features would you like to see next?
Any bugs or suggestions?

Let’s build better developer tools together 🚀

I Tried Vibe Coding for the First Time Using Warp — Here’s What I Learned

Muhammad Rabbi — Sat, 24 Jan 2026 13:48:13 +0000

Today, I experimented with vibe coding for the first time using Warp, and honestly… it felt wild.

I didn’t write a single line of code manually.

Instead, I just described:

what I wanted to build
what should happen next
And Warp generated the code for me.

For quick prototyping, this felt incredibly fast and smooth.

The Good Part

Warp did a solid job with:
Generating project structure
Writing boilerplate code
Moving ideas forward quickly

For early-stage development, this can save a lot of time and mental energy.
If your goal is to test an idea fast, vibe coding definitely helps.

The Reality Check
Once I reviewed the generated code properly, I noticed:

Multiple bugs
Logical issues
Edge cases not handled well

The code worked, but it wasn’t production-ready.

This is where developer experience still matters:

Debugging
Refactoring
Understanding what the code is actually doing

AI can write code, but it doesn’t fully understand context, intent, or long-term maintainability.

Current Status of the Project

The site is still under development.

I’m actively:

Fixing bugs
Improving logic
Cleaning up the codebase

Once everything is stable, I’ll share:

What the site does
How it was built
What worked well with vibe coding (and what didn’t)

Key Takeaway

AI-assisted coding is a powerful accelerator, not a replacement for fundamentals.

Tools like Warp are great for:

Rapid experimentation
Reducing repetitive work
Exploring ideas faster

But understanding the code and taking responsibility for quality is still on us as developers.

If you’ve tried vibe coding or AI-first workflows, I’d love to hear your experience 👇

What worked for you, and what didn’t?

Happy building 🚀

React Design Patterns Every Frontend & FullStack Developer Should Know

Muhammad Rabbi — Fri, 09 Jan 2026 15:53:32 +0000

If you’re building modern web applications, React design patterns can completely change how you think about components, reusability, and scalability.

A month ago, I realized something important
I was using React every day, but I wasn’t truly thinking in patterns.

That’s when I discovered an amazing playlist by @atapas.

Why React Design Patterns Matter
React design patterns help you:

Write cleaner and more maintainable code
Avoid prop drilling & unnecessary re-renders
Scale applications without pain
Think like a senior engineer, not just a coder

Patterns are not about complexity —

they’re about clarity and intention.

What You’ll Learn From This Playlist

This playlist breaks down patterns in a practical and beginner-friendly way, including:

Container & Presentational Components
Compound Components
Render Props
Custom Hooks pattern
Controlled vs Uncontrolled Components
Reusability & separation of concerns

Each concept is explained with real-world use cases, not just theory.

Where to Watch 📺
You can find the playlist on:
Devguide : https://devguide-dev.vercel.app/playlist/PLIJrr73KDmRyQVT__uFZvaVfWPdfyMFHC ,
YouTube,

*A Small but Meaningful Moment *

I shared this playlist recently, and Tapas Adhikary himself commented:

“Thank you for sharing and the shoutout. The Devguide looks awesome. 🙌”
That meant a lot to me — and it motivated me to share this with more developers.

Final Thoughts

Whether you’re a frontend developer, backend developer, or moving toward full-stack, understanding React design patterns will level you up.

Don’t just write React.
Design with React.

If you’ve already explored these patterns, I’d love to know:
Which React pattern helped you the most?

*Happy coding *

coding #devguide #fullstack #frontend #developer

A few days ago, I was scrolling through YouTube playlists, thinking..

Muhammad Rabbi — Mon, 08 Sep 2025 04:48:40 +0000

One moment I’m watching a React tutorial… next moment I’m deep into cat videos 🐱😂

That’s when I realized — if DevGuide is about structured learning, then I needed a way to bring that same experience to playlists.

👉 So I built the Playlist Page.
Instead of random chaos, every playlist here is:
✨ Developer-focused
✨ Structured for learning (not distractions)
✨ Easy to browse, just like YouTube but with only dev content

It wasn’t easy.
I had to set up API calls, handle filter logic, deal with loading skeletons, and even fight with layout issues until it felt clean and smooth.

But in the end, the Playlist Page turned into something I’m proud of — a place where developers can binge-watch without losing focus. 🚀

🔗 Try it here: https://devguide-dev.vercel.app/playlists

Question for you:
👉 If you could design your dream developer playlist, what topics would be in it?

WebDevelopment #Frontend #LearningJourney #DevGuide #day100 #devguide #devguide