Learn MERN Stack By Creating Real-Estate Project

ব্লগ সিরিজ আকারে mern স্ট্যাক ডেভেলপমেন্ট এক্সপ্লেইন করার চেষ্টা করছি। যেহেতু অনেক বড় এই জার্নি তাই কয়েকটা পার্ট করে আপলোড দিতে চাই। আশা করছি সবার কাজে আসবে।

Introduction:

আজকের এই ডিজিটাল ভিসুয়ালইজেশন এর দিনে ওয়েব এতটাইমর্ডান হয়েছে যে ,good user এক্সপেরিয়েন্স ,স্মুথ ফ্রন্টএন্ড এবং উন্নত ব্যাকএন্ড না হলে ওয়েব ব্যবহার এর সাধ ঠিক পাওয়া যায় না।তাই ,আমরা realestate প্রজেক্ট কে এমন ভাবে সাজাবো যেখানে user রেসিডেন্সি বুকিং করতে পারবে ,তারা তাদের বুকিং মেনেজ করতে পারবে এবং অবশ্যই একটা সিকিউর অথেন্টিকেশন এর মাধ্যমে লগইন করতে পারবে। আমরা জানি , functionality এবং user-centric design হচ্ছে modern web development ফাউন্ডেশন।

আমরা এই প্রজেক্ট এ রেসিডেন্সিয়াল মেনেজমেন্ট সিস্টেম বানাব। যেখানে ব্যাকএন্ড এ টেকনোলজি Nodejs,ExpressJs,MongoDB,Prisma এবং অথেন্টিকেশন এর জন্ন্য 0auth থাকবে । এছাড়াও আমাদের প্রজেক্ট কে ইন্টারেক্টিভ করার জন্য frontend এর প্রয়োজন। যেখানে টেকনোলজি হিসেবে থাকছে facebook এর তৈরী React এবং React Hooks ,axios, আনমেশন এর জন্য fremo motion এবং আরো অনেক টুলস যা আমরা আমাদের লার্নিং স্টেজ এ জানতে পারব। এই প্রজেক্ট টি একটি ফুলস্ট্যাক প্রজেক্ট হতে যাচ্ছে, যেখানে তুমি তোমার স্কিল কে আরো একধাপ এগিয়ে নিতে পারবে।

আমি আমার লেখা এবং প্রজেক্ট গুলোকে ইন্টারেক্টিভ করার জন্য বিভিন্ন মেথড এপলাই করার মাধ্যমে চেষ্টা করি সম্পূর্ণ ডিটেলস এ ভেঙে ভেঙে কনসেপ্ট ও কোডবুঝতে। যাতে করে Learn By Dooing apporch ফলো করে।তাই লেখাগুলি বিস্তারিত ও বড় হয়। আশাকরি এইটুকুন ঝামেলা সহ্য করবে শেখার খাতিরে।

প্রব্লেম এ পরে সেটা বুঝে বুঝে আগানোর শিক্ষা সব থেকে কাজে আসে বলে মনে করি। তাই ব্যাকএন্ড ,frontend এর নানান কনসেপ্ট এবং তাদের use কেস তুমি হাতে কলমে শিখতে পারবে বলে আমার বিশ্বাস ,আর সাথে থাকছি আমি H M Tanvir Mehedi তোমার লার্নিং পার্টনার । আশা করছি একটা লং জার্নিতে টাইট হ্যান্ড এবং এই প্রজেক্ট এর পরে ফ্রন্টএন্ড এবং ব্যাকএন্ড, মানে ,ফুলস্ট্যাক এর কমপ্লিট জার্নি নিয়ে তোমায় confused হতে হবে না।

Let's Start Our Journey :

শুরুকরার পূর্বে একটা ক্লিয়ার পিকচার বা গোল আমাদের মাথায় থাকলে শুরু করতে সহজ হয়। তুমি নিচের টেবিল ফলো করো ,আমরা পুরো প্রজেক্ট এ এই পথ ধরেই আগাব।

Note : হ্যা, প্রয়োজনের ক্ষেত্রে কিছুটা এদিক সেদিক হতে পারে তবে তা সামান্য এবং সবসময় মাথায় রাখবে যখন প্রোগ্রামিং বা নতুন ওয়েব টেকনোলজি শিখছ ,প্রথমে চেষ্টা করবে কোড করতে পরে ডট গুলোকে জোড়া লাগাবে থিওরি বা বিবৃতি পড়ে ।

Table Of content :

Section	Description
Intro	Project introduction and context
Setup/Requirements	Initial setup and tool requirements
Server Side	Backend development, routes, controllers
Client Side	Frontend development with React
Properties Page	Displaying a list of available properties
Property Page	Detailed information about a property
Map Component	Integrating a map to show property locations
Authentication	Implementing user authentication with JWT
Booking Modal	Creating a modal for property booking
Like/Favourite	Allowing users to like/favourite properties
Custom Hooks	Building and using custom React hooks
Add Property	User-submitted property addition
Search Bar	Adding property search functionality
Favourites/Bookings Page	Pages for viewing user's favourites/bookings
Making Responsive	Ensuring app responsiveness across devices
Deployment	Deploying frontend and backend to hosting platforms

বুজতেই পারছো একটা লম্বা জার্নি। তাই পুরো প্রজেক্ট তা কয়েকটা পার্ট এ ভেঙে ভেঙে আসবে। একটা কমপ্লিট সিরিজ হিসেবে। তুমি প্রতিটা পেজ এর নিচে সিরিজ লিংক পেয়ে যাবে ফলো করার জন্ন্য।

এছাড়া তোমার মতামত ,কিভাবে আগলে ভালো হবে এবং পরামর্শ যে কোন কিছু আমায় কমেন্ট এ জানাতে পার।

আমার লেখা ভালো লাগলে এবং আমায় সাপোর্ট করতে তুমি পোস্ট পেজ এর নিচে কান্ট্রিবিউট option পেয়ে যাবে।

যে কোন কান্ট্রিবিউশন appreciable । তোমার সাপোর্ট আমায় লিখতে প্রেরণা যোগায়।

আমাদের চেষ্টায় বাংলা ভাষার রিসোর্স পাবে পূর্ণতা। এমন আশা রেখে শুরু করছি।

Setup/Requirements:

Requirements:

তোমার কম্পিউটার বা ল্যাপটপ এ node js ও npm (node pakege maneger) ইনস্টল থাকতে হবে। তবে আলাদা করে npm ইনস্টল এর দরকার নাই। তুমি nodejs ইনস্টল করলেই অটোমেটিক্যালয় npm ইনস্টল পাবে। এছাড়া ide হিসেবে আমার পছন্দ vs code । তুমি তোমার পছন্দের যে কোন একটা ব্যবহার করতে পার। এবং obious জাভাস্ক্রিপ্ট,html ,css এর বেসিক তো থাকতেই হবে।

nodejs ও npm ইনস্টলেশন চেক করতে টার্মিনাল বা কমান্ড লাইন এ লিখ :

//Terminal---
node -v
npm -v

Project-Setup:

এই প্রজেক্ট এর জন্য তোমার কম্পিউটার এর যে কোন জায়গায় একটা ফোল্ডার create করে ফেল।

যা খুশি নাম দিতে পার, তবে আমি আমার ফোল্ডার এর নাম RealEstate-Management দিচ্ছি।

যেহেতু আমাদের প্রজেক্ট ব্যাকএন্ড ও ফ্রন্টএন্ড আলাদা থাকবে তাই Real Estate Management project ফোল্ডার এর মধ্যে আরো ২ টা ফোল্ডার তৈরী করবা।

RealEstate-Management/
|-- client
|-- server

The client folder contains the front-end part of your application built using React.
The server folder contains the back-end part of your application using Express and Prisma for database interactions.

আমরা প্রথমে ব্যাকএন্ড বা server নিয়ে কাজ করব পরবর্তীতে client বা froentend এ যাব।

এতে করে আমাদের কাছে ডাটা থাকবে ফ্রন্টএন্ড এ কাজ করার মত। আর তা ছাড়া এই approch আমার কাছে বেস্ট প্রাক্টিস বলে মনে হয়।

Server Side:

সার্ভার ফোল্ডার তুমি তোমার কোড এডিটর এ ওপেন কর এবং টার্মিনাল একমান্ড চালাও :

npm init -y

এই কমান্ড টি server ফোল্ডার এ একটি package.json ফাইল create করে দিবে ,যা দেখতে :

//package.json
{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

তবে তোমার ক্ষেত্রে কিছুটা চেঞ্জ হতে পারে। তুমি খেয়াল করে দেখবে এখানে মেনশন করা আছে আমাদের সার্ভার প্রজেক্ট রিলেটেড কিছু ইনফরমেশন।

যেমন : name ,এটা প্রজেক্ট এর নাম provide করে। version ,তোমার প্রজেক্ট এর version কত টা মেনশন করে। description ,প্রজেক্ট ডেসক্রিপশন descrive করে। main ,প্রজেক্ট এর main এন্ট্রি পয়েন্ট ডিফাইন করে। script , ডেভেলপমেন্ট এর সময় আমরা শর্টকাট কমান্ড হিসেবে স্ক্রিপ্ট ব্যবহার করি। author ,প্রজেক্ট author কে তা ডিফাইন করে। license ,প্রজেক্ট লাইসেন্স ডিফাইন করে।

এগুলি হল ইন জেনারেল defined প্রজেক্ট json । আমরা আমাদের প্রয়োজনে এবং সিম্প্লিসিটির জন্য আরো অনেক কিছু অ্যাড করতে পারি। প্রজেক্ট সামনে আগাবে এবং তুমি ডিসকভার করবে।

Dependencies:

ব্যাকএন্ড বলো কিংবা ফ্রন্টএন্ড ডেভেলপমেন্ট এবং প্রোডাকশন এর জন্য আমাদের কিছু ডিপেন্ডেন্সিস দরকার হয়। ডিপেন্ডেন্সি হলো ঐসব প্যাকেজ যা npm এর মাধ্যমে আসে।

Note : সহজ ভাষায় ডিপেন্ডেন্সি হলো ,অন্য ডেভেলপারদেড় তৈরী করা প্যাকেজ বা ফাঙ্কশন যা আমাদের শুরু থেকে কোড না লিখে এক্সসেসটিং ফাঙ্কশন গুলিকে ব্যবহার করতে দেয়। এবং প্রজেক্ট এ ইম্প্লিমেন্টেড করতে দেয়। এতেকরে সময় বাঁচে ও ডেভেলপমেন্ট ফেস সহজ হয়। you can call it a helper function.

আমাদের প্রজেক্ট ব্যাকএন্ড এর জন্য আমরা কিছু পপুলের ডিপেন্ডেন্সিস use করব যা আমাদের কাজ সহজ ও অর্গানাইজ করবে :

prisma: A tool for database access and ORM that maps objects to database tables.
@prisma/client: This is the Prisma client package for database access and manipulation.
cookie-parser: This package helps parse HTTP request cookies.
cors: This package is used for enabling Cross-Origin Resource Sharing, which is important for allowing web clients from different domains to interact with your server.
dotenv: This package loads environment variables from a .env file, which is useful for keeping sensitive information separate from your code.
express: A web application framework for Node.js.
express-async-handler: Simplifies error handling in asynchronous code.
express-oauth2-jwt-bearer: Helps implement OAuth 2.0 JWT bearer authentication.
nodemon: A development dependency that automatically restarts the server on file changes.

so ,সার্ভার প্রজেক্ট এর জন্য আমরা ডিপেন্ডেন্সি ইনস্টল করতে নিচের কমান্ড চালাতে পারি in টার্মিনাল। জাস্ট makesure that তুমি সার্ভার ফোল্ডার এর মধ্যে আছো ইন টার্মিনাল :

///terminal- server$
npm install prisma @prisma/client cookie-parser cors dotenv express express-async-handler express-oauth2-jwt-bearer

এবং ডেভলপমেন্ট ডিপেন্ডেন্সির জন্য আমরা :আমাদের ক্ষেত্রে শুধুমাত্র nodemon dev ডিপেন্ডেন্সি।

npm install nodemon --save-dev

এই কমান্ড চালানোর পরে ডিপেন্ডেন্সি গুলো আমাদের প্রজেক্ট এ ইনস্টল হবে। তুমি তোমার package.json ফাইল এডিটর এ খুললে দেখবে :

//package.json
{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type":"module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@prisma/client": "^5.1.1",
    "cookie-parser": "^1.4.6",
    "cors": "^2.8.5",
    "dotenv": "^16.3.1",
    "express": "^4.18.2",
    "express-async-handler": "^1.2.0",
    "express-oauth2-jwt-bearer": "^1.5.0",
    "prisma": "^5.1.1"
  },
  "devDependencies": {
    "nodemon": "^3.0.1"
  }
}

"prisma(প্যাকেজ নাম )": "^4.16.2(ভার্সন )" তোমার ক্ষেত্রে ভার্সন চেঞ্জ হতে পারে। তবে লেটেস্ট ভার্সন এ ইনস্টল হবে dont worry ।

Note: "type": "module" , package.json এর মধ্যে main এর নিচে type মেনশন করে দিতে পার। এতে করে ফাইল ইম্পোর্ট এর ক্ষেত্রে common js প্রসেস এপলাই না করে es6 module প্রসেস applay করবে।

সবসময় খেয়াল রাখবে, যখনি আমরা নিজেদের এক্সপোর্ট করা কোন ফাইল ইম্পোর্ট করব,ফাইল ইম্পোর্ট এর শেষে .js লেখা মেনশন করে দিব।

এক্সাম্পল :

import { homeRoute } from "./routes/homeRoute.js";

ok, so No more talking let's write some code:

তোমার server root ফোল্ডার এ index.js নামে একটা ফাইল তৈরী কর। যা আমাদের main এন্ট্রি পয়েন্ট হবে।

//index.js
// Importing necessary modules
import express, { json } from "express";
import dotenv from "dotenv";
import cors from "cors";
import cookieParser from "cookie-parser";

// Loading environment variables from a .env file
dotenv.config();

// Creating an instance of the Express application
const app = express();

// Defining the port number to listen on
const PORT = process.env.PORT || 3000;

// Middleware setup
app.use(express.json());        // Parse incoming JSON data
app.use(cookieParser());        // Parse cookies from incoming requests
app.use(cors());                // Enable Cross-Origin Resource Sharing (CORS)

// Starting the server and listening on the specified port
app.listen(PORT, () => {
  try {
    console.log(`Server is running on ${PORT}`);
  } catch (err) {
    console.log(err);
  }
});

আমি আশা করি তুমি কোড লিখে ফেলছো।

তাহলে এবারে আমরা কোড গুলোকে ভেঙে বোঝার চেষ্টা করি কি হচ্ছে :

import : শুরুতে import statements গুলি ES6's import syntax ব্যবহার করে প্রয়োজনীয় প্যাকেজ ইম্পোর্ট করেছে। যেহেতু এগুলি আমাদের ডিফাইন করা ফাইল না তাই আমরা .js ব্যবহার করিনি। এগুলি আসছে নোড মডিউল থেকে।

dotenv.config(): এই লাইনে আমরা আমাদের .env ফাইল কনফিগার করেছি। যা dotenv ডিপেন্ডেন্সিস এর মাধ্যমে .env ফাইল থেকে ইনভরমেন্ট ভেরিএবল গুলোতে এক্সসেস করতে দেয়। আমরা এখনো .env ফাইল তৈরী করিনি, তবে করব।

Note: তোমার জেনে রাখা প্রয়োজন যে , .env ফাইল ব্যবহার হয় সিক্রেট key গুলোকে কোডবেস থেকে আলাদা এবস্ট্রাক্ট রাখার জন্য ব্যবহার হয়।

const app = express(): then আসে এক্সপ্রেস যা নোড js এর একটি ফ্রেমওয়ার্ক। আমরা app ভ্যারিয়েবল এর মধ্যে এক্সপ্রেস js এর ইনস্ট্যান্স create করেছি। ইনস্ট্যান্স মানে ,realworld অবজেক্ট। according to এক্সপ্রেস অবজেক্ট ব্লুপ্রিন্ট।
const PORT = process.env.PORT || 3000: port ডিফাইন করেছি যা .env ফাইল থেকে সার্ভার কোন পোর্ট এ চলবে তা বলে দিবে। আর যদি .env ফাইল এ PORT মেনশন করা না থাকে তবে ৩০০০ পোর্ট এ রান করবে।
app.use(...): lines set up middleware এক্সপ্রেস থেকে। যেহেতু express app ভ্যারিয়েবল এ স্টোর আছে তাই express.use() না লিখে app.use() লিখেছি।

Note: আর আমরা জানি মিডলওয়্যার হল একটি প্রোগ্রামিং কনসেপ্ট যা ওয়েব অ্যাপ্লিকেশন বা সার্ভার ডেভেলপমেন্টে ব্যবহার হয়। এটি মূলত একটি ফাঙ্কশন যা, একটি অ্যাপ্লিকেশনের প্রসেসিং ফেচ এ কাস্টম লজিক যোগ করে।

app.use(express.json()) middleware JSON data গুলিকে req.body তে নিয়ে আসে এবং available করে পরবর্তী প্রসেস এর জন্য।
app.use(cookieParser()) middleware ঠিক একইভাবে cookies গুলোকে নিয়ে আসে রিকোয়েস্ট থেকে এবং available করে req.cookies এর মধ্যে।
app.use(cors()) middleware এনাবল করে Cross-Origin Resource Sharing, এটি ডিফারেন্ট অরিজিন থেকে সার্ভার এর কাছে রিকোয়েস্ট পাঠান ও রেস্পনসট ব্যাক করার permisson দেয়। এতেকরে আমরা ফ্রন্টএন্ড বা ক্লায়েন্ট থেকে কোন রেস্ট্রিকশন ছাড়াই রিকোয়েস্ট দিতে পারব যা সার্ভার রিসিভ করবে এবং সার্ভার থেকে প্রয়োজনীয় রেসপন্স ব্যাক করবে।
app.listen(PORT, ...): এটি আমাদের সার্ভার স্টার্ট করে ও সার্ভার লিসেন করে । এটি express এর একটি মেথড। সাধারণত দুইটি পেরামিটার নেয়।

একটি ,কোন পোর্ট এ সার্ভার চলবে ও অন্যটি callback function, যেখানে আমরা আমাদের মেসেজ দেখতে পারি ও বা error ঘটলে তা চেক করতে পারি। ট্রাই ব্লক সবসময় আমাদের কনসোল log দিবে until আমাদের সার্ভার কোন error ফেস করে। ক্যাচ ব্লক তখনি যাবে যদি error পায়। এবং error কনসোল লগ করবে টার্মিনাল এ।

💌

আশাকরি বুঝাতে পারছি। confution হলে কমেন্ট করবা অবশ্যই .

এবারে সার্ভার স্টার্ট করার পালা ,

তুমি তোমার টার্মিনাল এ সিম্পলি npx nodemon index.js লিখে দেখতে পার। সার্ভার চলবে যদি কোন ভুল না কর। ভুল করলেও পব্লেম নাই error পাবে সেখান থেকে দেখে নিয়ে সল্ভ করে নিবা।

Node: nodemon আমাদের সার্ভার সবসময় রানিং রাখতে হেল্প করে । যখন কোড চেঞ্জ করব। আমাদের মেনুয়াললি টার্মিনাল এ npx nodemon index.js কমান্ড দিতে হবে না। ব্যাকগ্রাউন্ড এ nodmon অলওয়েজ প্রসেস স্টার্ট রাখবে। আর npx (Node Package Execute) যা গ্লোবালি প্যাকেজ ইনস্টল না করে অন দা ফ্লাই প্যাকেজ এক্সিকিউট করতে দেয়।

i told you that pakege is a helper function that help us to do thing more simpally.so its an example.

Add Scripts:

//package.json
"scripts": {
    "start": "nodemon index.js",
  },

npx nodemon index.js দিয়ে টার্মিনাল কমান্ড দিলে কাজ করবে। কিন্তু আমরা কমান্ড কে একটু এফিশিয়েন্ট করতে স্ক্রিপ্ট অ্যাড করব "start": "nodemon index.js"। এবারে তুমি যদি টার্মিনাল এ জাস্ট npm start লেখো দেখবে same ভাবে ভাবে কাজ করছে।

এর প্রয়োজনীয়তা হলো সহজ ও ফেঞ্চি করা। আমরা প্রোগ্রামার রা ডিফ্রেন্ট ওয়ে তে সবকিছু পছন্দ করি। তাই দায়িত্ব npm কে দিলাম।

//---------------------Terminal output
[nodemon] restarting due to changes...
[nodemon] starting `node index.js`
Server is running on 3000

তুমিও নিশ্চই এমন কিছু পেয়েছো। কমেন্ট করে জানাতে ভুলনা কিন্তু।

আজকে এই পর্যন্ত। খুব শিগ্রই পরবর্তী পার্ট আসবে। যেখানে আমরা prisma ক্লায়েন্ট স্কিমা দিয়ে খুব সহজেই mongoDb ডাটাবেস বানিয়ে ফেলব।

ধন্যবাদ তোমায় সাথে থাকার জন্য।

#mernstack #javascript #project #tanvir_mehedi

বাংলা আর্টিকেল:Learn MERN Stack By Create Real-Estate Project -Part_1

(Setup/Requirements) ->Create Realestate Management Full Stack Project To Learn React, NodeJs, MongoDB, Prisma And More Web Development Tools.

Introduction:

Setup/Requirements:

Server Side: