English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 282 Lessons (51h 35m) | 33.62 GB
Ultimate Next.js 13 Course + eBook
Become a top 1% Next.js 13 developer in only one course
Escape the shallow content & dive deep into the hottest tech of 2023
For developers who want to stand out and become indispensable. Become a top Next.js 13 developer in just one course. Move away from superficial content and dive into the most relevant technologies of 2023. Enter the new era of React. Here’s a little-known fact. 17% of the top 1 million websites use Next.js. And Next 13 usage among those top-1 million is doubling every month.
What’s in the course?
Deep dive and understanding of how things work Just knowing how to do something isn’t enough.
Especially with ChatGPT, GitHub Copilot, and new tools emerging that can create better and better code every day.
Understanding how the web works makes you resilient to future changes.
You’ll be able to generate code snippets and combine them into well-structured applications instead of being replaced.
Building and deploying a complex application.
If you only have half the pieces of a puzzle?
You have a terrible puzzle.
That’s why theory, short tutorials, and documentation aren’t enough. How do you actually put it all together into a production-ready application?
That’s what separates a great developer from a mediocre junior who just performs tasks given from above like a robot.
And finally…
Active tutorials so you’re 100% confident you can write the code yourself
Look, the biggest problem with project-based tutorials is that sometimes people just go along for the ride.
You need to practice on your own because no one is going to write the app for you.
That’s why I added active lessons.
This is where you write the most important parts of the app.
You master the features of Next13 to ensure you have the skills to create awesome apps with Next13 on your own.
Master the most in-demand technology stack of 2023.
You’ll need an intermediate knowledge of JavaScript (e.g. array methods, spread operator, try catch…) and a basic knowledge of React (JSX components and syntax, state management, functional components) to take the course.
If you are unfamiliar with these concepts, don’t worry. We’ll provide resources to help you catch up, but it will certainly be harder than if you already have experience.
If you’re asking if you need to know TypeScript – you don’t. Here at JSM, we learn by building applications, and this is a great chance to learn since TypeScript is used in most projects in the industry.
- Ultimate Next.js 13 Course – lesson 1-104
- Complete Path to JavaScript Mastery – lesson 105 – 187
- Cryptoket – An NFT Marketplace – lesson 188 – 235
- Filmpire – AI Powered Movie App – lesson 236 – 276
- Pro Webinars – lesson 277 – 282
Table of Contents
Complete Path to JavaScript Mastery
Introduction to the Course
1 Introduction to the Course
2 Where are the projects_
3 Environment Setup
4 Visual Studio Code
5 Visual Studio Code Extensions
6 Our Workflow
Bonus
Variables and Data Types
7 Variables Intro
8 Variables
9 Data Types
10 Comments
11 Strings
12 Numbers
13 Booleans
14 Null and Undefined
15 Objects
16 Statically vs Dynamically Typed Languages
Operators and Equality
17 Operators Intro
18 Arithmetic Operators
19 Comparison Operators and Equality
20 Strict vs Loose Equality
21 Logical Operators Part 1
22 Assignment Operators
Logic and Control Flow
23 Intro to Logic and Control Flow Intro
24 If Statement
25 Truthy _ Falsy Values
26 Logical Operators Part 2
27 Switch Statement
28 Ternary Operator
29 Looping – While and For Loops
Functions
30 Functions Intro
31 Declaring and Invoking Functions
32 Function Return
33 Arrow Functions
34 Parameters vs Arguments
Tricky Parts
35 Tricky Parts Intro
36 Scope
37 Hoisting
38 Closures
Strings in Detail
39 Strings Intro
40 String Length and Basic Properties
41 Change String Case
42 Searching for a Substring
43 Getting a Substring
44 Split a String
45 Reverse, Repeat and Trim a String
46 String Exercise
47 String Exercise Solution
Arrays in Detail
48 Arrays Intro
49 Array Methods
50 Array ForEach
51 Array Map
52 Array Filter
53 Array Find
54 Array Includes
55 Array Sort
56 Array Some and Every
57 Array Reduce
Objects in Detail
58 Objects Intro
59 Accessing, Adding and Updating Properties of an Object
60 Built in Methods
61 Methods
Value vs Reference
62 Value vs Reference Intro
63 Value vs Reference Explanation
64 Shallow Cloning
65 Deep Cloning
DOM – Document Object Model
66 Intro to DOM
67 Selecting Elements
68 Elements Properties and Methods
69 Working with Classes
70 Creating, Traversing and Removing Nodes
Classes, _this_ and _new_ Keywords
71 The _new_ Keyword
72 The _this_ Keyword
73 Classes
Asynchronous JavaScript
74 Intervals and Timers
75 Introduction to Asynchronous JavaScript
76 Callbacks
77 Callback Hell_
78 Promises
79 Async-Await
Modern JavaScript from ES6 to ES2020
80 Modern JavaScript Intro _ Recap
81 Module Imports and Exports
82 Rest and Spread Operators
83 Object and Array Destructuring
Next steps
Additional resources
Cryptoket- An NFT Marketplace
Welcome to the Course
84 Intro
85 Environment Setup
86 Visual Studio Code Setup
Bonuses
Business Masterclass
87 Business Masterclass Intro
88 Reading RFP
89 Proposal Template
90 CryptoKet Proposal
Project Initialization _ Setup
91 Project Setup
92 ESLint Setup
93 Tailwind Introduction
94 Git _ GitHub Setup
95 Next.js File-Based Routing and Setup
96 Reusable Logic
97 Navbar Development
98 Footer Development
99 Banner Development
100 Top Sellers
101 Hot Bids Part 1
102 Hot Bids Part 2
103 Create NFT Page
104 Create NFT Page Input
Smart Contract Development
105 Hardhat Setup Metamask Configuration
106 Smart Contract Configuration
107 Update and Get Listing Price
108 Function Create Token
109 Function CreateMarketItem
110 Function ResellToken
111 Function CreateMarketSale
112 Fetching NFTs Solidity
113 Deploying Smart Contract
Back to Next_js
114 NFT Context
115 Connect MetaMask Wallet
116 Upload Image to IPFS
117 Create NFTs
118 Fetching NFTs Next.js
119 What We_ve Done so far
Searching, Buying, Listing the NFTs and more!
120 Listed NFTs Page
121 My NFTs Page
122 NFT Details Page
123 Modal Development
124 Buy NFTs
125 Resell NFT
126 Best Creators Bonus Lecture
127 SearchBar Development
128 Reusing the search bar
129 Small Bug Fixes
130 Let_s get to Testing
131 Global NFT Loading
Filmpire – AI Powered Movie App
Welcome to the Course
132 Welcome!
133 Environment Setup
134 Visual Studio Code Setup
Bonuses
Project Initialization _ Setup
135 The Beginning
136 ESlint Configuration
137 GitHub Setup
138 Depedencies
139 Intro _ Documentation
140 Component Structure _ Routing
141 Styling
142 Commits
Filmpire
143 Navigation Bar
144 Sidebar
145 Redux Setup
146 Rendering Movies
147 Finishing Movie View
148 Movie Categories
149 Genre Icons
150 Redux Slice
151 Switch Genre Functionality
152 Search Functionality
153 Authentication
154 Authentication Solution
155 Finalizing Authentication
156 Movie Information Page – Part 1
157 Movie Information Page – Part 2
158 Movie Recommendations
159 Movie Trailer
160 Actor Page Assignment
161 Actor Page
162 Pagination
163 Small Fix
164 Responsiveness Adjustments
165 Favorited and Watchlisted Movies
166 Dark Mode
Implementing Voice Functionality
167 Alan AI – Part 1
168 Alan AI – Part 2
169 Alan AI – Part 3
170 Featured Movie Card
171 Minor Fixes
Deployment _ Next Steps
172 Deployment
Pro Webinars
173 Land Your Dream Dev Job in 6 Months
174 The Ultimate Git, GitHub, and Conflicts Guide
175 Introduction to Figma for Developers
176 Learn How to Code More Efficiently
177 GitHub Profile Guide
178 LinkedIn Profile Guide
Ultimate Next.js 13 Course + eBook
Intro
179 Intro
Prerequisites
180 Prerequisites
Introduction to Next_js
181 Before Next.js
182 Introduction to Next.js
183 How Web Works
Setup
184 DevFlow Project Setup
185 Eslint Prettier Setup
186 Git-Github Setup
187 Tailwind CSS Setup
188 Code Architecture
Next_js Routing
189 What is Next.js Routing_
190 Creating Routes for DevFlow
Next.js Architecture
191 Client vs. Server Paradigm
192 Different Rendering Strategies
Authentication
193 The Modern Auth Service
194 Setup Auth for DevFlow
Layouts
195 Creating Layouts using Next-Font and Metadata in DevFlow
Theme
196 Creating a Global Theme Context for DevFlow
Navbar
197 Container and User Account
198 Shadcn Installation
199 Theme Switcher and Mobile Navigation
Sidebar
200 Active Lesson 1 — Create a LeftSidebar
201 LeftSidebar Component
202 Active Lesson 2 — Create a RightSidebar
203 RightSidebar Component
Home Page
204 Home Route
205 Active Lesson 3 — Create a LocalSearchbar
206 LocalSearchbar Component
207 Active Lesson 4 — Create a Filter
208 Home Filters
209 Create Question Card
Ask a Question Page
210 Question Form and Validations
211 The Question Editor
212 Custom Multiple Tags Input
213 Making the Form Reusable
Develop Backend
214 Thinking in Backend
215 MongoDB and Server Actions Setup
216 Creating Question Model
217 Creating a User Model
218 Creating a Tag Model
Create a Question
219 Create Question Action
Fetching Questions on the Home Page
220 Display Questions on the Home Page
The Webhooks
221 Why _ what are Webhooks
222 Implement Webhooks and User Actions
223 Deploy Webhooks
Community Page
224 Create Community Page
Tags Page
225 Create Tags Page
Question Details
226 Create Question Details Page
227 Parse _ display Question Content
228 Create Answer Form
229 Create Answer Model
230 Implement Create Answer action
231 Integrate Create Answer action inside Answer Form
232 Display All Answers
Voting
233 Create Votes UI
234 Create Upvote-DownVote actions for Question
235 Integrate Question upvote-downvote actions on UI
236 Create Answer Voting
Collections Page
237 Implement Save Question Action and Create Collection Page
238 Display all saved questions
Views
239 Create Question Details Page View
Tag Details Page
240 Create a Tag Details Page
Profile Page
241 Create Profile Page
242 Create User Stats UI
243 Implement User Questions Tab
244 Implement User Answers Tabs
Edit_Delete User Actions
245 Implement Edit-Delete Question-Answer Component
246 Create Edit Question Page
247 Create Edit Profile Page
Show Top Results
248 Show Top Questions
249 Show Popular Tags
The Local Search Functionality
250 Manage search state
251 Implement Search functionality for the Home page
252 Implement Search functionality for the Community page
253 Implement Search functionality for the Collection page
254 Implement Search functionality for the Tags page
The Filters
255 Manage Filter state
256 Integrate Filters on Home page
257 Integrate Filters on the Community page
258 Integrate Filters on the Collection page
259 Integrate Filters for Tags and Answers
The Pagination
260 Create Pagination component
261 Implement pagination on the Home page
262 Implement pagination for the rest of the pages
Global Search
263 Create the Global Search UI
264 Create GlobalSearch Result Component
265 Create Global Search Filters
266 Implement the GlobalSearch action
Reputation
267 What is Reputation and how to approach it
268 Implement Reputation points for Questions
269 Implement Reputation points for Answers
270 More on Reputation and how to extend it
Badge System
271 Implement the Badge System
Generate AI Answer
272 Setup AI Answer feature
273 Implement the API route for the AI feature
274 Display the AI results on the UI
Loadings _ Toasts
275 Setup AI Answer feature
276 Create a Loading state for the Community page
277 Create Loading states for the rest of the pages
278 Create toasts for a few actions
Meta Data
279 What is Metadata and how to implement it
Bug Fixing and Recommendation
280 Fix bugs and implement Recommendations
Next.js 13.5+
281 Upgrade Next.js to the latest version
Deployment
282 Deploy the application
Resolve the captcha to access the links!