Full Stack Development with

React Next JS & Prisma

এই কোর্সের মধ্যে যা যা শিখানো হবে

Full Stack Development with Next JS

৳ 8,000

Course Features

কোর্স মডিউল

HTML Modules

1. What is HTML?

2. Create your First HTML File

3. HTML Tags and Common Elements

4. HTML Attributes

5. Tables

6. HTML Document Structure

7. Head Element

8. Body Element

9. Absolute/Relative File Paths

10. Links and Buttons

11. List Elements

12. Block quote

13. Inline Elements

14. Images

15. Audio Files

16. Video Files

17. Vector Graphics & Illustrations

1. Headings and Paragraphs

2. Lists and Blocks

3. Bold & Italic

4. HTML Charsets, Entities and Symbols

5. Semantic Structural Elements

6. Navigation

7. Non-semantic Elements (“div” and “span”)

8. HTML Comments

9. The “Section” Element

10. HTML Forms

11. Different Types of Inputs

12. Choosing Between a set of options

13. Creating and Previewing Our First Page/ Layout Elements

14. Convert our Content into HTML Markup

15. Code Formatting

16. Marking up our Homepage

17. Identify Remaining Content Types as HTML Elements

18. Link Separate Pages Together

19. Troubleshooting

20. Uploading Content to a Web Server

Modern JavaScript

Start Working With JS
How to run JS in vs code editor
JS Essential
Data types
If else
DOM Manipulation
JavaScript Object
Data Object
The let keywork
The const keyword
Arrow Functions
The Spread & Rest Operator
Map & Set Objects
String.startsWith() & String.endsWith()
Array.from(), Array keys(), Array find() & Array findIndex()
Ternary Operator
JS Modules & Object Tricks
Default parameter
Github Introduction
Account Creation
How to create Github Repository
Github Pull & Push
Github Desktop Application
Github Branch & Pull Request
Github Host & Free Domain & hosting
Github Integrating with VS Code
Github Debugging

React Frontend with Redux

React Intro
Virtual Dom & Browser DOM
Setting Environment with VS Code
React Prequisites
JSX Elements & Rendering Elements
Core Concept of Components
Core Concept of Props
React State management
Lifecycle in Class Components
Event Handling & Control Re-rendering
React Conditional Rendering
React List & keys
Controlled Form Handling
Uncontrolled Form Handling
React Lifting State Up
React Composition vs Inheritance
Higher Order Components (HOC)
React Render props
React Context API
contextType & useContext
React Hook
Custom Hook
React Styled Component
React Inline Style & CSS Module


Breaking Changes
Private Route


Assets Folder
Layouts Folder
Components Folder
Pages Folder
Middleware Folder
Routes Folder
Config Folder
Services Folder
Utils Folder


UI bugs
Logic errors
Networking errors
Regression bugs
React Debugging Tools
Chrome DevTools
React Developer Tools
Visual Studio Code JavaScript Debugger


UI bugs
Logic errors
Networking errors
Regression bugs
React Debugging Tools
Chrome DevTools
React Developer Tools
Visual Studio Code JavaScript Debugger
UI bugs
Logic errors
Networking errors
Regression bugs
React Debugging Tools
Chrome DevTools
React Developer Tools
Visual Studio Code JavaScript Debugger
Introduction to Redux
Redux State & Actions
Multiple Reducers
Redux Logger & Middleware
Redux-Thunk for Fetching Data
Redux Fetch Data
Redux DevTools
Fetching data using Redux Toolkit


CSS Modules

1. CSS – Introduction

2. CSS – How to use CSS?

3. Basic Syntax and Selectors

4. Advanced Syntax and Selectors

5. CSS Hierarchy

6. Colors, Background and Opacity

7. Advanced CSS – Media Queries

8. CSS – Formatting and Styling Text

9. CSS – Adding Borders

10. CSS – Margin and Padding

11. CSS – Styling Lists

12. CSS – Styling Links

13. CSS – Styling Buttons

14. CSS – Fonts and Adding Icons

15. CSS – Working with Display Values

16. CSS – Display value: Inline-Block

17. CSS – Positioning HTML Elements Part-1

18. CSS – Positioning HTML Elements Part-2

19. CSS – Handling Content Overflow

20. CSS – Floating HTML Elements

21. CSS – Box Model

22. CSS – Box Sizing

23. CSS – Adding Shadows

24. CSS – Combinators

25. CSS – Pseudo Classes

26. CSS – Pseudo Elements

27. CSS – Adding Backgrounds

28. CSS – Gradients

29. CSS – Handling Text Overflow

30. CSS – Project-1

31. CSS – Project-2

32. CSS – Project-3

33. CSS – Project-4

34. CSS – Project-5

35. CSS – Introduction to Responsive Web Design

36. CSS – Viewport

37. CSS – Dynamic Size

38. CSS – Introduction to Media Queries

39. CSS – Responsive Webpage Design using Media Queries

40. Introduction

41. Flex Container & Flex Items

42. Immediate Child Only

43. Flexbox Axes

44. Flexbox Module

45. Parent Properties

46. Display

47. block vs inline

48. flex-direction

49. flex-wrap

50. flex-flow

51. justify-content [row]

52. justify-content [column]

53. space-around vs space-evenly

54. align-items [row]

55. baseline

56. align-items [column]

57. align-content

58. Child Properties

59. order

60. flex-grow

61. flex-grow calculation

62. flex-shrink

63. flex-shrink calculation

64. flex-basis

65. flex-basis vs widths

66. flex

67. align-self

68. Flexbox Properties

69. Aligning with Auto Margins

70. Introduction to Grid Layout

71. Grid Container

72. Explicit Grid

73. Minimum and Maximum Grid Track Sizes

74. Repeating Grid Track 75. Grid Gaps (Gutters)

76. Positioning Items by Grid Line Numbers

77. Spanning Items Across Rows and Columns

78. Naming Grid Lines

79. Positioning Items by Line Names

80. Naming and Positioning Items by Lines with the Same Name

81. Naming and Positioning Items by Grid Areas

82. Implicit Grid

83. Implicitly Named Grid Areas

84. Implicitly Named Grid Lines

85. Layering Grid Items

86. Aligning Grid Items (Box Alignment)

87. Aligning Grid Tracks

88. CSS – Transform Property

89. CSS – Align Elements using Transform Property

90. CSS – Transition Property

91. CSS – Animation Property

92. CSS – Flying Rocket Animation using Animation Property


Installing Environment & Setup
Project Structure & Styling, File Layout & Link
Server & Client Components & Routing
Data Fetching & Caching Suspense
Backend API
Asset Optimization & SEO

NextJS with Prisma

Prisma Structure
Data Modeling
Data Migration
NodeJS (Basic)
TypeScript (Basic)
Prisma Writing Query (NodeJS)
Prisma Writing Query (TypeScript)
Prisma FullStack Project

Projects & Assignments

Task List

Books List

Github Finder

Pratctical of Git Versioning using Codebase

Restaurant Project-1 (Applying React)

Restaurant Project-1 (Applying React Hooks)

Restaurant Project-1 (Using REST API)

Counter App using Redux

Restaurant Project-1 (Applying React Redux Form) using Advanced Redux

Agency website using REST API in NextJS

Build a fully-featured social RSS news reader

E-Commerce Site with Payment Gateway(SSLCommerz)

Shopping Cart

Expression validation

Number Guesses

Create Repository & Git Upload

Photo gallery website (Using React)

Simple Hotel Booking System (Using React)

CRUD Operation Using React & Redux

Counter App using Redux

Building a Book Review App Using NextJS

News Portal with Complete SEO

Build a fully-featured social RSS news reader


Hosting NextJS App using C-panel
Deploying Next Application in Vercel

React JS



Next JS

Tailwind CSS








Frequently Ask Questions (FAQ)


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


আমাদের সকল কোর্স এর মতো এই কোর্সটি একদম বিগেনারদের জন্য নয় । অর্থাৎ পূর্বের অভিজ্ঞতা বলতে – HTML, CSS, JS বিষয়ে সম্যক জ্ঞান থাকা আবশ্যক। 


ফুলস্ট্যাক ডেভেলপমেন্ট উইথ নেক্সট জে এস কোর্স এর টেকনিকাল পার্ট শেষ করতে প্রায় ৫ মাস সময় লাগবে। তারপর ১ টি রিয়েল ওয়ার্ল্ড প্রজেক্ট এর মাধ্যমে কোর্সটি শেষ হবে ।


কোর্সটিতে আমরা JavaScript(es6), React, React Redux, Git Version Controlling, Next JS App Router & Page Router,  MongoDB, PostGreSQL এবং App Deployment শিখবো। উপরে প্রতিটি টপিক এর আউটলাইন দেয়া আছে।


কোর্সটি করার জন্য আপনার কোন ডিগ্রি থাকা লাগবে না তবে আগে থেকে প্রোগ্রামিং স্কিল থাকা লাগবে। যে কেও কোর্সটি করতে পারবে না । তবে এই কোর্সটি সঠিক ভাবে শেষ করার জন্য প্রতিদিন অন্তত ৬-৮  ঘন্টা সময় দিতে হবে।


অন্তত পক্ষে কোর i3 অথবা i5 এর একটি ডেস্কটপ অথবা ল্যাপটপ লাগবে। মোবাইল দিয়ে কখনোই কোডিং শিখা সম্ভব নয়।


কোনো কোর্স-ই আপনাকে গ্যারান্টি দিতে পারবে না আপনি কোর্স করার পর ই চাকুরী পাবেন অথবা ফ্রিল্যান্স মার্কেটপ্লেস এ ভালো করতে পারবেন। এটা সম্পূর্ণ আপনার উপর নির্ভর করবে। তবে আমাদের আগের ব্যাচ গুলোর অনেক স্টুডেন্ট ভালো স্যালারিতে সফটওয়্যার ডেভেলপমেন্ট কোম্পানিতে জব করছে।

আপনাদের সাথে থাকছেন মেন্টর

Touhid Zaman

Software Engineer

তাওহীদ জামান, একজন স্বপ্নচারী প্রকৌশলী । ২০১৮ সাল থেকে প্রযুক্তিবিদ্যায় নিজেকে ধীরে ধীরে একজন পূর্ণাঙ্গ সফটওয়্যার ইঞ্জিনিয়ার হিসেবে গড়ে উঠার লক্ষ্যে কাজ করে যাচ্ছেন । বর্তমানে তিনি অস্ট্রেলিয়ার একটি স্বনামধন্য কোম্পানিতে ফুলস্ট্যাক ডেভেলপার হিসেবে কর্মরত রয়েছেন ।

এছাড়াও তিনি আমেরিকা, অস্ট্রেলিয়া সহ বাংলাদেশের বিভিন্ন প্রোজেক্ট ডেভলপমেন্ট এর সাথে জড়িত । আধুনিক সফটওয়্যার গঠনে নিত্যনতুন প্রযুক্তি নিয়ে কাজ করার পাশাপাশি সাধারণ শিক্ষার্থীদের সহযোগিতা করার মনোভাবে ফুল স্ট্যাক ওয়েব ডেভেলপমেন্ট এর প্রসারে নিয়োজিত আছেন।

Aiman Shafi | Frontend Developer | WordPress Expert | Codemanbd mentor

Aiman Shafi

Frontend Developer & CMS Expert

আইমান শাফি এমেরিকা বেসড ২ টি ও UK বেসড ১ টি ওয়েব ডেভেলপমেন্ট কোম্পানি এর সাথে ফুল স্ট্যাক ওয়েব ডেভেলপার হিসেবে কাজ করেছেন । এই পর্যন্ত ২৩৭+ প্রজেক্ট কমপ্লিট করেছেন । এবং পাশাপাশি তিনি ফ্রীল্যানসিং মার্কেটপ্লেস সফল ভাবে ওয়েব এপ্লিকেশন, ওয়েব ডেভেলপমেন্ট ও ই-কমার্স ডেভেলপমেন্ট নিয়ে কাজ করছেন.।


কিভাবে কোর্স কিনবেন?

Course Fee:

8000 TK