DEV Community: Sumonta Saha Mridul

My Code Review Experience as a Junior Developer: What I Learned and How to Review as a Team?

Sumonta Saha Mridul — Thu, 25 Sep 2025 04:22:41 +0000

As a junior developer, especially in the AI era, where almost everything can be generated by AI, it’s hard to continuously improve and keep learning. One of the best ways to grow is by reviewing and trying to understand existing code. Yes, at an early stage, it's hard, things seem complicated, and you might not know the best practices. But if you don’t start now, it will be difficult to go far in this industry.

Code reviews are not just about finding bugs. They are about learning, sharing, and improving the overall quality of the system. The goal is simple: to improve the system while learning.

For the last few months, I got the chance to review and mentor teammates and review some codes and PR's at Cefalo . I took it as a challenge. But before jumping in directly, I did a little bit of research: how to be a good code reviewer? I started learning from my seniors, how they review my code, what they look for, and how they understand things so quickly.

Here, I’m just sharing all the knowledge and learning I gathered throughout this time.

🔑 1. Mindset: You are a mentor, not a Judge

The first rule of reviewing code is remembering that the goal is to improve the code, not to insult the developer.

Do not take commit messages personally.
Remember your junior days. Everyone starts with mistakes, insecurities, and a lack of confidence. When you started your journey, did you know all the best practices? Maybe not. So, let them learn.
Instead of just pointing out what's wrong, try to explain why something needs to change, and the benefit of doing it a better way. Share best practices. Show how a small improvement can make a big difference in code quality, and sometimes, just a small example or hint can be enough to guide them in the right direction.
People make mistakes. Don’t judge too quickly. Before jumping to conclusions, first ask the developer for a quick preview or explanation. Try to understand their thought process and there’s logic behind the approach even if it’s not the best one.

Ask yourself: “How can I help this developer write better code in the future and grow more?”

Remember: The behavior of senior engineers sets the tone for the entire team culture. Junior engineers observe what you do, how you give feedback, how you communicate, how you handle mistakes, and they start to repeat that behavior to others. In long time. that how a culture shapes in a team.

Goal: Help each other write better code in future and build a quality system. You're there to help improve the code, ensure team standards, and learn not to just find flaws and mistakes

Be a mentor, Be hero to them.

🎯 2. Tone is the Key

The way you give feedback shapes the whole code review experience. Personally, from my experience, I feel this is one of the most important parts of a code review. Your words can either motivate someone to learn and improve or completely kill their confidence.

Highlight both strengths and weaknesses.
Explain the reason behind every suggestion.
Use positive and polite language. Avoid harsh, vague, or demotivating comments.
Invite discussion. Encourage the developer to share their honest thought process before judging the code. Always encourage them to ask questions without hesitation and actively listen to their concerns or challenges.
You should also appreciate the junior developer's efforts and achievements and celebrate their progress and success. This builds trust and confidence. In our team in Cefalo , when finally, a PR gets approval, we try to give feedback like this "🥳 Great Work", "🎉 Good Job, Keep it up!"

💬 Instead of: “This is wrong.” Say: “I’m struggling to understand this part. Can you walk me through it?”

Be respectful, curious, and suggestive. Examples of Good Review Comments:

“Nice use of utility functions here! One suggestion though…”
“Could we simplify this logic with a helper function?”
“This works well, but I wonder if there’s a more efficient way.”

One of the best things I’ve experienced in my journey at Cefalo is how we approach code reviews. We never use “you”, we always say “we” in our comments. It creates the feeling that we’re solving the problem together, not pointing fingers. For example:

Instead of saying: “Why did you do that?” We say: “Can we do it this way?”
Instead of: “Why did you use a loop here?” We say: “Why are we using a loop here? Is there a better approach?”

This small change gives the developer a positive vibe and makes them feel more involved and comfortable in the review process. It creates a supportive, team-like environment. I actually learned this from one of my mentors, Simanta Deb Turja and Md Naem bhai.

As you said we, means we both are responsible for that!

🧭 3. Follow a Framework: The CEDAR Feedback Model

Context: Create a comfortable environment, leave ego aside, and focus on the outcome.
Example: Use specific examples of what works or what needs improvement.?
Diagnosis: Ask why the code was written this way. Use open-ended questions instead of assumptions. Ask their context you are missing, before judging
Actions: Suggest improvements that follows the best practices
Review: Summarize and ensure mutual understanding.

This structure helps make feedback clear, respectful, and actionable.

Don't be the reason to someone's bad day!

4. My Todo List: What to look for in code reviews?

When reviewing code, look at the big picture first, then the details.

✅ Basic

Understand the Goal: Read the PR title, description, and related task/ticket.
Branching name is, okay? Try testing it locally?
Check if your previous suggestions are applied?

✅ Design Review

Is it Well designed? making the overall system better or worse?
Does the new code follow pattern that already applied in codebase? Does it follow existing patterns?
Would a new developer know where to look this feature or logic after six months?
Does the form re-rendering? Are validations working?

✅ Functionality Review

Does the code work as intended? Does it fulfill end-user requirements?
Look for bugs? What could go wrong if corner case not handled?
Are bugs, leaks, race conditions, or deadlocks possible?
Are requests handled correctly? Error states? *I*s data being updated correctly?

✅ Complexity

Is the code too complex? Is this code doing over engineering staff?
Is a function doing more than one job?
Is it violating design principles like Single Responsibility?

✅ Naming & Documentation

Are function and variable names meaningful and clear?
Is the code easy to read and follow? Can I understand the code after a month?

✅ Performance & Security

Any obvious performance bottlenecks?
Any security risks with inputs or data handling?
Any information leakage in Api call?
Is it rendering multiple times? Check the computation cost?
Are errors properly handled? Are there any edge cases?
Any N+1 queries or unnecessary loops?

But there is a law! If junior keep doing same mistakes in review, there is no mercy

💬 5. Give Feedback That Teaches

Good code reviews are not about nitpicking or micromanaging. Focus on:

The bigger picture and overall design.
Don't just think based on specific function or code, think from longer vision.
Explaining why something should change. Every comment must include a “because” clause. Offering examples or small clues when suggesting improvements.

Never leave a comment as "please do X". Instead, it must be "please do X because Y".

Honestly, I also make this mistake sometimes. I get stuck on small parts of the code instead of thinking about the full context.

Sometimes I use tools for code review and the first thing I try to do is understand the context of the changes. And to be honest, I’ve also learned a lot of new things just by reviewing others' code.

You can use to understand and review code, but the important part is always done by you

Also, remember you can be wrong too. Be open to accepting your mistakes.

The main goal is learning for both sides. Code review should be a two-way process, not just one giving and one receiving. It is a learning opportunity for you and the junior developer.

Senior Developer realized that he had made a mistake!

🤝 Remember:

Your code reviews can either help someone become a better developer and write cleaner code or completely kill their motivation to improve.
Code reviews are not just about code; they’re the first step on your journey to becoming a better leader and software developer.

CEO watching Junior and Senior Dev Enjoying ):

📌 Useful Resources

🧡 Thanks for Reading!

That’s all! I hope you learned something new or saw tech from a new angle. If you enjoyed this, feel free to share it or comment your thoughts. I’d love to hear your thoughts. Until next time, keep learning and building!

Sumonta Saha Mridul, Associate Software Engineer I, Cefalo Bangladesh Ltd.

I regularly share what I learn through weekly posts on LinkedIn, Dev. to, and Medium. Also, I run a small YouTube channel where I try to share helpful content for developers.

Article content

How to Use AI Effectively in Coding & Development? How to have a Senior Developer Mindset?

Sumonta Saha Mridul — Sun, 14 Sep 2025 12:19:46 +0000

Welcome to my newsletter, where I share what I've been learning, thinking about, and exploring in the tech world. If you don't know me:

Hi, I am Sumonta Saha Mridul. I'm an Associate Software Engineer at Cefalo. I regularly share what I learn through weekly posts on LinkedIn, Dev. to, and Medium. Also, I run a small YouTube channel where I try to share helpful content for developers.

✨ Quote of the Week

“Make money so that you can walk away from situations you don’t like.”
“People are complicated: they have sides you don't know, their actions are done for some reasons that are impossible to see from the outside. We only see a tiny part of what they have inside and out..”
“AI is not going to take your job. A developer who knows how to use AI will.”
“Some people create their own storms and then get upset when it rains.”
“Only two things matter: what was said and how it was said. **Not who said it.”

How to Use AI Effectively in Software Engineering?

AI can save time, but only when used with a professional mindset. Start by focusing on the problem rather than jumping straight to solutions, take the time to understand why bugs occur, and review any AI-generated code critically. AI is a tool to assist your understanding, not a replacement for it.

Get Answers → Understand the Problem

Focus first on understanding the problem, not just the solution.
Write down what you want to do and clarify your thoughts.
Only after that, use AI to generate answers or suggestions.

Understand Why Bugs Happen

Don’t just fix the error, understand why it occurred.
Try to make a list of steps, "How this bug is happening / How to regenerate it"

Write Down the Purpose of Your Code

Ask yourself: What is this code supposed to do? How does it work? How does it fit into the existing system?
Writing helps you find gaps in understanding. If you use AI more, then try to write more

Don’t Blindly Copy/Paste AI Code

Review AI-generated code like a senior developer:

Does it make sense?
Is it simple and readable?
Is it trying to do too much?
Can you clearly explain it?

Practice the Art of Deletion

Aim for one function/component → one responsibility.
Ask yourself: Can I delete this part? Is it really necessary?
Less code = less risk = easier maintenance.

Interesting Fact

Most people think fat leaves the body through sweat or exercise. In reality, research shows that about 84% of body fat exits through breathing, released as carbon dioxide.

Things I Wish I Knew Earlier: (Taken from some articles)

What makes you have a senior developer mindset?

Don’t just build whatever you’re asked; you focus on building the right things.
You make sure, you are building the right things
You try to find out unknown problems/issues and flag technical difficulties
Communicate directly with stakeholders.

7 Signs You’re a Tech Lead Already?

People want you in meetings: You’re the go-to person for understanding the codebase and explaining architectural decisions.
You turn problems into plans : You know what’s broken, what to fix first, and can justify priorities to your manager.
You shield the team from chaos : Creating processes, documentation, and knowledge sharing to prevent crises.
You see problems before they’re named : You're already thinking about what could go wrong.
Your code reviews are teaching others: Offering guidance, patterns, and resources, not just a message "this doesn't work".
You write code that won’t bite you later : You know when to keep things simple and when to add flexibility

Tools and Resources

Faker : Generate dummy data from TypeScript interfaces.
JSON Server : Quick fake REST API for prototyping.
YouTube Transcript Generator : Pull transcripts, then summarize with AI.
RunSQL : Online playground for practicing PostgreSQL or MySQL queries.

Final Thoughts

Some useful thoughts on life

The only way to build wealth is to keep your ego below your income.
If expectations grow faster than income, you will never be satisfied.
People may want different things, but nearly everyone seeks respect, usefulness, and control over their time.
History is made by surprises, but forecasts are based on obvious patterns.
A comforting delusion is thinking that other people’s bad circumstances couldn’t also happen to you.
Read fewer forecasts and more history. Learn more from failures than successes.
No one is thinking about you as much as you think they are
Everyone is making a bet on an unknown future
Study more failures than successes

🎯 Quick Survey, I Want to Hear from You!

How do you learn ?

I’ve made a short (2-minute) survey to gather your thoughts. Your input will help me create more relevant content for future newsletters! Click here to fill out the survey. Thanks in advance, I read every response! 🙌

🧡 Thanks for Reading!

If you enjoyed this, feel free to share it or hit reply. I’d love to hear your thoughts. Until next time, keep learning and building!

Sumonta Saha Mridul, Associate Software Engineer I, Cefalo Bangladesh Ltd.

How to Run Frontend & Backend Together with One Command (No Docker Needed)

Sumonta Saha Mridul — Tue, 10 Jun 2025 02:39:02 +0000

If you’ve ever worked on a full-stack project, you probably know the pain of running two separate servers, one for the frontend (like React or Vue) and one for the backend (Node.js, FastAPI, etc.).

Lately, I’ve been working on an internal project where both the frontend and backend are in the same folder. And honestly, opening two terminals every single day just to start both servers became super boring and repetitive. Same project, same routine: open terminal, run frontend, run backend. It started to feel like a chore. So I finally decided to look for a smoother way to handle this.

In this blog post, you’ll learn how to automate running both frontend and backend servers with a single command, whether you're using PowerShell, CMD, or VS Code’s internal terminal with a task runner

Assuming you don't know about Docker

📁 Project Root
├── frontend     # React + Vite
├── backend      # Node.js + Express
└── README.md

🔧 Method 1: Using PowerShell or CMD Script

This method is ideal for Windows users. You can create a .bat script that opens two terminals and runs the frontend and backend simultaneously.

Into the root directory, create a file run-dev.bat and copy-paste the following command

✅ Script: `run-dev.bat`

@echo off
echo Starting both frontend and backend development servers...
start cmd /k "cd frontend && npm run dev"
start cmd /k "cd backend && npm run start:dev"

⚠️ Replace your frontend & backend start command

📌 How it works:

@echo off prevents command echoing.
start cmd /k opens a new terminal and keeps it running (/k).
Next, each command navigates to the respective folder and starts that particular dev server.

🟢 How to Use:

Double-click it, or run it from PowerShell: .\run-dev.bat

✅ Pros:

No need to open terminals manually.
Simple and native on Windows.

⚠️ Cons:

Limited to Windows (won't work on macOS/Linux).
Opens external terminal windows, which can clutter your workspace.

🧠 Method 2: Using VS Code's Built-in Task Runner

For a cross-platform and more elegant solution within VS Code, you can define custom tasks to run both servers in parallel inside VS Code terminals.

⚙️ Step 1: Add this to `.vscode/tasks.json`

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Frontend",
      "type": "shell",
      "command": "cd frontend; npm run dev",
      "presentation": {
        "reveal": "always",
        "panel": "new"
      },
      "problemMatcher": []
    },
    {
      "label": "Backend",
      "type": "shell",
      "command": "cd backend; npm run start:dev",
      "presentation": {
        "reveal": "always",
        "panel": "new"
      },
      "problemMatcher": []
    },
    {
      "label": "Start Development",
      "dependsOrder": "parallel",
      "dependsOn": ["Frontend", "Backend"],
      "problemMatcher": []
    }
  ]
}

🟢 How to Use:

Save the file in your project under .vscode/tasks.json.
Press Ctrl+Shift+P → type Run Task → choose Start Development.

✅ Pros:

Works cross-platform (Windows, macOS, Linux).
Keeps everything inside VS Code.
Clean terminal management.

⚠️ Cons:

Requires VS Code configuration.
Might be unfamiliar to beginners.

🧑‍💻 Bonus: Use `npm-run-all` for Package Script Automation

If you want a platform-independent solution using just package.json, try npm-run-all.

🔧 Install:

npm install npm-run-all --save-dev

🛠️ `package.json` Example:

"scripts": {
  "frontend": "cd frontend && npm run dev",
  "backend": "cd backend && npm run start:dev",
  "start:dev": "run-p frontend backend"
}

🟢 How to Run:

npm run start:dev

run-p stands for "run parallel".

✅ Pros:

No VS Code or OS-specific configuration needed.
Single command to run both.

🏁 Conclusion

No matter which method you prefer: batch script, VS Code tasks, or npm automation. You now have multiple pro-level ways to start both your frontend and backend with a single command.

Pick the one that fits your workflow and stop wasting time switching terminals!

💡 Which Should You Use?

Method	Best For	OS	UI
PowerShell Script	Windows Users	Windows	Opens external terminals
VS Code Tasks	VS Code fans	All	Integrated terminal
npm-run-all	Platform independence	All	CLI

🧡 Thanks for Reading!

That’s all for this week! Thanks for reading — I hope something here sparked your curiosity or helped you see tech from a new angle. If you enjoyed this, feel free to share it or hit reply. I’d love to hear your thoughts. Until next time, keep learning and building!

— Sumonta Saha Mridul, Associate Software Engineer I, Cefalo Bangladesh Ltd.

Donate if you wish to support 💗: [Bkash - Rocket] [Buy Me a Book]

Subscribe Weekly Newsletter : Learn & Code Weekly

How to Get Daily GitHub Follower Updates via Email (No Coding Needed!)

Sumonta Saha Mridul — Fri, 28 Mar 2025 09:33:16 +0000

Are you tired of manually checking your GitHub profile to see who followed you? What if you could get daily email notifications with your latest GitHub followers—without writing a single line of code?

In this step-by-step guide, I’ll show you how to set up an automated GitHub Follower Notification Bot that sends you email updates. Whether you're a developer, open-source contributor, or just curious about your GitHub growth, this tool will save you time and keep you informed.

🚀 Why You Need GitHub Follower Email Notifications

Stay updated without logging into GitHub daily.
Track your growth and engagement effortlessly.
No coding skills required—just follow simple steps.
Fully automated—set it once and forget it!

🔧 What You’ll Need

Before we begin, make sure you have:

✅ A GitHub account
✅ A Gmail account (for email notifications)
✅ 5 minutes to set everything up

For Detailed Setup Guide

📥 Step 1: Fork the GitHub Follower Notification Bot

Go to the GitHub Follower Notification Bot repository.
Click "Fork" (top-right corner) to create your own copy.
Fork the repository

⚙️ Step 2: Configure Your GitHub Token

To let the bot access your follower data, you need a GitHub Personal Access Token (PAT).

Go to GitHub Settings > Developer Settings > Personal Access Tokens.
Click "Generate new token".
Give it a name (e.g., Follower-Bot).
Select the repo and user scopes.
Click "Generate token" and copy it (you won’t see it again!).

⚠️ Keep this token private! Never share it publicly.

📧 Step 3: Set Up Email Notifications

The bot uses Gmail to send notifications. Here’s how to configure it:

Enable "Less Secure Apps" in Gmail (or use an App Password if 2FA is enabled).
Go to Google Account Security.
Turn on "Allow less secure apps" (or generate an App Password).
Add Secrets to Your Repository
Go to your forked repo → Settings → Secrets → Actions.
Add these secrets:

Secret Name Value
GITHUB_TOKEN    Your GitHub PAT (from Step 2)
GMAIL_USERNAME  Your Gmail (e.g., you@gmail.com)
GMAIL_PASSWORD  Your Gmail password/App Password
RECIPIENT_EMAIL Email where you want updates

🔄 Step 4: Run the Bot Daily (Automatically!)

The bot uses GitHub Actions to check for new followers every day.

Go to the "Actions" tab in your repo.
Click "Enable Workflows".

The bot will now run daily at 12:00 AM UTC.

🎉 Done! You’ll now get email updates whenever someone follows you on GitHub.

🔍 Troubleshooting & FAQs

❓ Why am I not getting emails?

Check Gmail spam folder.
Ensure GitHub Actions ran successfully (check the logs).

❓ Can I change the notification frequency?

Yes! Edit the .github/workflows/main.yml file and adjust the cron schedule.

❓ Is this secure?

Yes! Your token and email credentials are stored securely in GitHub Secrets.

📢 Final Thoughts

Now you can track your GitHub followers effortlessly with zero manual work. This bot is perfect for:

Developers who want to monitor their GitHub growth.
Open-source maintainers tracking community engagement.
Anyone who loves automation!

👉 Try it now: GitHub Follower Notification Bot
💬 Have questions? Drop a comment below or reach out on LinkedIn or GitHub.
🔔 Want more automation tips? Subscribe to my YouTube channel for more tutorials!

By following this guide, you’ll never miss a GitHub follower again! 🚀 Let me know how it works for you. Happy coding! 😊

Portfolio That Got Me CGPA 4 in university | Built with HTML, CSS & JavaScript

Sumonta Saha Mridul — Sat, 22 Mar 2025 11:25:18 +0000

Reflecting on the golden days of university life, when my first portfolio was born—crafted with just HTML, CSS, and JavaScript. It wasn’t just code; it was a journey of learning, growth, and endless possibilities. Though I’ve moved on to new creations, that humble beginning will always remind me of where it all started.

In this blog, I’m excited to walk you through my very first portfolio, created during my 3rd year at university! Built with HTML, CSS, and Vanilla JavaScript, this portfolio isn’t just visually appealing—it’s fully responsive across all devices! It showcases my skills, education, achievements, photography, and much more.

🌟 Why This Portfolio Stands Out

Fully Responsive Design:
- Works seamlessly on desktops, tablets, and mobile devices.
- Ensures a smooth user experience for everyone.
Clean and Minimalistic UI:
- Aesthetic design with a focus on simplicity and usability.
- Easy navigation for visitors to explore my work.
Showcase of Skills and Achievements:
- Highlights my technical skills, education, and projects.
- Includes a photography section to showcase my creativity.
Built from Scratch:
- No frameworks or libraries—just pure HTML, CSS, and JavaScript.
- Demonstrates my foundational understanding of web development.

🛠️ Features of the Portfolio

Home Section: A welcoming introduction with a brief about me.
Skills Section: Displays my technical expertise in a visually appealing way.
Education Section: Highlights my academic journey and achievements.
Photography Section: A gallery of my creative work.
Contact Section: Easy-to-use form for visitors to reach out.

🚀 Why I Built This Portfolio

This portfolio was more than just a project—it was a stepping stone in my career. It helped me:

Secure internships and job opportunities.
Showcase my skills to potential employers and collaborators.
Learn the fundamentals of web development in a practical way.

It also played a key role in helping me achieve a CGPA of 4.0 in university by demonstrating my dedication and ability to apply theoretical knowledge to real-world projects.

🔗 Check Out the Project

You can explore the portfolio yourself and see how it works:

Portfolio Link: https://sumonta056.github.io/
GitHub Repository: https://github.com/Sumonta056/sumonta056.github.io

💬 Your Thoughts Matter!

I’d love to hear your feedback on this project! Drop a comment below and let me know:

What do you think of the design and functionality?
Do you have any suggestions for improvement?
Would you like to see more projects like this?

If you enjoyed this blog, don’t forget to hit the like button and share it with your friends!

📌 Why You Should Build Your Own Portfolio

If you’re a student or a beginner in web development, I highly recommend building your own portfolio. Here’s why:

Showcase Your Skills: It’s the best way to display your abilities to potential employers.
Learn by Doing: Building a portfolio helps you apply what you’ve learned in a practical way.
Stand Out: A unique portfolio can set you apart from the crowd.

🎥 Watch the Video Walkthrough

For a more detailed look at the portfolio, check out the video on my channel:

Video Title: Portfolio That Got Me CGPA 4 in University | Built with HTML, CSS & JavaScript

Don’t forget to subscribe to my channel for more videos like this!

🌱 Final Thoughts

This portfolio will always hold a special place in my heart. It reminds me of the late nights, the debugging sessions, and the joy of seeing my work come to life. It’s a testament to how far I’ve come and a reminder of the endless possibilities that lie ahead.

If you’re just starting out, remember: Every great journey begins with a single step. Start building, keep learning, and never stop growing.

Let’s connect! Feel free to reach out to me on LinkedIn or GitHub.

Nice One!

Sumonta Saha Mridul — Thu, 20 Mar 2025 15:58:16 +0000

Portfolio That Got CGPA 4 in University | Built with HTML, CSS & JavaScript | Web Development

Promi Mojumder ・ Mar 20

#webdev #javascript #html #css

I Built This GitHub README to Land My Dream Software Internship!

Sumonta Saha Mridul — Wed, 19 Mar 2025 03:49:28 +0000

I've always liked to arrange my things properly and decorate them nicely, and the same goes for my GitHub profile README. I want it to look good and attract others, and it feels great when someone praises me for organizing it so well. I designed it to be an interactive showcase of my skills, projects, and contributions.

🔥 What You’ll Find in My GitHub Profile README:

Professional Overview – Structured introduction highlighting expertise.
Pinned Projects – Showcasing top open-source contributions.
Tech Stack – Organized list of specialized tools & technologies.
GitHub Stats & Contributions – Dynamic visuals tracking coding journey.
Latest Blog Posts & YouTube Content – Regular updates on learning & contributions.
Different Coding Stacks – Highlighting proficiency across multiple stacks.
Photograph Showcase – Personal and professional snapshots.
Achievements – List of key accomplishments and recognitions.

If you’re looking for inspiration to build your own GitHub profile README or just want to explore cool open-source projects, this is for you! I’ve crafted it to stand out to recruiters, developers, and tech enthusiasts.

📽️ Watch My Walkthrough Video: YouTube Video
👉 Check it out here: GitHub Profile
👨‍💻 Let’s Connect on LinkedIn: LinkedIn Profile

Want a full tutorial on creating an awesome GitHub README? If this video gets 5 comments requesting a tutorial, I'll make a step-by-step guide soon!

Let me know your thoughts, and feel free to drop a ⭐ if you like it! 💻Subscribe my channel to grow!

Set Up ShadCN UI with Tailwind CSS v3 & React 19: Fix Import Errors Like a Pro!

Sumonta Saha Mridul — Wed, 19 Mar 2025 03:43:15 +0000

In this tutorial, we’ll walk you through setting up ShadCN UI in your Vite + React 19 project with Tailwind CSS v3. You’ll learn how to install ShadCN UI, configure tsconfig.app.json to resolve path conflicts, and fix import errors using legacy peer dependencies. Plus, we’ll add a button component and customize it with a destructive variant. If you’re facing TypeScript errors, we’ve got a quick fix for that too!

🔹 Topics Covered:

✅ Install ShadCN UI & Fix npm Dependency Issues
✅ Add Components (Button, Navbar) with Tailwind CSS
✅ Solve TypeScript Errors & Configure Aliases in vite.config.ts
✅ Apply Custom Styles & Theme Variants

Missed our previous video?

Watch it here: React, Tailwind CSS & TypeScript Setup | Step-by-Step Vite Tutorial

👨‍💻 Follow us on GitHub and LinkedIn:

GitHub: https://github.com/Sumonta056
LinkedIn: https://www.linkedin.com/in/sumonta-saha-mridul-b35bb61a0/

I Built This GitHub README to Showcase My Skills & Get an Internship at a Software Company!

Sumonta Saha Mridul — Tue, 18 Feb 2025 09:16:48 +0000

Hey everyone! This is my first time sharing my GitHub profile README here, and I’d love your feedback!

🔥 What You’ll Find in My GitHub Profile README:

Professional Overview – Structured introduction highlighting expertise.
Pinned Projects – Showcasing top open-source contributions.
Tech Stack – Organized list of specialized tools & technologies.
GitHub Stats & Contributions – Dynamic visuals tracking coding journey.
Latest Blog Posts & YouTube Content – Regular updates on learning & contributions.
Different Coding Stacks – Highlighting proficiency across multiple stacks.
Photograph Showcase – Personal and professional snapshots.
Achievements – List of key accomplishments and recognitions.

📽️ Watch My Walkthrough Video: YouTube Video
👉 Check it out here: GitHub Profile
👨‍💻 Let’s Connect on LinkedIn: LinkedIn Profile

Want a full tutorial on creating an awesome GitHub README? If this video gets 5 comments requesting a tutorial, I'll make a step-by-step guide soon!

Let me know your thoughts, and feel free to drop a ⭐ if you like it! 💻Subscribe my channel to grow!

How to Contribute to Open Source: A Step-by-Step Guide for Beginners

Sumonta Saha Mridul — Sun, 06 Oct 2024 05:53:43 +0000

🚀 Contribute to Open Source this Hacktoberfest!🌟

Are you ready to dive into open source but unsure where to begin? 🤔 Check out our latest blog post for a simple, beginner-friendly guide to get started with open-source contributions this @Hacktoberfest! 🍂🎉

👉 How to Contribute to Open Source: A Step-by-Step Guide for Beginners: ( 🔗 Complete Blog Link )

Perfect for anyone looking to make their first contribution and be part of the open-source community! 💻✨

GitHub Readme Template: For Personal Projects

Sumonta Saha Mridul — Mon, 09 Sep 2024 02:22:04 +0000

🧑‍💻 GitHub Template Link : 🔗 Click Here

⭐ If you like this template, please star the repository! ⭐

📝 Why use a good GitHub README ?

Your project’s GitHub README is its front door—the first thing a visitor sees. Whether you're building a portfolio, an open-source tool, or just experimenting, your README should reflect the heart and soul of your work. But where do you start?

Creating an effective README doesn’t just tell users what your project is; it invites them to engage with it, contribute to it, and explore its potential. A well-structured README is the difference between a project that sits untouched in a repository and one that sparks interest and collaboration.

In this guide, we'll explore a simple yet powerful template that will help your personal projects shine on GitHub. We'll cover everything from introducing your project to getting people involved in contributing. By the end, you’ll have a README that not only informs but also inspires.

✍️ Table of Contents (Things a good readme should have)

🫥 Project Introduction
📝 Project Overview and Features
⛏️ Tech Stack, APIs, and Other Resources
🧑‍💻 Getting Started: Setup and Running Instructions
🤝 How to Contribute and Report Issues
🔥 Conclusion and License

🫥 Project Introduction

The first step in creating a captivating README is a clear and concise project introduction. This section is your chance to capture the reader’s attention and let them know what your project is all about. Keep it brief but impactful—one or two sentences should be enough to convey the essence of your project.

Key Points to Include:

What is your project icon?
What is your project name and short bio ?
What is your project tech-stack based on ?
What is your project demo ?

Example : 🔗 Code For Introduction Here

This intro gives readers an immediate understanding of the project’s purpose, helping them decide if they want to dive deeper. With this clarity, you set the tone for the rest of your README.

📝 Project Overview and Features

Once you’ve grabbed the reader’s attention, it’s time to dive into the details with a project overview. This section is where you lay out the core functionality of your project and showcase its key features. It's important to keep this clear and well-organized, so users can quickly understand the scope of your project.

Key Points to Include:

Project Description: A brief but detailed explanation of how your project works.
Key Features: List the core features your project offers. Highlight anything unique or especially useful.
Screenshots or Demos: If possible, include visuals like screenshots or links to demo videos. This gives readers a quick understanding of the UI/UX and functionality.

Example : 🔗 Project Overview and Features

Adding this level of detail not only informs but entices users to explore your project further. It also sets a professional tone, signaling that your project is well thought out and worthy of attention.

⛏️ Tech Stack, APIs, and Other Resources

This section explains the technology behind your project. Here, you can show off the tools and resources that make your project possible. It helps fellow developers quickly understand the project’s technical foundation and whether it's something they can work with or contribute to.

Key Points to Include:

Tech Stack: List the primary programming languages, frameworks, and libraries you used.
APIs: Mention any external APIs or services your project relies on.
Other Resources: If your project includes external documentation, datasets, or tutorials, link to them here.

Example: 🔗 Tech Stack, APIs, and Other Resources

🧑‍💻 Getting Started: Setup and Running Instructions

In this section, you'll guide users through setting up your project on their local machines. It’s crucial to make this as straightforward as possible, ensuring users can get your project up and running quickly.

Key Points to Include:

Prerequisites: List the software users need to have installed (e.g., Node.js, Python, Docker).
Installation Steps: Provide step-by-step instructions for cloning the repo, installing dependencies, and setting up the environment.
Running the Project: Explain how to start the project (e.g., with specific commands or configurations).
API Documentation: If your project includes an API, provide a brief guide on how to use it, including any authentication or endpoint details.

Example : 🔗 Getting Started: Setup and Running Instructions

🤝 How to Contribute and Report Issues

This section is essential if you want to encourage collaboration on your project. A friendly and welcoming tone here can go a long way in attracting contributors.

Key Points to Include:

Contribution Guidelines: Mention how users can contribute to your project, including submitting pull requests or feature suggestions.
Reporting Issues: Explain how users can report bugs or request new features (e.g., via GitHub issues).
Code of Conduct: If applicable, link to a code of conduct to maintain a positive and inclusive environment.

Example : 🔗 How to Contribute and Report Issues

🔥 Conclusion and License

Wrap up the README by thanking users for checking out the project. Encourage them to star the repository if they find it helpful, and include the project's licensing information.

Example : 🔗 Conclusion and License

This structure ensures your GitHub README is thorough, user-friendly, and inviting for collaboration

🔗 Got Suggestions? Let’s Connect!

Thank you for taking the time to read through this guide! If you have any suggestions, improvements, or feedback on the GitHub README template, I’d love to hear from you. Feel free to share your thoughts by opening an issue or contributing to the discussion.

Also, if you’d like to stay connected and see more of my work, follow me on GitHub and LinkedIn:

GitHub: @sumonta056
LinkedIn: Sumonta Saha Mridul

I’m always excited to connect with fellow developers, contributors, and tech enthusiasts!

Top 5 Must-Try GitHub Extensions to Boost Your Workflow

Sumonta Saha Mridul — Wed, 07 Aug 2024 07:16:58 +0000

📃 GitHub is an essential tool for developers, but sometimes its interface can be limiting when you're managing large projects or multiple repositories. Fortunately, there are several browser extensions that can enhance your GitHub experience by adding useful features and streamlining your workflow.

❓ Here, we'll explore five must-try extensions that can help you get the most out of GitHub, whether you're tracking repository sizes, downloading specific files, or improving your code navigation and review process.

1️⃣ GitHub Repo Size: Show Size Summaries of GitHub Repos

🔗 Extension Link: GitHub Repo Size - Chrome Web Store

Do you want to know the size of a GitHub repository without cloning it first? This extension is here to help! With it, you can:

🔍 View the total size of repositories.
📁 See the sizes of all individual folders and files.
🔑 Access your own private repositories' size information.

This handy tool provides a summary of the repository's size and contents directly from its home page, so you don't need to download anything.

Note: For Private Repository, you have to give access using GitHub token

2️⃣ GitZip: Download Specific Files or Folders from GitHub

🔗 Extension Link: GitZip for Github - Chrome Web Store

Tired of downloading an entire GitHub project just for a few files or folders you need?

GitZip is here to simplify the process. This tool allows you to select specific sub-directories and files from a GitHub repository, create a ZIP file, and download it directly.

Why Use GitZip?

You can download only the files or folders you need without downloading the entire project.

How to Use GitZip?

Browse Any GitHub Repository Page:
- Navigate to the repository you want to download files from.
Two Ways to Download: Choose the Items:
- Double-click on the items or check the checkbox in front of them.
- Click the download button at the bottom-right corner of the page. In the Context Menu:
- Click "GitZip Download" > "Whole Repository" or "Current Folder" to download entire sections.
- Hover over an item and click "GitZip Download" > "Selected Folder/File" to choose specific files or folders.
- After selecting items (as in step 2.1.1), click "GitZip Download" > "Checked Items."
See the Progress:
- A progress dashboard will appear, showing the download status. Wait for the browser to trigger the download.
Get the ZIP File:
- Once the process is complete, you'll have a ZIP file containing only the items you've selected.

GitZip makes it easy to download just the parts of a GitHub repository that you need, saving you time and bandwidth.

3️⃣ Material Icons for GitHub

🔗 Extension Link: Material Icons for GitHub - Chrome Web Store

Enhance your file browsing experience on websites like GitHub, Azure, and Bitbucket by replacing default icons with Visual Studio Code's Material Icon Theme icons. This extension pulls icons and replacement lists directly from the open-source vscode-material-icon-theme.

Features:

Consistent Visuals: Use the same icons in your code editor and on sites like GitHub for seamless navigation.
Quick Identification: Easily identify file types, configuration files, and project scaffolding at a glance.
Open Source: Based on the popular Visual Studio Code extension, ensuring a wide range of icons and regular updates.

Simplify and streamline your workflow with a unified icon theme across your development tools and platforms.

4️⃣ Octo Tree - GitHub code tree

🔗 Extension Link: Octo Tree - Chrome Web Store

Boost your GitHub experience with this powerful browser extension designed to enhance code review and exploration.

Features:

Fast IDE-like Code Tree: Navigate your codebase with an efficient, IDE-like file explorer.
Quick Search in Tree Format: Easily search and locate files, issues, and more in a structured tree view.
Bookmarking: Save and manage bookmarks for repositories, issues, pull requests, and files for quick access.
Private Repository Access: Securely work with both public and private repositories.
High Performance: Optimized for speed and efficiency, capable of handling repositories of any size without lag.

Enhance your productivity and streamline your workflow with GitHub on Steroids.

5️⃣ Refined GitHub

🔗 Extension Link: Refined GitHub - Chrome Web Store

Refined GitHub simplifies the GitHub interface and adds over 200 useful features to improve your workflow.

Highlights:

Linkify References: Automatically convert issue/PR references and URLs in code into clickable links.
Visible Whitespace: Display whitespace characters for better code readability.
Tab Size Adjustment: Reduce tab size to 4 spaces for consistency.
Merge Conflict Fixers: Resolve merge conflicts with a single click.
Reaction Avatars: View avatars of users who reacted to comments.
Revert Changes: Easily revert all changes to a file in a PR with one click.
Build Status Icons: Display build/CI status icons next to the repository name.
Markdown Source View: Add a button to view the source of Markdown files.
File-Specific PRs: Show pull requests that affect the current file.
Highlight Key Comments: Emphasize the most useful comments in discussions.
Git Tag Inclusion: Show the first Git tag a merged PR was included in.
Changelog Links: Provide links to automatic changelogs for each tag/release.
404 Page Enhancements: Suggest possible related pages and alternatives on 404 pages.
Repository Age: Display the age of the repository in the sidebar.

And so much more! Explore the website for a complete list of features.

More GitHub Extensions:

For even more options, explore a collection of awesome browser extensions for GitHub and discover more ways to enhance your development process.

🔗 Extensions Link: A collection of awesome browser extensions for GitHub.

These five extensions provide a variety of features that enhance your GitHub experience, making it more efficient and enjoyable. From managing repository sizes to customizing the interface, these tools offer something for every developer. Be sure to check out each one and see how they can fit into your workflow.

If you found these suggestions helpful, be sure to follow me for more insights and recommendations. You can also check out my GitHub profile to see what I'm working on. I’d love to hear about your favorite GitHub extensions, so feel free to share them in the comments!

DEV Community: Sumonta Saha Mridul

My Code Review Experience as a Junior Developer: What I Learned and How to Review as a Team?

🔑 1. Mindset: You are a mentor, not a Judge

🎯 2. Tone is the Key

🧭 3. Follow a Framework: The CEDAR Feedback Model

4. My Todo List: What to look for in code reviews?

✅ Basic

✅ Design Review

✅ Functionality Review

✅ Complexity

✅ Naming & Documentation

✅ Performance & Security

💬 5. Give Feedback That Teaches

🤝 Remember:

📌 Useful Resources

How to Use AI Effectively in Coding & Development? How to have a Senior Developer Mindset?

✨ Quote of the Week

How to Use AI Effectively in Software Engineering?

Interesting Fact

Things I Wish I Knew Earlier: (Taken from some articles)

7 Signs You’re a Tech Lead Already?

Tools and Resources

Final Thoughts

🎯 Quick Survey, I Want to Hear from You!

How to Run Frontend & Backend Together with One Command (No Docker Needed)

🔧 Method 1: Using PowerShell or CMD Script

✅ Script: run-dev.bat

📌 How it works:

🟢 How to Use:

✅ Pros:

⚠️ Cons:

🧠 Method 2: Using VS Code's Built-in Task Runner

⚙️ Step 1: Add this to .vscode/tasks.json

🟢 How to Use:

✅ Pros:

⚠️ Cons:

🧑‍💻 Bonus: Use npm-run-all for Package Script Automation

🔧 Install:

🛠️ package.json Example:

🟢 How to Run:

✅ Pros:

🏁 Conclusion

💡 Which Should You Use?

How to Get Daily GitHub Follower Updates via Email (No Coding Needed!)

🚀 Why You Need GitHub Follower Email Notifications

🔧 What You’ll Need

For Detailed Setup Guide

📥 Step 1: Fork the GitHub Follower Notification Bot

⚙️ Step 2: Configure Your GitHub Token

📧 Step 3: Set Up Email Notifications

🔄 Step 4: Run the Bot Daily (Automatically!)

🔍 Troubleshooting & FAQs

📢 Final Thoughts

Portfolio That Got Me CGPA 4 in university | Built with HTML, CSS & JavaScript

🌟 Why This Portfolio Stands Out

🛠️ Features of the Portfolio

🚀 Why I Built This Portfolio

🔗 Check Out the Project

💬 Your Thoughts Matter!

📌 Why You Should Build Your Own Portfolio

🎥 Watch the Video Walkthrough

🌱 Final Thoughts

Nice One!

Portfolio That Got CGPA 4 in University | Built with HTML, CSS & JavaScript | Web Development

Promi Mojumder ・ Mar 20

I Built This GitHub README to Land My Dream Software Internship!

Set Up ShadCN UI with Tailwind CSS v3 & React 19: Fix Import Errors Like a Pro!

Missed our previous video?

👨‍💻 Follow us on GitHub and LinkedIn:

I Built This GitHub README to Showcase My Skills & Get an Internship at a Software Company!

How to Contribute to Open Source: A Step-by-Step Guide for Beginners

🚀 Contribute to Open Source this Hacktoberfest!🌟

👉 How to Contribute to Open Source: A Step-by-Step Guide for Beginners: ( 🔗 Complete Blog Link )

GitHub Readme Template: For Personal Projects

🧑‍💻 GitHub Template Link : 🔗 Click Here

📝 Why use a good GitHub README ?

✍️ Table of Contents (Things a good readme should have)

🫥 Project Introduction

📝 Project Overview and Features

⛏️ Tech Stack, APIs, and Other Resources

✅ Script: `run-dev.bat`

⚙️ Step 1: Add this to `.vscode/tasks.json`

🧑‍💻 Bonus: Use `npm-run-all` for Package Script Automation

🛠️ `package.json` Example: