MERN Stack Web Development
বর্তমানে জনপ্রিয় একটি পেশা হল ওয়েব ডেভেলপমেন্ট। ওয়েব ডেভেলপমেন্ট মূলত ইন্টারনেট এর জন্য যেসব ওয়েবসাইট, ওয়েব অ্যাপ্লিকেশন তৈরি করা হয় সেগুলো বিভিন্ন স্ক্রিপ্টিং এবং প্রোগামিং ল্যাঙ্গুয়েজ ব্যবহার করে তৈরী করার প্রক্রিয়াকে বলা হয় ওয়েব ডেভেলপমেন্ট। কম্পিউটার বেসিক জানা থাকলেই এই কোর্সে অংশগ্রহন করতে পারবে এবং একজন দক্ষ ওয়েব ডেভেলপার হতে পারবে।
Description
MERN Stack Web Development Offline Course: ফুল স্ট্যাক ওয়েব ডেভেলপমেন্ট বলতে বোঝায় কোন ওয়েব এপ্লিকেশনের বা ওয়েবসাইটের ফ্রন্ট ইন্ড, ব্যাক ইন্ড অর্থাৎ ডাটাবেজ নিয়ে কাজ করা। সুতরাং এক কথায় বলা যাই একটা ওয়েব সাইট ডিজাইন করা থেকে শুরু করে ডেভেলপমেন্ট সহ ডাটাবেজ সিকিওরিটির কাজ গুলো করতে আমাদের যা কিছু প্রয়োজন হয় সবকিছু নিয়েই ফুলস্ট্যাক ওয়েব ডেভেলপমেন্ট। বর্তমানে ওয়েব ডেভেলপমেন্ট সেক্টরে যতগুলো টেক স্ট্যাক ব্যবহার করা হয় তার মধ্যে MERN Stack অধিক জনপ্রিয় এবং চাহিদা সম্পন্ন। MERN স্ট্যাক মূলত ৪ টি টপিক নিয়ে কাজ করে যেমন: MongoDB, Express.JS, React.JS, Node.JS। এই MERN Stack এ আমরা ফুলস্ট্যাক ওয়েব ডেভেলপমেন্ট এর সকল বিষয়গুলো পাচ্ছি।
যারা মূলত ফুলস্ট্যাক ডেভেলপমেন্ট নিয়ে কাজ করে তাদেরকে ফুলস্ট্যাক ডেভেলপার বলা হয়। বর্তমানে মার্কেটে একজন ফুলস্ট্যাক ডেভেলপারের চাহিদা অনেক বেশি। ছোটো-বড় সকল কোম্পানিরই নিজেদের ওয়েবসাইট থাকে যা বানানোর জন্য একজন দক্ষ ওয়েব ডেভেলপারের প্রয়োজন হয়। যুগের সাথে তাল মিলিয়ে যেমন কর্মক্ষেত্র বৃদ্ধি পাচ্ছে ঠিক তেমনি ওয়েব ডেভেলপারদেরও কাজের ক্ষেত্রও বৃদ্ধি পাচ্ছে। ফুল স্ট্যাক ডেভেলপার হিসেবে কাজ করতে চাইলে শিক্ষাগত যোগ্যতার চেয়ে ব্যক্তিগত দক্ষতা বেশি জরুরী। অনেক ক্ষেত্রে দক্ষতার উপর নির্ভর করে নিয়োগ দেওয়া হয়ে থাকে।
বর্তমানে ওয়েব ডেভেলপারের চাহিদা প্রতিনিয়ত বেড়েই চলেছে এবং ভবিষ্যতে আরো বাড়বে। একজন প্রফেশনাল ফুল স্ট্যাক ওয়েব ডেভেলাপার চাইলে অফলাইন অনলাইন দুই জায়গাই কাজ করতে পারেন। একজন ফুল স্ট্যাক ওয়েব ডেভেলপার কত আয় করবে তা নির্ভর করবে তার কাজের দক্ষতার এবং অভিজ্ঞতার উপর। তবে দক্ষতা ভেদে কিছু কিছু কোম্পানিতে ২০ হাজার টাকা থেকে ১ লাখের ও বেশি টাকা পর্যন্ত বেতন হয়ে থাকে।
COURSE CURRICULUM
| Section No: 01 | |||
| Exploring HTML & CSS | |||
| Day – 01 | |||
| HTML Tags & Attributes | |||
| header | 00:00:00 | ||
| paragraph | 00:00:00 | ||
| image | 00:00:00 | ||
| link | 00:00:00 | ||
| list | 00:00:00 | ||
| div | 00:00:00 | ||
| span | 00:00:00 | ||
| Day –02 | |||
| CSS Basics | |||
| apply CSS in elements like text, div, list & how to position elements. | 00:00:00 | ||
| Day –03 | |||
| Media Query & Animation | |||
| We will learn to create responsive design for mobile users & learn how to apply animation on elements. | 00:00:00 | ||
| Day –04 | |||
| Flex Box | |||
| We will learn most efficient way to design 1D layout design. | 00:00:00 | ||
| Day –05 | |||
| Grid Layout | |||
| apply CSS in elements like text, div, list & how to position elements. | 00:00:00 | ||
| Day –06 | |||
| Tailwind CSS | |||
| We will explore most trendy CSS framework in software industry. | 00:00:00 | ||
| Day – 07, 08 | |||
| Project 1: Personal Portfolio | 00:00:00 | ||
| Assignment 1 | 00:00:00 | ||
| Section No: 02 | |||
| Tools for Developers | |||
| Day – 09 | |||
| Command Line Interface (CLI) | 00:00:00 | ||
| Day – 10 | |||
| Git & GitHub | 00:00:00 | ||
| Section No: 03 | |||
| JavaScript –The Web King | |||
| Module 1: Language Fundamentals | |||
| Day –11 | |||
| Variable | 00:00:00 | ||
| Data Types | 00:00:00 | ||
| Operators | 00:00:00 | ||
| Condition | 00:00:00 | ||
| Loop | 00:00:00 | ||
| Day –12 | |||
| Function | 00:00:00 | ||
| Array | 00:00:00 | ||
| Object | 00:00:00 | ||
| Day –13 | |||
| Problem solving | 00:00:00 | ||
| Module 2: Functional Programming | |||
| Day – 14 | |||
| Function is a first-class-citizen | 00:00:00 | ||
| Higher Order Function | 00:00:00 | ||
| Currying | 00:00:00 | ||
| Closure | 00:00:00 | ||
| Day – 15 | |||
| Callback | 00:00:00 | ||
| Built-in methods (Map, Filter & Reduce) | 00:00:00 | ||
| Module 3: ES6 – The advancement in JavaScript | |||
| Day – 16 | |||
| Let & Const variable | 00:00:00 | ||
| Template String | 00:00:00 | ||
| Arrow function | 00:00:00 | ||
| Lexical this keyword | 00:00:00 | ||
| Destructuring Array & objects | 00:00:00 | ||
| Rest & Spread operator | 00:00:00 | ||
| Exporting Module | 00:00:00 | ||
| Module 4: Object Oriented Programming (OOP) | |||
| Day –17 | |||
| What is OOP | 00:00:00 | ||
| ES6 Class & Object | 00:00:00 | ||
| Constructor | 00:00:00 | ||
| Inheritance | 00:00:00 | ||
| Static Method | 00:00:00 | ||
| Method Chaining | 00:00:00 | ||
| Day –18 | |||
| Constructor Function | 00:00:00 | ||
| Prototypes | 00:00:00 | ||
| Prototypal inheritance | 00:00:00 | ||
| Prototype chain | 00:00:00 | ||
| Prototype inheritance on built-in functions | 00:00:00 | ||
| Module 5: Asynchronous JavaScript | |||
| Day – 19 | |||
| What is asynchronous nature | 00:00:00 | ||
| Callback review | 00:00:00 | ||
| Callback Hell | 00:00:00 | ||
| ES6 promise in depth | 00:00:00 | ||
| Run multiple promises parallelly | 00:00:00 | ||
| Day –20 | |||
| Intro to async-await | 00:00:00 | ||
| Promise to async-await conversion | 00:00:00 | ||
| Try-catch block | 00:00:00 | ||
| XML-HTTP Request | 00:00:00 | ||
| ES6 Fetch API | 00:00:00 | ||
| Module 6: DOM Manipulation | |||
| Day – 21 | |||
| How DOM works | 00:00:00 | ||
| Window & Document object | 00:00:00 | ||
| DOM Selectors | 00:00:00 | ||
| Manipulating style & elements | 00:00:00 | ||
| Adding & Deleting elements | 00:00:00 | ||
| Click event handling | 00:00:00 | ||
| Day –22 | |||
| DOM Traversing | 00:00:00 | ||
| Exploring more events | 00:00:00 | ||
| Events Life-Cycle | 00:00:00 | ||
| Event propagation & Delegation | 00:00:00 | ||
| Day –23 | |||
| Project 2: | |||
| Contact List CRUD Application | 00:00:00 | ||
| Section No: 04 | |||
| Frontend Development | |||
| Day – 24 | |||
| React overview – Virtual DOM, SPA | 00:00:00 | ||
| Environment Setup | 00:00:00 | ||
| Understanding JSX | 00:00:00 | ||
| Functional Component | 00:00:00 | ||
| Re-usable Component with props | 00:00:00 | ||
| Destructuring props | 00:00:00 | ||
| Programming logic in component | 00:00:00 | ||
| Day – 25 | |||
| Holy Grid Layout – Component Breakdown | 00:00:00 | ||
| Apply modular CSS | 00:00:00 | ||
| Add image in component | 00:00:00 | ||
| Tailwind CSS with ReactJS | 00:00:00 | ||
| Day – 26, 27 | |||
| Project 3: Design agency website layout | |||
| Assignment 2: Pricing page design | |||
| Day –28 | |||
| State in React | 00:00:00 | ||
| useState Hook | 00:00:00 | ||
| Event Listener in react | 00:00:00 | ||
| Two-Way data binding | 00:00:00 | ||
| Project 4: Word Counter | |||
| Assignment 3: BMI calculator | |||
| Day –29 | |||
| The “children” props | 00:00:00 | ||
| Rendering List | 00:00:00 | ||
| Conditional Rendering | 00:00:00 | ||
| Project 5: Note Taking app | |||
| Day –30 | |||
| Component Life Cycle | 00:00:00 | ||
| useEffect Hook | 00:00:00 | ||
| Class component overview | 00:00:00 | ||
| Defining Render & Commit phase | 00:00:00 | ||
| Data fetching with Axios library | 00:00:00 | ||
| Loading state of API call | 00:00:00 | ||
| Error message show on API call | 00:00:00 | ||
| Project 6: GitHub Profile Finder | |||
| Assignment 4: Create a weather application | |||
| Day –31 | |||
| Explore React Router | 00:00:00 | ||
| What is SPA? | 00:00:00 | ||
| Protected Route | 00:00:00 | ||
| Local storage | 00:00:00 | ||
| Assignment 5: Create a User Dashboard | |||
| Day – 32 | |||
| Custom Hook | 00:00:00 | ||
| React Query Library | 00:00:00 | ||
| Caching in frontend | 00:00:00 | ||
| Project 7: | |||
| Blogging application | 00:00:00 | ||
| Clone Dev.to website | 00:00:00 | ||
| Backend API will be given | 00:00:00 | ||
| Day – 33 | |||
| useReducer Hook | 00:00:00 | ||
| Manage more complex logic | 00:00:00 | ||
| State Management | |||
| Day– 34 | |||
| Child to parent communication | 00:00:00 | ||
| State Lifting in React | 00:00:00 | ||
| Prop Drilling in React | 00:00:00 | ||
| Importance of global State | 00:00:00 | ||
| Day– 35 | |||
| Explore Redux work-flow | 00:00:00 | ||
| Redux boilerplate setup | 00:00:00 | ||
| Create Store | 00:00:00 | ||
| Implement Redux | 00:00:00 | ||
| Async API calls with Redux-Thunk | 00:00:00 | ||
| API call to json-placeholder | 00:00:00 | ||
| Day– 36 | |||
| Project 8: Ecommerce cart for cake shop website | |||
| Day– 37 | |||
| Context API in React | 00:00:00 | ||
| Assignment 6: Cart of pizza selling website | |||
| Day –38 | |||
| Animation with Tailwind CSS | 00:00:00 | ||
| Introduction to GSAP animation | 00:00:00 | ||
| Day –39 | |||
| Explore React-Hook-Library | 00:00:00 | ||
| Form Validation | 00:00:00 | ||
| Dynamic Form Handling | 00:00:00 | ||
| Assignment 7: Build dynamic complex form | |||
| Day –40 | |||
| Explore React-Table library | 00:00:00 | ||
| Apply searching, sorting & filtering on data grid | 00:00:00 | ||
| Day –41 | |||
| Image Upload & Preview Image | 00:00:00 | ||
| Explore Rich Text editor | 00:00:00 | ||
| Day –42 | |||
| DOM access using useRef Hook | 00:00:00 | ||
| Higher Order Component | 00:00:00 | ||
| Error Boundary | 00:00:00 | ||
| Day –43 | |||
| Performance Optimization | |||
| Memo & useMemo Hook | 00:00:00 | ||
| useCallback Hook | 00:00:00 | ||
| Code Splitting | 00:00:00 | ||
| Lazy Loading | 00:00:00 | ||
| NextJS | |||
| Day – 44 | |||
| NextJS Overview | 00:00:00 | ||
| What is SEO? | 00:00:00 | ||
| Development Setup | 00:00:00 | ||
| File based routing | 00:00:00 | ||
| Dynamic Routing | 00:00:00 | ||
| Font & Image optimization | 00:00:00 | ||
| Day – 45 | |||
| Client & Server Components | 00:00:00 | ||
| Meta Tags | 00:00:00 | ||
| Open Graph & Twitter Cards | 00:00:00 | ||
| Day – 46, 47, 48 | |||
| Frontend Project 9: Build a fully functional fashion website | |||
| Day – 49 | |||
| Docker for Developer | |||
| What is Docker? | 00:00:00 | ||
| Purpose of Docker | 00:00:00 | ||
| Create container & Run ReactJS app in docker container | 00:00:00 | ||
| Assignment 8: Run NextJS app in docker | |||
| Section No: 05 | |||
| Backend Development | |||
| Day –50 | |||
| What is Backend Development? | 00:00:00 | ||
| How web works? | 00:00:00 | ||
| Client-Server Architecture | 00:00:00 | ||
| HTTP Request & Methods | 00:00:00 | ||
| A brief introduction to NodeJS | 00:00:00 | ||
| Day –51 | |||
| Explore NodeJS built-in modules such as file system, path, OS etc | 00:00:00 | ||
| Day –52 | |||
| Thread & Thread Pool | 00:00:00 | ||
| Execution Context | 00:00:00 | ||
| Call stack | 00:00:00 | ||
| Event Loop | 00:00:00 | ||
| Event Loop Priority | 00:00:00 | ||
| Day –53 | |||
| What is REST API? | 00:00:00 | ||
| API vs RESTful API | 00:00:00 | ||
| API Endpoint Design | 00:00:00 | ||
| Server Setup with Express | 00:00:00 | ||
| Run Your First API | 00:00:00 | ||
| API Testing in Postman / Insomnia / Thunder-client | 00:00:00 | ||
| Day –54 | |||
| Learning & Designing CRUD operation API | 00:00:00 | ||
| Exploring Plug & Play Architecture using MVC Pattern | 00:00:00 | ||
| Project 10: Contact Management System | |||
| Mastering Database | |||
| Day – 55, 56 | |||
| What is Database? | 00:00:00 | ||
| Brief introduction on Mapping Cardinality | 00:00:00 | ||
| Explore ER Diagram | 00:00:00 | ||
| Project 11: Hands on ER Diagram design of LMS website | |||
| Assignment 9: Design ER Diagram of Hotel Management System | |||
| Day – 57, 58, 59 | |||
| What is database Sharding & Replication? | 00:00:00 | ||
| Explore MongoDB Queries in Terminal | 00:00:00 | ||
| CRUD | 00:00:00 | ||
| Filtering, Sorting, Pagination | 00:00:00 | ||
| Projection | 00:00:00 | ||
| Comparison & Logical operators | 00:00:00 | ||
| MongoDB Transaction | 00:00:00 | ||
| Database Indexing | 00:00:00 | ||
| MongoDB Aggregation Pipeline | 00:00:00 | ||
| Day –60 | |||
| Database Connection | 00:00:00 | ||
| Explore Mongoose ODM | 00:00:00 | ||
| Creating User Model | 00:00:00 | ||
| Creating User Controller | 00:00:00 | ||
| Mongoose Validation | 00:00:00 | ||
| Day –61, 62, 63 | |||
| Authentication & Authorization | |||
| Express Middleware | 00:00:00 | ||
| Mongoose Middleware | 00:00:00 | ||
| User Registration | 00:00:00 | ||
| User Login with JWT Token | 00:00:00 | ||
| Hashing Password by Bcrypt | 00:00:00 | ||
| Route Protection | 00:00:00 | ||
| Access management by User Role | 00:00:00 | ||
| Day –64 | |||
| Project 12: Complete Blog Website API | |||
| Day –65 | |||
| File Upload using Multer | 00:00:00 | ||
| Error Handling in NodeJS-Express | 00:00:00 | ||
| Not Found Error | 00:00:00 | ||
| Bad Request | 00:00:00 | ||
| Validation Error | 00:00:00 | ||
| Unauthorized | 00:00:00 | ||
| Access Denied | 00:00:00 | ||
| Conflict Error | 00:00:00 | ||
| Server Error etc | 00:00:00 | ||
| Day –66 | |||
| Payment System (Bangladesh) | |||
| SSL Commerz Integration | 00:00:00 | ||
| Pay from bKash, Nagad, Card etc | 00:00:00 | ||
| Day –67 | |||
| Payment System (International) | |||
| Stripe Integration | 00:00:00 | ||
| Pay from Card | 00:00:00 | ||
| Day –68 | |||
| Real Time Communication | |||
| Explore Socket.io Library | 00:00:00 | ||
| Project 13: Group Chat Application | |||
| Assignment 10: Real time Comment in Blog | |||
| Day –69 | |||
| What is Caching? | 00:00:00 | ||
| How caching improves performance? | 00:00:00 | ||
| Implement caching using Redis | 00:00:00 | ||
| Day –70 | |||
| Security Best Practice | 00:00:00 | ||
| Rate Limiting | 00:00:00 | ||
| What is Query Injection? | 00:00:00 | ||
| XSS Attack | 00:00:00 | ||
| Data Sanitization using mongoSanitize library | 00:00:00 | ||
| Section No: 06 | |||
| Full Stack Exam | |||
| Day – 71 | |||
| Exam Day : Interview Standard Written & Objective Test | |||
| Day: 72 to78 | |||
| Section No: 07 | |||
| MERN Stack Project - 14 | |||
| Project : Travel Agency | |||
| Day – 79 | |||
| Course Review Class:01 | 00:00:00 | ||
| Day – 80 | |||
| Course Review Class:02 | 00:00:00 | ||
| Fiverr : | |||
| Introduction of Fiverr | 00:00:00 | ||
| Fiverr rules and regulations | 00:00:00 | ||
| How to create account? | 00:00:00 | ||
| How to setup profile? | 00:00:00 | ||
| Levels of Fiverr | 00:00:00 | ||
| How to create gig? | 00:00:00 | ||
| Proper SEO of Gig | 00:00:00 | ||
| Image and video optimization | 00:00:00 | ||
| Skill Test | 00:00:00 | ||
| Gig Marketing (Organic and paid) | 00:00:00 | ||
| Order delivery system | 00:00:00 | ||
| Positive links and negetive words in Fiverr | 00:00:00 | ||
| Warning issues | 00:00:00 | ||
| Payment system | 00:00:00 | ||
| Upwork: | |||
| Introduction of upwork.com | 00:00:00 | ||
| How to sign up? | 00:00:00 | ||
| How to get Upwork profile approved? | 00:00:00 | ||
| How to verify yourself on upwork.com? | 00:00:00 | ||
| How to get payment method verified? | 00:00:00 | ||
| How to setup 100% profile? | 00:00:00 | ||
| How to write cover letter? | 00:00:00 | ||
| Connects | 00:00:00 | ||
| How to bid? | 00:00:00 | ||
| How to create project or catalogue | 00:00:00 | ||
| How you can justify buyer? | 00:00:00 | ||
| Order and delivery | 00:00:00 | ||
| Top-Rated Freelancer or Rising Talent? | 00:00:00 | ||
| Themeforest: | |||
| Introduction | 00:00:00 | ||
| Signing up | 00:00:00 | ||
| Profile creation | 00:00:00 | ||
| Rules and regulations | 00:00:00 | ||
| How to submit project | 00:00:00 | ||
| Local Job Opportunities: | |||
| Introduction to Bangladeshi Local Job Sites | 00:00:00 | ||
| Creating an Effective Profile | 00:00:00 | ||
| Job Searching and Bidding | 00:00:00 | ||
| Networking and Client Communication | 00:00:00 | ||
| Client searching through social media (facebook, Linkedin) | 00:00:00 | ||
| Showcasing Local Expertise and Cultural Sensitivity | 00:00:00 | ||
| Payment System: | |||
| Payoneer | |||
| Signing up | 00:00:00 | ||
| Account creation | 00:00:00 | ||
| payoneer account open | 00:00:00 | ||
| Account verify | 00:00:00 | ||
| Address Verificiation | 00:00:00 | ||
| Setting up the full payoneer account | 00:00:00 | ||
| Add bank account or other payment method | 00:00:00 | ||
| Transfer dollars | 00:00:00 | ||
| bKash | |||
| Add bkash account to payoneer | 00:00:00 | ||
| Per day limit | 00:00:00 | ||
| Transaction method | 00:00:00 | ||
| bKash Charges and fees | 00:00:00 | ||
| Bank Account | |||
| Payment policies | 00:00:00 | ||
| Minimum and maximum Transaction | 00:00:00 | ||
| Currency selection | 00:00:00 | ||