Build Full Stack LMS NextJS 13 App : NextJs , ReactJs, Tailwind css ,Graphql Hygraph, Clerk

Build FullStack LMS NextJS 13 App: NextJs, ReactJs, Tailwind CSS, GraphQL Hygraph, Clerk

🔥 What You'll Learn:

Craft beautiful and responsive UI elements with Tailwind CSS
Supercharge your app with GraphQL using the advanced Hygraph implementation
Implement secure user authentication and authorization with Clerk
🚀 Key Features of This Tutorial:

Comprehensive step-by-step guidance
Hands-on coding and real-world examples
Best practices and design patterns
Tips and tricks for optimized development
Deployment strategies and scaling considerations
Whether you're a seasoned developer looking to expand your skills or a newcomer eager to dive into FullStack development, this tutorial will provide you with the knowledge and tools needed to create a robust and scalable LMS platform.

Don't miss out on this opportunity to stay ahead in the world of web development. Join us in this journey, and let's build the future of online education together! Subscribe now and turn on notifications to get the latest updates. Happy coding! 💻📚

#NextJS #ReactJS #TailwindCSS #GraphQL #Hygraph #Clerk #FullStackDevelopment #LMS #WebDevelopment #Tutorial
Join this channel to get access to perks:

00:00:00 Introduction
00:04:55 Category-Course Filter
00:05:47 Create NextJs App
00:12:14 Folder Structure
00:17:35 Authetication
00:28:00 Sidebar Nav
00:45:56 Header
01:04:55 Hygraph Introduction
01:18:37 Integrate Graphql in App
01:25:52 Display Course List
01:41:14 Course Preview Page
02:20:36 Course Enrollment
02:44:45 Course Chapter Page
03:13:00 Mark Course Complete
03:38:54 Course Filter Logic
03:44:29 Dashboard-User Enrolled Course
04:10:49 Final Touchup

[artistejiro]

Ignore the harsh comments. I'm getting value from this video

[rawwwwwr]

give credit where it is due - code with antanio

[vidya]

Bro 1:37:00 The Book tag is not working ...it shows [ ReferenceError: Book is not defined ] ....Even Image tag is not working ..please help me bro ...😭😭😭...please someone help meeee

[danielkvaa]

Hello! I love your videos and have learned so much from them! I have a question:

1. I successfully downloaded and installed the GitHub source code.
2. After implementing the Master_URL, it was successfully configured, and I can see the "browse" page with your example content displayed on both the "browse" and "course-preview" pages.

3. However, I'm unsure how to properly set up the course-preview page.

Currently, I can see the "browse" page, but the course-preview page is not displaying correctly. Could this be due to an issue with my configuration in Hygraph, or are there additional changes needed in the code?

- Thank you so much!

[umarameen]

Can I present it as my college project ?

[РоманДжуган-йв]

Thanks.
I saw your video has more than 100mb in size, how did you make it happen considering the hygraph 100mb restriction on upload?

[rheavictor]

Amazing project, thank you so much for the hard work here. Goin to spend the next few days practicing on it!

[mahdiandalib]

thx man, can you plz update this course in future, where users could join exams and quizes and also answere interactive questions like programming hub?

[SajidKhan-wxhh]

Hi bro where I can create the thubnails of the course like yours

[raxcor]

Thanks for the amazing video, I was able to do most of it. But Can you please help with the meta data part. I could make it dynamic when it is marked as "Use Client" Next has this generateMetadata option but I could bring it inside the component or pages.

[vidya]

Bro I got one more problem is 2:15:00 I mean after downloading the images ...I am not able to use them as Github, demo, youtube logo ..the code is same as yours but not showing the icon.. there is no error showing ...but instead of showing the icons ..it shows black and white type photo logo !!

please helpppp meee broo @TubeGuruji help !! big fan !! #TubeGuruji @tubeguruji

[lukmonabdulsalam]

wait what about where the instructor create courses

[usmanmarkaz]

Thanks for this osam Project.and its time for react native Projects 😀😀

[Asyedabdulrahman]

happy to here using js insted of typescript

[animasaunjoseph]

I keep getting this error for the video preview and even after following your steps, I get the same error

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading '0')

Source
(24:58) @ CoursePreview

22 | <div className='col-span-2'>
23 |
> 24 | <VideoPlayer />
| ^
25 |
26 | </div>
27 | <div>
Call Stack

[vidya]

3:01:00 what could be the issue bro ?? help please help !! I really need it bro 😰😰
Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'map')

Source
(13:25) @ map

11 | </div>
12 | <div>
> 13 | {course.chapter.map((chapter, index)=>(
| ^
14 | <div key={index} className='flex gap-2 text-gray-600 text-[16px] px-5 p-4 cursor-pointer'>
15 | <PlayCircle/>
16 | <h2>{chapter.name}</h2>

[BIPLAV]

How can make admin Panel which help user friendly

[Devbrothebot]

Amazing man.
So one can add a monthly subscription if I don’t wanna sell?

[puzzle-man]

Are you supporting for any issues in code?

[saisashreek]

Auth middleware in clerk is deprecated and now in Clerk has updated their documentation with clerkMiddleware. Try making new video on new documentation.