Logo Ekbal's Blog

Search Blog

Self-Taught MERN Stack গাইড (বাংলায় – ২০২৫)

Asif Ekbal Asif Ekbal
May 11, 2025
11 min read
reactjs javascript mongodb expressjs nodejs git mern stack tailwindcss
index

MERN Stack কী এবং কেন শিখবেন?

MERN Stack একটি খুবই জনপ্রিয় ওয়েব ডেভেলপমেন্ট টেকনোলজি স্ট্যাক । যেটি তুলনামূলক ভাবে সহজ এবং শক্তিশালী। এ স্ট্যাক এ প্রধানত আমাদের চারটি জিনিস শিখতে হয় এবং পাশাপাশি কিছু বেসিক টুলস। সেগুলি মূলত:

  • MongoDB – ডেটাবেসের জন্য
  • Express.js – সার্ভার সাইড অ্যাপের জন্য
  • React.js – ফ্রন্টএন্ড ইউআই তৈরির জন্য
  • Node.js – জাভাস্ক্রিপ্ট দিয়ে সার্ভার চালানোর জন্য

MERN Stack দিয়ে আপনি একদম শুরু থেকে একটি ফুল-ফিচারড ওয়েব অ্যাপ্লিকেশন বানাতে পারেন – ফ্রন্টএন্ড, ব্যাকএন্ড ও ডেটাবেস সহ। এটি সম্পূর্ণ JavaScript ভিত্তিক, তাই এক ভাষা দিয়েই পুরো অ্যাপ্লিকেশন তৈরি করা যায়।

কেন শিখবেন?

  • ফুল-স্ট্যাক ডেভেলপারের চাহিদা বাংলাদেশে সবচেয়ে বেশি
  • JavaScript অনেক জনপ্রিয় একটি ল্যাঙ্গুয়েজ
  • ফ্রিল্যান্সিং বা চাকরির ক্ষেত্রে এ স্ট্যাক এ অনেক opportunity রয়েছে
  • কমিউনিটি অনেক বড় তাই যেকোনো সমস্যার সহজেই সমাধান পাওয়া যায়

শিখতে কত সময় লাগতে পারে?

পুরো MERN Stack শেখা সম্পূর্ণরূপে আপনার সময় ও পরিশ্রমের ওপর নির্ভর করে। কেউ খুব দ্রুত শিখে ফেলতে পারে আবার কারোর অনেক সময় লেগে যেতে পরে। তবে গড় সময় হিসেব করলে:

লার্নিং পার্টআনুমানিক সময়
HTML, CSS১–২ সপ্তাহ
JavaScript৩–৪ সপ্তাহ
React.js৩–৪ সপ্তাহ
Node + Express২–৩ সপ্তাহ
MongoDB১–২ সপ্তাহ
প্রজেক্ট + প্র্যাকটিস৩–৪ সপ্তাহ

👉 অর্থাৎ, নিয়মিত চর্চা করলে ৩–৪ মাসে আপনি একটি ভালো দক্ষতা অর্জন করতে পারেন।

ওয়েবের বেসিক (Foundational Web Technologies)

একজন MERN Stack ডেভেলপার হিসেবে আপনার প্রথম কাজ হচ্ছে ওয়েব ডেভেলপমেন্টের বেসিকগুলো শেখা। এর মধ্যে HTML, CSS, ও JavaScript সবচেয়ে গুরুত্বপূর্ণ। এগুলি ছাড়া ওয়েব ডেভলপমেন্ট কল্পনাও করা সম্ভব নাহ্।

১. HTML (HyperText Markup Language)

HTML হলো একটি মার্কআপ ল্যাংগুয়েজ, যা দিয়ে একটি ওয়েব পেজের স্ট্রাকচার তৈরি করা হয়। হেডিং, লিংক, ছবি — সবকিছুর ভিত্তি HTML। আর অবশ্যই মনে রাখবেন, HTML কোনো প্রোগ্রামিং ল্যাঙ্গুয়েজ না বরং এটি একটি মার্কআপ ল্যাঙ্গুয়েজ।😅

📘 ফ্রি রিসোর্স:

২. CSS (Cascading Style Sheets)

CSS ব্যবহার করে HTML দিয়ে তৈরি করা কনটেন্টকে সুন্দর ডিজাইন ও স্টাইল দেওয়া হয়। আমরা কালার, লেআউট, রেসপনসিভ ডিজাইন সব CSS দিয়েই করে থাকি।

📘 ফ্রি রিসোর্স:

আপনি যখন CSS দিয়ে মোটামুটি মানের ডিজাইন তৈরি করতে সক্ষম হবেন তখন আপনি শিখতে পারেন Bootstrap 5 or TailwindCSS। CSS ফ্রেমওয়ার্ক ব্যবহার করে আমার খুব সহজেই সুন্দর সুন্দর ডিজাইন তৈরি করে ফেলতে পরি।

৩. JS (JavaScript language)

JavaScript হলো একটি প্রোগ্রামিং ল্যাংগুয়েজ যা ওয়েব পেজকে ইন্টার‍্যাকটিভ করে তোলে। বাটন ক্লিক, ফর্ম ভ্যালিডেশন, API কল — এসব সবই JS এর মাধ্যমে হয়।

📘 ফ্রি রিসোর্স:

ভার্সন কন্ট্রোল ও GitHub/Git

একজন প্রফেশনাল ডেভেলপার হিসেবে আপনাকে শুধু কোড লিখতে না, সেই কোড কীভাবে ম্যানেজ করবেন তাও জানতে হবে। এখানেই আসে Git ও GitHub।

Git কী?

Git হলো একটি ভার্সন কন্ট্রোল সিস্টেম। আপনি আপনার কোডের প্রতিটি পরিবর্তন ট্র্যাক করতে পারবেন, পুরাতন ভার্সনে ফিরে যেতে পারবেন, এবং একাধিক ডেভেলপার একসাথে একই প্রজেক্টে কাজ করতে পারবেন।

GitHub কী?

GitHub হলো একটি ক্লাউড-ভিত্তিক Git রিপোজিটরি হোস্টিং প্ল্যাটফর্ম। এখানে আপনি আপনার কোড অনলাইনে রাখতে, শেয়ার করতে, এবং অন্যদের সাথে কাজ করতে পারবেন।

📘 ফ্রি রিসোর্স:

প্রথমেই git init, git add, git commit এই কমান্ডগুলোর ব্যবহার শিখুন। নিজের একটি প্রজেক্ট GitHub-এ আপলোড করার মাধ্যমে অভ্যাস শুরু করুন। প্রতিদিনের কাজ Git দিয়ে সেভ করার চেষ্টা করুন, যেন স্বাভাবিকভাবে version control ব্যবহার করা শিখে যান।

React JS - The UI library

React.js হলো একটি জনপ্রিয় JavaScript লাইব্রেরি, যা দিয়ে ইউজার ইন্টারফেস (UI) তৈরি করা হয়। React-এর মাধ্যমে আপনি দ্রুত, ইন্টার‍্যাকটিভ এবং স্কেলেবল ওয়েব অ্যাপ্লিকেশন তৈরি করতে পারবেন।

React-এর মূল ধারণা

React মূলত “কম্পোনেন্ট”-ভিত্তিক। আপনি অ্যাপ্লিকেশনের UI কে ছোট ছোট টুকরো বা কম্পোনেন্টে ভাগ করে তৈরি করেন। প্রতিটি কম্পোনেন্ট নিজস্ব স্টেট ও প্রপস নিয়ে কাজ করে, এবং যখন ডেটা পরিবর্তন হয়, তখন কেবলমাত্র সেই কম্পোনেন্ট রেন্ডার হয়।

JSX (JavaScript XML)

JSX হলো একটি সিনট্যাক্স এক্সটেনশন যা React কোডে HTML এর মতো কোড লেখার সুবিধা দেয়। JSX কম্পাইল হয়ে JavaScript কোডে রূপান্তরিত হয়।

State & Props

  • State: প্রতিটি কম্পোনেন্টের নিজস্ব ডেটা যা সেই কম্পোনেন্টের ইন্টার‍্যাকশন ও UI নিয়ন্ত্রণ করে।
  • Props: কম্পোনেন্টের বাইরের থেকে ডেটা পাস করা হয় props এর মাধ্যমে। এটা “কম্পোনেন্টের প্রপার্টি” হিসেবে কাজ করে।

📘 ফ্রি রিসোর্স:

প্রথমে ছোট ছোট কম্পোনেন্ট তৈরি করুন এবং প্রতিটি কম্পোনেন্টের স্টেট ও props কিভাবে কাজ করে তা বুঝুন। React-এর সাথে Hooks (যেমন useState, useEffect) নিয়ে কাজ করা শিখুন। আপনি তৈরি করতে পারেন একটি TODO অ্যাপ বা একটা ছোট ব্লগ অ্যাপ।

Node JS এবং Express JS

Node.js হলো একটি সার্ভার সাইড JavaScript রানটাইম, যা দিয়ে আপনি JavaScript ব্যবহার করে সার্ভার সাইড কোড লিখতে পারবেন। Express.js হলো Node.js এর জন্য একটি জনপ্রিয় ওয়েব ফ্রেমওয়ার্ক, যা সার্ভার তৈরি এবং রাউটিং এ সাহায্য করে।

Node.js কী?

Node.js হলো একটি JavaScript রানটাইম, যা V8 জাভাস্ক্রিপ্ট ইঞ্জিন ব্যবহার করে। এটি একটি এক্সিকিউটেবল অ্যাপ্লিকেশন, যা মূলত non-blocking I/O ফিচার দিয়ে কাজ করে। অর্থাৎ, এটি দ্রুত এবং স্কেলেবল অ্যাপ্লিকেশন তৈরি করতে সাহায্য করে।

Express.js কী?

Express.js হলো Node.js এর জন্য একটি মিনিমাল এবং ফ্লেক্সিবল ওয়েব ফ্রেমওয়ার্ক, যা ওয়েব অ্যাপ্লিকেশন এবং API তৈরি করতে সহায়তা করে। Express এ আপনি রাউটিং, মিডলওয়্যার, তইরর হ্যান্ডলিং এবং আরও অনেক কিছু সহজেই করে ফেলতে পারেন। সিম্পল কিন্তু শক্তিশালী।

📘 ফ্রি রিসোর্স:

Node.js শেখার আগে JavaScript ভালোভাবে শিখে নিন, কারণ Node.js তে JavaScript ব্যবহার হয়। Express.js এর সাথে middleware, routing, এবং API design নিয়ে কাজ করুন। রিয়েল অ্যাপ্লিকেশন তৈরির সময় Express ব্যবহার করে RESTful API তৈরি করার চেষ্টা করুন।

MongoDB - NoSQL Database

MongoDB হলো একটি NoSQL ডেটাবেস, যা ডেটা স্টোর করতে JSON স্টাইলে ডকুমেন্ট ব্যবহার করে। এটি দিয়ে অনেক বড় বড় অ্যাপ্লিকেশন তৈরি করা সম্ভব।

কেনো MongoDB?

  • স্কেলেবিলিটি: MongoDB সহজে ডেটা স্কেল করতে সহায়তা করে।
  • ফ্লেক্সিবল ডেটা স্ট্রাকচার: JSON স্টাইলে ডেটা স্টোর করার কারণে এতে স্ট্রাকচার খুবই ফ্লেক্সিবল।
  • বড় ডেটার জন্য উপযুক্ত: MongoDB বড় আকারের ডেটাবেসের জন্য আদর্শ।

📘 ফ্রি রিসোর্স:

MongoDB শেখার আগে ডাটাবেসের মৌলিক ধারণা (SQL vs NoSQL) বুঝে নিন। Mongoose লাইব্রেরি ব্যবহার করে MongoDB এর সাথে সহজেই কাজ করতে পারবেন। এটি Node.js এর সাথে MongoDB যুক্ত করার জন্য একটি জনপ্রিয় লাইব্রেরী। MongoDB-তে ডেটা ইনসার্ট, রিড, আপডেট, ডিলিট (CRUD অপারেশন) প্র্যাকটিস করুন।

💡 প্রজেক্ট আইডিয়া ও প্র্যাকটিস

শেখার পাশাপাশি প্রজেক্ট তৈরি করার মাধ্যমে আপনি আপনার শেখা বিষয়গুলো ব্যবহারিকভাবে অনুশীলন করতে পারবেন। এটি আপনাকে সমস্যা সমাধান এবং কোডিং দক্ষতা বৃদ্ধি করতে সাহায্য করবে।

প্রাথমিক প্রজেক্ট আইডিয়া

  1. TODO অ্যাপ
    একটি সিম্পল TODO অ্যাপ তৈরি করুন, যেখানে ব্যবহারকারী নতুন টাস্ক অ্যাড করতে পারে, টাস্ক সম্পন্ন করলে চেকবক্সে ক্লিক করে সেই টাস্কটি সম্পন্ন হিসেবে মার্ক করতে পারে। এতে আপনি React, Node.js, এবং MongoDB এর সাথে কাজ করবেন।

  2. ব্যক্তিগত ব্লগ অ্যাপ
    একটি সিম্পল ব্লগ সাইট তৈরি করুন, যেখানে ব্যবহারকারীরা পোষ্ট লিখতে, সম্পাদনা করতে এবং মুছে ফেলতে পারে। এটির মাধ্যমে আপনি React, Node.js, Express, এবং MongoDB শিখতে পারবেন।

📘 ফ্রি রিসোর্স:

প্রজেক্টে শেখা সব টুলস ও প্রযুক্তি নিয়ে চ্যালেঞ্জিং টাস্ক তৈরি করুন, এতে আপনার কোডিং দক্ষতা বাড়বে। যখন একটি প্রজেক্ট শেষ করবেন, তা GitHub-এ আপলোড করুন এবং ওপেন সোর্স কনট্রিবিউশন শিখুন। রিয়েল-লাইফ প্রজেক্ট করতে গিয়ে আপনাকে বিভিন্ন ধরনের সমস্যার সম্মুখীন হতে হবে, সেগুলোর সমাধান খোঁজার মাধ্যমেও আপনি অনেক কিছু শিখতে পারবেন।

ফাইনাল টিপস ও রিসোর্স

শুধু থিওরি শেখা নয়, প্র্যাকটিস করা এবং নিয়মিত কোডিং করতে থাকা হলো আপনার শেখার গতি বাড়ানোর প্রধান চাবিকাঠি। আসুন, কিছু গুরুত্বপূর্ণ টিপস ও অতিরিক্ত রিসোর্স দেখে নেই।

নিয়মিত চর্চা করুন

কোডিং শেখার সবচেয়ে বড় চ্যালেঞ্জ হলো ধারাবাহিকতা। প্রতিদিন কিছু সময় কোডিংয়ে ব্যয় করার চেষ্টা করুন। প্রতিদিন ১ ঘণ্টা কোডিং করতে পারলে ৩-৪ মাসের মধ্যে আপনি MERN Stack এ দক্ষ হয়ে উঠতে পারবেন।

সমস্যা সমাধান করুন

আপনি যদি কোনও সমস্যায় পড়েন, তখন গুগল বা Stack Overflow ব্যবহার করে সমাধান খোঁজার চেষ্টা করুন। Codewars বা LeetCode এর মতো প্ল্যাটফর্মে নিয়মিত কোডিং চ্যালেঞ্জ করে আপনার সমস্যা সমাধানের দক্ষতা উন্নত করুন।

কোড রিভিউ এবং ওপেন সোর্স কন্ট্রিবিউশন

  • GitHub এ আপনার কোড শেয়ার করুন এবং অন্য ডেভেলপারদের কাছ থেকে ফিডব্যাক নিন।
  • ওপেন সোর্স প্রজেক্টে কন্ট্রিবিউট করুন। এটি আপনাকে কোডিং স্ট্যান্ডার্ড এবং অন্যদের কোডের সাথে পরিচিত হতে সাহায্য করবে।

📘 অতিরিক্ত রিসোর্স:

প্রতিদিন কোড লিখতে চেষ্টা করুন। কখনোই থেমে যাবেন না। ছোট ছোট প্রজেক্ট দিয়ে শুরু করুন এবং ধীরে ধীরে বড় অ্যাপ তৈরি করার দিকে এগিয়ে যান। আপনার প্রজেক্ট বিভিন্ন সোশ্যাল মিডিয়ায় শেয়ার করুন এবং ফিডব্যাক নিন।

🏁 সারাংশ

আজকের দিনে MERN Stack এর মতো শক্তিশালী টুলস দিয়ে একজন ওয়েব ডেভেলপার হিসেবে কাজ করা খুবই লাভজনক। আপনিও যদি ধারাবাহিকভাবে চেষ্টা করেন, তবে অবশ্যই সফল হবেন। এখনই শুরু করুন, কোডিংয়ে ডুবে যান, এবং আপনি কীভাবে একজন দক্ষ MERN Stack Developer হতে পারেন তা নিজে আবিষ্কার করুন। এটা মনে রাখবেন: শেখা কখনো থামে না, সুতরাং সব সময় নতুন কিছু শিখতে থাকুন এবং আপনার স্কিল বৃদ্ধির জন্য কাজ করে যান। 💪