Summary
Highlights
Calling various other components such s sidebar to construct pages for different roles. this includes dashboard etc
The video introduces a full-stack LMS project built with MongoDB, Express, React, and Node.js. Educators can upload courses; students can enroll and watch them. Features include user login/registration, Clerk authentication, and Stripe payment gateway integration.
A quick demo showcases the LMS website's homepage, featuring a navigation bar, search box, course cards, testimonials, and a footer. The course details page includes title, description, average rating, instructor name, course structure, and enrollment options.
Demonstration of course listing and searching by keywords. Enrollment requires account creation via Clerk's sign-in component, with options for Google authentication or traditional signup. Post sign-in, users access 'My Enrollments' and potential educator dashboards.
Educators can view enrollment stats, create courses (title, description, price, chapters, lectures with video URLs), and manage published content. The video demonstrates course purchasing through Stripe's payment gateway using test card details.
Creating a new React project using Vite, installing dependencies (React Router DOM, React YouTube, Unique ID, Quill, Humanize Duration, RC Progress, React Simple Star Rating), setting up Tailwind CSS, and configuring Google Fonts.
Structuring the project's folders (components, pages, context) and creating necessary component files for both student and educator sections, including navigation, hero sections, course cards, dashboards, and form elements.
Creating an App Context to manage global state and functions. Implementing the App Context provider and wrapping the main application component to enable context access throughout the project.
Implementing routing using React Router DOM. Defining routes for student and educator pages, including dynamic routes with parameters for course details and videos.
Designing navigation bar, conditional rendering of links based on user role, incorporating logo, mobile and desktop views, styling with tailwind.
Setting up Clerk for user authentication. Creating a Clerk application, installing the Clerk React package, configuring environment variables, and implementing Clerk provider and user button component.
Implementation of hero section with title, description and sketch image styled using tailwind css
Creating the search bar component and its logic to redirect users to course listing using input text as keyword
Implementation of Companies logo sections with its properties and styling using tailwind css
Configuration and styling for course sections and title followed by mounting it on the homepage and then setting up dynamic dummy course array to setup course cards correctly
Designing a card that consists of images, titles and description to display in dashboard. Addition of dummy course contents to be rendered to create UI for course card
Creation of calculating chapter function that will calculate video duration and returning dummy json from context along with configuration changes in telwind config
Setting up search functionality and setting up search course to filter according to search. and setup API call for the same by setting up dummy state function
Creating and styling of testimonial components then mounting them on the home page while configuring various properties
Call of Action section and its components. implementation and setting the button on home JSX file
Desgining the foter section for different screens based in logo description, contact information and newsletter subscribe option
Desining course listing component from header to display of item while using dynamic input from API for searching courses
Desiging the course details to display title, rating etc. Then setting loading function and state while fetching data from the API during setup
Adding feature from the quill API to write rich text including various formats for describing text for any course
Configuration of what table row columns needed in this section with styling and configuration while setting up state changes in both context and table jsx files
Integration of components from React to implement structure and design as desired to complete the pages
Configuration of video player component inside ReactJS while setting up API hooks and onclick function calls
Design of a dynamic feature that allows and user to rate using his profile. the user can change or update it any time
Configure chart and dashboard data by setting up State function then calling chart as an API for the chart component to perform the dashboarding
API Implementation for publishing the different course in MY course dashboard data then calling student enrollment and dashboard component to perform UI operations
Setting up backend with all required packages such as express and import modules
Setting up the configuration to access database.com to provide the configuration file for the server to connect remotely
Implementation for users with controller function to update , insert and create functions.
Coler Hooks implementation as controller and also its type for different events success fails etc
Set up and configuration of the cloud login using API keys, secret keys and name in the environment variable then setting it up using different custom functions
Defining Schemas and creating Models and its variable to add course materials and implement relations
Addition of Multer API key's to be connected and then to be imported in the controller after that, configuration of try and cat statements with its properties and variable values .
Importing all models and set them to use with the code and adding conditions and rendering conditions to perform listing
Connecting the database with user_id to authenticate
Publish the full stack App to the Github after committing changes sync it to Versal for online deployment
Config API Keys on the Color DashBoard then add to the ENV file , finally , pull Versal deployment url to complete
To set the App state change from front end , update use effects with relevant API data
Here are code changes and configuration changes to update, add reviews , and add to users and models for configuration
Connect the Frontend to Backend so the App can get the state change and sync the user profile for front-end user experince.
Addition of new state API calls, create functions, and then configuration with the controllers to publish and complete the build