Full Stack Development With Next JS & Typescript

Focused View

Niraj Dhungana

21:47:01

189 View

1. Typescript For Beginners

1. What is TS.mp4

08:55

2. Environment Set Up & First Taste of Typescript.mp4

06:29

3. Basic Types in JavaScript.mp4

03:48

4. Type Inference.mp4

04:10

5. Basic Rules to Define Types.mp4

06:18

6. Types for Objects and Arrays.mp4

04:41

7. Type Keyword & Optional Type.mp4

04:39

8. Functions.mp4

10:17

9. Interface.mp4

15:20

10. Generic Types.mp4

04:53

11. Any Type.mp4

05:19

12. When to use any.mp4

01:38

2. React and TypeScript

1. React TS Project Setup.mp4

02:14

2. Rendering App.mp4

07:49

3. Component & Props.mp4

09:50

4. Input and Change Handler.mp4

09:42

3. Core Concept of Next JS

1. What is the concept of Next JS.mp4

07:27

2. React vs Next JS.mp4

07:36

4. Project Setup

1. New Next JS Project.mp4

10:48

2. Custom CSS Style.mp4

05:23

3.1 dev-blog.zip

3. Setting up Tailwind CSS.mp4

05:59

4. VS Code Shortcuts.mp4

04:59

5. Cheat Sheet.html

5. The Real World Project

1. Future Plan.mp4

06:10

2.1 posts.zip

2. What is Markdown.mp4

07:28

3.1 smippet.zip

3. Custom Code Snippets.mp4

09:21

4. Making Blog Card.mp4

13:20

5. Lets Look at API.mp4

10:40

6. Before We Read Files & Folder.mp4

02:49

7. Reading Files & Folders.mp4

09:15

8. Trust Me Gray Matters.mp4

05:07

9. Fetching Data.mp4

07:29

10. getStaticProps.mp4

02:57

11. getStaticProps in action.mp4

05:52

12. Why getStaticProps.mp4

04:19

13. Fixing Types.mp4

04:20

14. Fixing Styles.mp4

01:24

15. Linking to SinglePage.mp4

04:17

16. Dynamic Route.mp4

05:37

17. getStaticPaths.mp4

07:02

18. Returning All Paths.mp4

04:01

19. Rendering Static Props.mp4

05:04

20. Fixing Types Part 2.mp4

03:56

21. Rendering Markdown.mp4

07:53

22. Styling Markdown.mp4

04:05

23. Lets Build Static App.mp4

08:56

24. The Build Command.mp4

07:17

25.1 dev-blog.zip

25. fallback.mp4

15:27

26. Setting up GitHub.mp4

03:55

27. Git Push.mp4

04:46

28. Publishing The App.mp4

04:01

29.1 dev-blog.zip

29. Updating The App.mp4

03:48

6. New Project Setup

1. The Plan.mp4

06:04

2. Project Setup.mp4

04:18

3.1 colors.zip

3.2 dev-blogs-v2.zip

3. Custom Colors.mp4

06:07

7. Admin Nav

1. Nav Container & Dark Mode.mp4

07:46

2.1 logo.zip

2. App Logo.mp4

04:51

3. Rendering Nav Items.mp4

14:48

4. Nav Toggler Button.mp4

03:58

5. Toggle Nav Logic.mp4

13:53

6. Using Localstorage For Nav.mp4

09:56

7. Adding Nav Transition.mp4

04:40

8.1 dev-blogs-v2.zip

8. Creating Common Admin Layout.mp4

08:48

8. Rich Text Editor

1. Rich Editor Options.mp4

06:31

2. Configuring Editor.mp4

04:14

3. Editor Commands.mp4

08:32

4. Toolbar.mp4

06:48

5.1 dropdownoptions.zip

5. Custom Dropdown.mp4

09:22

6. Changing Headers.mp4

10:38

7. Button Component.mp4

06:36

8. Rendering Buttons.mp4

06:54

9. Applying Logic.mp4

04:53

10. Styling Editor.mp4

07:49

11. Button Active Style.mp4

03:06

12. Insert Link UI.mp4

00:48

13.1 linkform.zip

13. Insert Link Form.mp4

13:02

14. Link Form State.mp4

06:39

15. Insert Link Logic.mp4

10:23

16. Resetting Link Form.mp4

04:55

17. Selecting Link Text.mp4

06:36

18.1 editlink.zip

18. Bubble Menu.mp4

07:07

19. Update Link Form.mp4

09:09

20. Updating Link in Real.mp4

03:36

21. Embed Youtube.mp4

11:51

22. Image Gallery.mp4

02:12

23.1 modalcontainer.zip

23. Creating Modal.mp4

11:15

24. Close Logic.mp4

06:28

25.1 res.zip

25. Gallery For Images.mp4

07:50

26. Image Component.mp4

11:42

27.1 empty-bg.zip

27. Busy Indicator on Upload.mp4

06:50

28. Selecting Image.mp4

07:41

29.1 actionbutton.zip

29. Alt Input and Select Button.mp4

07:53

30. Image Upload Input.mp4

03:17

31. Handling Change Event.mp4

09:25

32. Rendering Image.mp4

05:49

33. Important Changing Prop Name.mp4

00:56

9. Image Upload API Route

1.1 res.zip

1. Setup TipTap Edior.mp4

01:07

2. How to Upload Images (Discussion).mp4

05:56

3. Uploading Image Part 1.mp4

08:59

4. Uploading Image Part 2.mp4

16:36

5. Reading All Images.mp4

07:05

6. Fetching Images.mp4

05:25

7.1 dev-blogs-v2.zip

7. Uploading Image From UI.mp4

05:34

10. Finishing Editor

1. Title Input.mp4

02:31

2. Seo Form.mp4

12:22

3. Finishing SEO Form UI.mp4

02:30

4. Seo Form State.mp4

07:16

5. Slug and onChange.mp4

08:34

6. Thumbnail Selector and Submit Button.mp4

17:45

7. Handling Editor State.mp4

11:36

8. Accepting Initial Value.mp4

11:01

9.1 dev-blogs-v2.zip

9.2 favicon.zip

9. Head Component.mp4

08:11

11. New Post

1. The Database.mp4

03:03

2. Lets Install Mongodb.mp4

02:27

3. Connecting to DB.mp4

08:18

4. Post Schema.mp4

12:23

5. Joi.mp4

13:39

6. Entire Post Validation.mp4

11:19

7. Handle New Post Submit.mp4

13:24

8. Accepting FormData.mp4

07:11

9. Saving Post Inside DB.mp4

10:53

10. Uploading Thumbnail.mp4

06:06

11. Types for Schema.mp4

03:41

12. getServerSideProps.mp4

06:58

13. Little Cleanup.mp4

05:45

14. Update Post With getServerSideProps.mp4

15:27

15. Submit Update Form.mp4

04:18

16. Update API Route.mp4

15:42

17. Fixing Types.mp4

06:53

18.1 dev-blogs-v2.zip

18. Updating Thumbnail.mp4

07:21

12. Rendering New Posts

1. The Plan.mp4

01:48

2. Basic UI.mp4

06:03

3. Post Card 1.mp4

09:14

4. Post Card 2.mp4

08:16

5. Link inside Link.mp4

05:05

6. Post Card Final.mp4

02:48

7. Setting up getServerSideProps.mp4

03:05

8. Fetching New Posts.mp4

14:12

9. Posts API Route.mp4

07:16

10. The Plan for Infinite Scroll.mp4

03:03

11. Infinite Scroll Component.mp4

09:17

12. Infinite Scroll Posts - Admin.mp4

09:05

13. Default Layout.mp4

06:35

14. Infinite Scroll Posts - User.mp4

05:16

15. User Nav.mp4

05:43

16. Github Auth Button.mp4

09:10

17. Profile Head.mp4

09:42

18. Dropdown Options.mp4

03:31

13. Authentication

1.1 Next Auth.html

1. Next Auth.mp4

06:29

2.1 Catch All Route.html

2. Catch All Route.mp4

05:32

3. Github Auth Provider.mp4

03:25

4. Register Github OAuth.mp4

07:50

5. Session with _app.mp4

08:58

6. Signin and Signout.mp4

06:10

7. User Model.mp4

07:43

8. Storing New User to DB.mp4

08:07

9. Auth Middleware.mp4

17:03

10. Updating Auth Token.mp4

10:34

11. Custom Auth Pages.mp4

02:41

12. Updating Session.mp4

14:30

13.1 dev-blogs-v2.zip

13. dbConnect.mp4

01:03

14. Going Live

1. The Plan.mp4

01:29

2. Single Post.mp4

09:21

3. Fetching Single Post.mp4

08:10

4. Rendering Single Post.mp4

09:31

5. Rendering Tool Tip.mp4

07:32

6. Dark Mode.mp4

15:16

7. Device Theme Mode.mp4

03:40

8. Secondary Nav - Admin.mp4

07:17

9. Search Bar.mp4

03:23

10. Fixing Theme.mp4

04:16

11. Confirm Modal.mp4

12:09

12. Delete Api Route.mp4

06:52

13. Problem With Delete.mp4

02:51

14. Common Ground for Delete.mp4

09:06

15. Confirm Delete.mp4

09:19

16. Finding The Culprit.mp4

10:25

17. It Was My Mistake.mp4

02:32

18. getServerSession.mp4

07:48

19. Next Build.mp4

08:04

20.1 dev-blogs-v2.zip

20. Uploading to Vercel.mp4

05:49

21. Setting MongoDB.mp4

10:55

Description

Learn Next JS from scratch with Typescript and Tailwind CSS by building a real world fullstack blog application.

What You'll Learn?

Learn basic of Next JS
Build a Next JS foundation with simple project
Build advance real world fullstack blog app
Learn to manage database, api and cloud using Next JS
Learn to build real word project using React Typescript Tailwind CSS and Next JS

Who is this for?

Who want to learn Next JS and Typescript by doing or creating a real world project like the fullstack blog application.

More details

Description
There's no better way to learn programming than by making real world projects.
This is the lesson I learned as a self taught programmer. There is no doubt that learning to code is hard, but only if you don't know how and from whom to learn.

Hi my name is Niraj I teach beginners how to code. And I made this course to teach Next JS for all levels of programmers. In this course we will learn to-

build an advance blog app to understand the concept of Next JS
build Authentication and Middlewares
add user intraction like comments, likes
build an admin panel
build custom rich text editor
build real world advance UI using Tailwind CSS
use real world database like MongoDB
use cloud storage called cloudinary

Inside this course we have everything for you to understand fullstack development using Next JS and Typescript. Like I mentioned above here you will learn to build advance UI using React JS and a populer CSS framework Tailwind CSS.

Introduction to Typescript
At first we will understand what is Typescript, how to write Typescript and how to use it with React JS. Because Next JSÂ is just an advance of React JS.

Small Project for Fundamental
Then we will directly jump to learn about Next js fundamentals by building a small blog application. Where you will learn to fetch and render data from local file system and also we will cover topics like server side rendering, github and publishing a Next js app.

The Blog App
Once we understand the fundamental of Next js. We will gradually jump to the advance topics. Where you will learn to build your own custom and advance UI using Tailwind CSS, you will learn to use your own database called MongoDB, you will learn to build your own admin panel, you will learn to upload image from next js to your cloud storage.

There are so many things available inside this course which I can't include everything here even if I want to. But you will find out that on your own once you enroll. And don't worry if you don't like what I am teaching which I think will not happen but if it happens you can always make full refund.Â Â Â

Who this course is for:
Who want to learn Next JS and Typescript by doing or creating a real world project like the fullstack blog application.

User Reviews

Rating

average 0

Total votes0

Focused display

TypeScript

Niraj Dhungana

Instructor's Courses

I am a full-stack software developer from India. I like to learn new thing all the time. According to my friends and other students whom I teach on YouTube, says that I can explain complex topics in easier way.That's why I'm here to share what I've got so far. I believe in practice so you will always find me doing practical experiments always.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.