Build & Deploy NextJs Full Stack App | React.Js, TailwindCss, GraphQl | Full Tutorial | LMS

Introduction

In this tutorial, we will walk through the process of building a full-stack online video course application using Next.js, React, Tailwind CSS, and GraphQL. By the end, you'll be able to create a functional application that allows users to enroll in courses, track their progress, and manage their memberships. This guide is especially relevant for those looking to enhance their web development skills or create their own learning management system (LMS).

Chapter 1: Project Setup

1. Install Next.js

   • Go to the Next.js website and find the command to create a new Next.js application.
   • Open your terminal and run:

     npx create-next-app@latest online-course-portal
     

   • Follow the prompts to set up your project, ensuring to select Tailwind CSS when prompted.

2. Open the Project in Code Editor

   • Navigate to your project directory and open it in your code editor (e.g., VS Code).

3. Install Additional Dependencies

   • Install ShadCN components:

     npm install @shadcn/ui
     

4. Set Up Tailwind CSS

   • Configure Tailwind CSS by editing the tailwind.config.js file to include any custom colors or settings you need.

5. Create Basic Components

   • Create folders for components and pages as necessary, starting with a basic layout structure.

Chapter 2: Routing and Layout

1. Create Routes

   • Inside the app folder, create folders for different routes (e.g., courses, dashboard).
   • Each folder should contain a page.js file that exports a default component.

2. Set Up Layouts

   • Create a layout component that includes a sidebar and header for consistent navigation across the app.
   • Use React fragments to wrap your routes and maintain a clean structure.

3. Implement Navigation

   • Add navigation links in the sidebar to allow users to easily switch between different parts of the application.

Chapter 3: User Authentication

1. Integrate Clerk for Authentication

   • Sign up at Clerk.dev and create a new application.
   • Use the provided API keys and set them up in your environment variables.

2. Set Up Sign-In and Sign-Up Pages

   • Create custom sign-in and sign-up components that utilize Clerk's authentication features.

3. Implement Protected Routes

   • Use middleware to protect certain routes (like course chapter pages) from unauthorized access.

Chapter 4: Course Enrollment

1. Create Enrollment Logic

   • Add buttons in the course preview to allow users to enroll or buy membership.
   • Implement logic to check if a user is already enrolled in a course.

2. Store Enrollment Data

   • Use GraphQL mutations to store user enrollment data in your database.
   • Use queries to fetch user-specific course information.

3. Display Enrollment Status

   • Update the user interface to reflect whether a user is enrolled, needs to buy a membership, or can access courses.

Chapter 5: Watch Course Page

1. Create Watch Course Layout

   • Implement a page where users can watch course videos.
   • Include a video player and course information.

2. Handle Chapter Navigation

   • Allow users to navigate between chapters and update the video player based on user selection.

3. Mark Chapters as Completed

   • Implement functionality that allows users to mark chapters as completed.
   • Use state management to show a user's progress through the course.

Chapter 6: Dashboard

1. Build Dashboard Layout

   • Create a dashboard page that displays user progress, enrolled courses, and additional information.
   • Use grid layouts to organize the dashboard visually.

2. Fetch and Display User Data

   • Use GraphQL queries to fetch data about user enrollments and progress.
   • Display this data in a structured way on the dashboard.

Chapter 7: Payment Gateway Integration

1. Set Up Payment Gateway

   • Integrate a payment gateway like Razorpay to handle subscriptions.
   • Create subscription plans and set up API calls to process payments.

2. Handle Subscription Logic

   • Implement logic for monthly and yearly subscriptions.
   • Save payment information for users who complete the payment process.

3. Update User Membership Status

   • Create an API endpoint to update user membership status in your database after successful payment.

Conclusion

In this tutorial, we walked through the comprehensive process of building a full-stack online video course application. From setting up the project and implementing user authentication to creating course enrollment and dashboard functionalities, you now have a solid foundation to create your own LMS. Consider extending the application further by adding features like user feedback, course ratings, or even a forum for discussions. Happy coding!