Full Stack Development with
React Next JS & Prisma
এই কোর্সের মধ্যে যা যা শিখানো হবে
- একজন ফুলস্ট্যাক ডেভেলপার একটি Web Application এর ফ্রন্টএন্ড এবং ব্যাকএন্ড ডেভেলপমেন্ট করতে গিয়ে যে প্রব্লেম সে ফেস করতে পারে তা হল, সাপোর্ট না পাওয়া অথবা সল্যুশন খুঁজতে গিয়ে অনেকটা সময় পার করে দেওয়া। টেকনিকাল বিষয়ে ধারণা না থাকার কারণে যে দক্ষতা সে অর্জন করতে চায় তা সত্যিই সময় সাপেক্ষ ব্যাপার । তাই কোডম্যানবিডি এর ফুলস্ট্যাক ডেভেলপমেন্ট উইথ React, Next JS and Prisma কোর্সে থাকছে লাইভ কোডিং ক্লাস এর পাশাপাশি জুম্ ওয়ান অন ওয়ান সাপোর্ট সিস্টেম। যে কোনো সমস্যার তাৎক্ষণিক সাপোর্ট নিয়ে একজন দক্ষ ডেভেলপার হবার প্রত্যাশায় এগিয়ে যাওয়া এখন সময়ের ব্যাপার মাত্র।
- Modern JavaScript, Async Call Debugging, React, React Redux, REST API, সার্ভার রেন্ডারিং এর জন্য বর্তমানে রিএক্ট এর সবচেয়ে জনপ্রিয় টুলস হলো react redux, যা দিয়ে আমরা Server-Side Rendering (SSR), State Management, Complex UI Interaction, Predictable State Changes, Time Travel and Debugging, Large Applications তৈরী করতে পারবো।
- ক্লাসের সাথে থাকছে ২১ টির ও অধিক প্রজেক্ট যেগুলো আপনাকে প্রাকটিক্যাল স্কিল ডেভেলপমেন্ট এ অনেক বেশি সাহায্য করবে।
- জাভাস্ক্রিপ্ট এর সব চেয়ে জনপ্রিয় ফ্রেমওয়ার্ক Next JS যা দিয়ে আমরা ওয়েব এপ্লিকেশন, Dynamic Routes and Pages, Authentication and Authorization system, Content Management Systems (CMS), E-commerce প্লাটফর্ম ও Microservices তৈরী করতে পারবো।
- এছাড়াও dynamic web applications তৈরী করতে ও ডাটা Retrieve করতে ডাটাবেস হিসেবে থাকছে জনপ্রিয় nosql ডাটাবেস mongoDB ও PostgreSQL থাকছে এই কোর্স এ।
- এছাড়াও Version Control, Collaboration, Backup and Recovery, Branching and Merging এর জন্য থাকছে GIT এবং Remote Hosting, Code Sharing, Pull Requests, Community Engagement এর জন্য থাকছে github
৳ 8,000
Course Features
- 21 AMAZING PROJECTS
- BEGINNER FRIENDLY
- LIVE CLASS FROM ANYWHERE
- LIVE SUPPORT ANYTIME
- RECORDED VIDEOS AFTER CLASS
- INTERMIDIATE COMPUTER SKILL
- BRANDING & DIGITAL SKILL
- GOOGLE CLASSROOM
- SKILL POLISHING FOR RESUME
- JOB HUNTING SESSION
কোর্স মডিউল
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 | |
| Variable | |
| Data types | |
| Array | |
| Function | |
| Operator | |
| If else | |
| Loops | |
| Selector | |
| Event | |
| DOM Manipulation | |
| JavaScript Object | |
| Data Object |
| The let keywork | |
| The const keyword | |
| Arrow Functions | |
| The Spread & Rest Operator | |
| For/of | |
| Map & Set Objects | |
| Classes | |
| Promises | |
| Prototype | |
| String.startsWith() & String.endsWith() | |
| Array.from(), Array keys(), Array find() & Array findIndex() | |
| Truthy/Falsy | |
| Ternary Operator | |
| Destructuring | |
| JS Modules & Object Tricks | |
| Default parameter |
| Learn | |
| Build | |
| Test |
| 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 | |
| useState | |
| useEffect | |
| useRef | |
| useCallback | |
| useMemo | |
| useReducer | |
| 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 | |
| Reducers | |
| Store | |
| Payload | |
| 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
NextJS
| 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
Deployment
| Hosting NextJS App using C-panel | |
| Deploying Next Application in Vercel |
React JS
Javascript
Github
Next JS
Tailwind CSS
Typescript
Prisma
Vercel
MongoDB
PostgreSQL
Next-Auth
Redux
Frequently Ask Questions (FAQ)
01
যারা ফুলস্ট্যাক ডেভেলপার হতে চায়। ফ্রন্ট এন্ড এবং ব্যাক এন্ড ডেভেলপমেন্ট শিখে ফুলস্ট্যাক ডেভেলপার হিসেবে কোন ওয়েব অ্যাপ অথবা সফটওয়্যার কোম্পানিতে চাকরি করতে চায়, তাদের জন্য। এছাড়াও ফ্রিল্যান্স মার্কেটপ্লেস এও নেক্সট জেএস ডেভেলপার এর যথেষ্ট চাহিদা রয়েছে।
02
03
ফুলস্ট্যাক ডেভেলপমেন্ট উইথ নেক্সট জে এস কোর্স এর টেকনিকাল পার্ট শেষ করতে প্রায় ৫ মাস সময় লাগবে। তারপর ১ টি রিয়েল ওয়ার্ল্ড প্রজেক্ট এর মাধ্যমে কোর্সটি শেষ হবে ।
04
কোর্সটিতে আমরা JavaScript(es6), React, React Redux, Git Version Controlling, Next JS App Router & Page Router, MongoDB, PostGreSQL এবং App Deployment শিখবো। উপরে প্রতিটি টপিক এর আউটলাইন দেয়া আছে।
05
কোর্সটি করার জন্য আপনার কোন ডিগ্রি থাকা লাগবে না তবে আগে থেকে প্রোগ্রামিং স্কিল থাকা লাগবে। যে কেও কোর্সটি করতে পারবে না । তবে এই কোর্সটি সঠিক ভাবে শেষ করার জন্য প্রতিদিন অন্তত ৬-৮ ঘন্টা সময় দিতে হবে।
06
অন্তত পক্ষে কোর i3 অথবা i5 এর একটি ডেস্কটপ অথবা ল্যাপটপ লাগবে। মোবাইল দিয়ে কখনোই কোডিং শিখা সম্ভব নয়।
07
কোনো কোর্স-ই আপনাকে গ্যারান্টি দিতে পারবে না আপনি কোর্স করার পর ই চাকুরী পাবেন অথবা ফ্রিল্যান্স মার্কেটপ্লেস এ ভালো করতে পারবেন। এটা সম্পূর্ণ আপনার উপর নির্ভর করবে। তবে আমাদের আগের ব্যাচ গুলোর অনেক স্টুডেন্ট ভালো স্যালারিতে সফটওয়্যার ডেভেলপমেন্ট কোম্পানিতে জব করছে।
আপনাদের সাথে থাকছেন মেন্টর
Touhid Zaman
Software Engineer
তাওহীদ জামান, একজন স্বপ্নচারী প্রকৌশলী । ২০১৮ সাল থেকে প্রযুক্তিবিদ্যায় নিজেকে ধীরে ধীরে একজন পূর্ণাঙ্গ সফটওয়্যার ইঞ্জিনিয়ার হিসেবে গড়ে উঠার লক্ষ্যে কাজ করে যাচ্ছেন । বর্তমানে তিনি অস্ট্রেলিয়ার একটি স্বনামধন্য কোম্পানিতে ফুলস্ট্যাক ডেভেলপার হিসেবে কর্মরত রয়েছেন ।
এছাড়াও তিনি আমেরিকা, অস্ট্রেলিয়া সহ বাংলাদেশের বিভিন্ন প্রোজেক্ট ডেভলপমেন্ট এর সাথে জড়িত । আধুনিক সফটওয়্যার গঠনে নিত্যনতুন প্রযুক্তি নিয়ে কাজ করার পাশাপাশি সাধারণ শিক্ষার্থীদের সহযোগিতা করার মনোভাবে ফুল স্ট্যাক ওয়েব ডেভেলপমেন্ট এর প্রসারে নিয়োজিত আছেন।
Aiman Shafi
Frontend Developer & CMS Expert
আইমান শাফি এমেরিকা বেসড ২ টি ও UK বেসড ১ টি ওয়েব ডেভেলপমেন্ট কোম্পানি এর সাথে ফুল স্ট্যাক ওয়েব ডেভেলপার হিসেবে কাজ করেছেন । এই পর্যন্ত ২৩৭+ প্রজেক্ট কমপ্লিট করেছেন । এবং পাশাপাশি তিনি ফ্রীল্যানসিং মার্কেটপ্লেস সফল ভাবে ওয়েব এপ্লিকেশন, ওয়েব ডেভেলপমেন্ট ও ই-কমার্স ডেভেলপমেন্ট নিয়ে কাজ করছেন.।