Build a Full-Stack LMS with React, Node.js, MongoDB & Stripe

hello and welcome to another exciting tutorial of great stack in this tutorial we are going to learn how to create a

full stack learning management system using mongodb Express react and nodejs this is a LMS website where Educators

can upload the courses and students can enroll and watch the courses online in this project we will create the user

login and registration feature using Clerk clerk is a user authentication and user management platform it also

provides beautiful and ready to use UI components like sign in sign up and profile component for react application

we will also add the stripe payment gway in this LMS project so that students can buy the courses online so let's start by

taking a quick look at the project demo that we will be building in this tutorial so this is the homepage of our

lmsb we site where you can see the navigation bar then title and search box then we have the trusted companies logo

then we have some course card after that we have the testimonials and one call to action section then we have this

footer now if I open this course so here you can see this is the course description page where you can see the

course title description and average rating number of our students enrolled in this course then we have the

instructor name and then we have the course structure and we can display the course chapter and lectures title then

we have the free preview option also after that you can see here we have the detailed description of this course and

in the right side we have this card where you can see the course image then we have the offer price actual price and

discount then we have some other data of this course and enroll Now button now if I come back and click on this one

if I click on this button so it will open this course list page where you can see all the courses available on this

LMS website and here we can search for any course by adding any keyword so let me add the keyword JavaScript and click

on this search button now you can see the course related to this search term and here we have the option to remove

this search filter we will click on this cross icon so again we can see all courses now to enroll into any course we

have to create an account on this one so here we have the create account button if I click here it will open a signin

component that is built using Clerk and if you are new on this website you can use this link sign up to create an

account and I already have the account so I'll click on this sign in and sign in using my Google account after sign in

you will find your profile picture here and after that you will see the my enrollments and here you will see the

option to become educator and once you are educator you will see this option educated dashboard so now if I click on

this my enrollments so it will open a list of courses where you have enrolled and if I click on this button it will

open the course player page where you can watch the courses right and you can also rate this course and to play this

course here we have this watch link if if I click here it will start playing the video in right side like this let me

just come back and we will open this course click on this button and here we have this chapters if I click on this

watch button so you can see this course will play in the right side and here we have the chapter number and lecture

number then we have the lecture title and we can also Mark this lesson as completed by using this Mark complete

link now if I go to educator dashboard so here we have the dashboard for educator where educator can see the

status like number of enrollments then total courses and total earning after that here we have this add

course page from where educator can add any new course so here we have the option to add the course title like this

then we can add the course description here after that that here you can enter the course price then you can add the

discount and here we have the option to add the chapters so in the courses we will add the chapters and in each

chapter we can add multiple lectures so let's click on this add chapter button so here we have to add the chapter name

so just add chapter one click on okay so now in this chapter we can add the lectures so just add this lecture here

we will add the lecture title then total duration of this lecture then we have to provide the URL that is the video URL of

this lecture right and if I check this checkbox then it will be available for free preview and after adding all the

detail just click on the add button so this lecture will be added and finally you have to click on this add button so

it will publish your course after that you can see the published courses here in my courses section so in this my

courses you can see I have published one course right and this is the course price and

this is the publish date and here we have the number of students enrolled in this course after that you can go to

this section where you can see the number of enrolled students and the student name right so this is the

educator dashboard now let's try to purchase any course so I'll select this course and click on this enroll Now

button so it will open this a stripe payment Gateway and here we have to add any email ID and click on this card and

here we have to add the card details so right now we are in The Taste mode of this stripe so here we can use the test

card number so the test card number is this one and here we have to add any future date then add any 3digit number

and here we have to add the name then click on pay button so now you can see we have successfully enrolled in this

course also that is cloud computing Essentials and now we can start watching this course so this was the overview of

our LMS project after we finished building this LMS project using marus tag we will deploy it on versal before

we dive into the code if you are completely new to react I highly recommend watching my react beginners

tutorial first it is available for free on my YouTube channel and I will include the link in the description below now

let's get started now we will start creating our LMS project so right now I'm on my desktop

screen and here we will create a folder with the name LMS which is learning management system

now we will open this folder in vs code and our LMS folder is open in this vs code now we will open the terminal so

we'll click here select new terminal so in this terminal you can see we are at this directory LMS so here we have to

create a react project to create the react project we will use wheat package so let's write

npm create we at latest now press enter here we will press y for

yes now it is asking for for the project name so in this project we will create the front end and back end so for the

front end we will write the project name client then press enter after that we will select the

framework react then select JavaScript now our basic react project

has been created next we have to move to this CL client folder so in this terminal we will write CD

client so in the left side bar you can see we have the client folder and in this one we have these files right now

you can see in this terminal we are at the client folder so here we have to install the dependencies

so let's write npm install so it will install all the depend dep is required for the DC

project after executing this command you will see a new folder in the left side that is nodecore

modules in this folder it will install the dependencies after installing it we can

run our project to run the project we will write npm run Dev we have added npm run Dev press

enter so it will run our project so our project is running at this URL Local Host Port

5173 now we will open this link in web browser so this is our basic whe plus react project it is successfully running

in the web browser next we have to clear this project so just come

back and in the left side word you can see here we have this index.html file and in this

one we have this title so in this title we will add our own title so here I'm going to add our website name that is ID

me this is the project name then we will add our channel name great a stack after that we will open this SRC folder

and in this SRC folder you can see we have app. CSS just delete this one then we have this

app.jsx so we will clear all the code from this file and here we will use RF C snip it so it will create this component

structure if this RFC e snippet is not coming for you then you need to install one extension so here in this extensions

you need to search es7 react Redux just install this extension then you can use the RFC

snippet to create the component structure after that here we have this index. CSS file so we will open this and

here we will clear all the codes in this index. CSS next we have to insert the assets

that we will be using on this website so let me just come back to the desktop screen and here we have one folder

called assets and in this one I have all the images and icons that we are going to use on this website so let me just

copy all the images and icons and here we have one assets. JS file file also just copy everything and come back to

the project folder then go to client then go to SRC and in this one you will find this assets folder so in this one

we have to paste all the images and icons so let's paste it here after that in this one you will

find one file called favicon SVG so just copy this favicon . SVG file and come back to the project folder and here you

will find this public folder so in this public folder paste this favicon do SVG file and we can delete this we.

SVG now just come back to the vs code and in the left side you can see we have the assets and in this assets we

have all the images and icons and one assets. JS file and here in this public folder we have this favicon do SVG so we

are going to use this favicon do SVG as a favicon icon for our website so here we will open this index.html file and in

this one you will find this link tag where you will find re icon and here we have this hdf v.svg so

instead of this wheat. SVG we will write favicon do SVG save the changes and come back to

the web page now you can see the icon in this browser tab so it has been updated so we

have added our own favicon icon and you can see the title also it me cre a stack correct now let's come back and here we

have two add some other packages also so to install other packages we have to come to this terminal and first we have

to stop this project for that let's write contrl C press y now we will install some packages so

just write npm install and write the package name so first we will install the react router

Dom using that we can add the routing on our react project after that we will add the

another package that is react YouTube using this react YouTube package we will add the YouTube videos on our

website after that we will add the another package that is unique ID using this unique ID

package we will generate the unique hexad decimal ID for our courses after that we will add the quill package using

this quill package we will generate the rich text for our course description and after that we will add the next package

that is humanized duration so this package will help us to convert the video

duration in hours minutes and seconds so next we will install the RC progress package so this RC progress package will

help us to design a progress bar or circular progress next we will install one more

package that is react simple star rating so the simple react rating package will help us

to display a star ratings for our courses so we have added npm install react router Dom react YouTube then

unique ID quill humaniz duration RC progress react Simple Start rating now press enter so it will install all these

packages after that in the left side bar you will find this package.json file just open

it and in this one you can see we have dependencies and in this dependencies you will find all the packages that we

have installed so we have all the packages right after that we can start our

project to start our project again we will use npm run Dev press [Music]

enter so it will again start the project and if I come back to the web page refresh it so it is

working next we have to add the support of telin CSS in our project so let's open a new tab and search

for V tnd and open this

website and here we have the steps to install telin CSS in our we plus react project so the first step is to create

react project that we have already created then we have the Second Step so we have to use these commands so just

copy this one and come back here and let me again stop this project using contrl

C then paste the command now just come back to the documentation again and copy the second

command and paste it here now let's see the next step so the next step is to configure the tnd config

JS file so just copy everything from here and come back to the vs code and after that in the left side you will

find this telvent config.js file so here we have this file and in this one we will replace these contents so just

remove everything and paste the code that we have just copied that's it after that again come back here and here you

can see the next step we have to add these lines in the index. CSS file so just copy this and come back here and

open SRC index. CSS and paste it like this after that just come back

here and you can see the next step is to start our project that's it so we have configured the telin CSS to start the

project again write this npm run Dev now we can use the tent classes in our react project next we have to add

the Google font on our website to add the Google font let's search for Google

font open this website fonts. goole.com and in this one we have this search box so in this

one we will search for Google font that is outfit select this one now just click on

this get font and here you will see this button get embed code just click here and here we have

this import button we'll click here and just copy this import statement and come back to the vs

code and here before these three lines we will pay the import statement like this after that we have to add the font

family for the entire web page so here we will add a start and font family and we will provide font name

that is outfit so now we have the support of Google font on our complete react

application next we have to create create the folder structure for our project so let me just hide this

terminal and in this left sideb bar we will create the folder structure so in this SRC let's create a folder called

components and in this components folder we will create the components for the educator and also for the students so in

this one we will create another folder called educator and in this components folder

let's create another folder called students so we have the components folder then we have educator and

students now in this SRC let's create another folder called pages so in this Pages folder we have to

create the pages so in this Pages folder again we will create two other folders for

educator and students so create a new folder in this pages and write the folder

name a students or let me write a student and in this Pages let's add

another folder with the name educator and here also I will update the name it will

be a student like this now in this SRC we have to add one more folder that is

context in this context folder we will create the context file of our application where we will store the

state and functions that we will use in the entire application so now let's create the files in all

these folders so first let's open this a student folder in this components so we will create the components for a student

so here we will create a new file in the a student folder and write the file name never.

jsx here we will use ra Ace and let's write the text never we will add it in H1 tag like

this now let's create another file and it will be hero. jsx for hero

component again write RF C snippit and here we will add the title hero now let's add another

component that will be call to action do jsx let's create another component that is

companies here we will add our a fce and write the text companies now let's create a new

component course card do jsx let's add one more

component course section so let me write courses section do

jsx after that we will add the another component in this student that is loading

now let's add next component that is [Music]

rating now we will add the next component that is search bar after that we will add the next

component that is testimonial sections now let's add next component that is

footer do jsx so we have created these components for a student section now we will create

the components for educator so in this educator folder we will create a new file and write the file name nvar we

will display different nvard for educator so we are adding the component nard

dot jsx here we will add the text edu that is Educator

never now in this educator folder we will create a new file and it will be sidebar here we will add the

text sideward and in this educated we will create one more file that is another component called

footer so for the educator we will add different footer here we will add the text a do

footer so we have created the components for educator and students now we have this pages so we will create the pages

so in this one let's create the pages for a student so in this a student we will create a new file and write the

file name home. jsx here we will add the

text homepage now let's add another file that will be course Details page so we will add

course details. jsx now let's write new page so we will

add courses [Music] list after that let's create a new page

that is my enrollments now let's write what more page that

is player where a students can watch the courses so we will add player.

jsx so we have created the pages for a student now we will create the pages for educator so educator will have the add

course page dashboard then educator page then my courses page where educator can see their courses and there will be one

more page called a student enrolled where educator can see who has enrolled to their courses so in this educated

folder let's create a new file and write the file name add course do jsx

add codes now let's create a new file that is dashboard educator dashboard now we will

create a new page that is Educator now we will create a new page called my

courses and we will create one more page that is students enrolled so we have created all pages

and components for our project next we have to create a context file where we will store the common

Logics and we will store the state and functions so in this context folder we will create a new file called add

contact add app context.

jsx in this app context. jsx file we have to create the context so first we have to use the create context hook so

let's write import create context from

react after that using this create context we will create the app context so let's add

const app context equal to create context now we have to export this app

context so just add export like this after that we have to add the app context provider so here we will add

export const app context provider and create this function

so we have created app context provider function and in this one we will get the props

and here we have to return one component so just add return

and we are going to return this app context dot provider component like this and in this one we have to use

this props do children like this next we have to provide

the value in this component so here we will add the value and in this value we have to

provide one object so first let's define one object here so just write con value is equal

to empty object and we will provide it here now whatever States or function we will declare in this value object that

will be passed in this app context. provider right next we have to provide this support of app context in the

complete application for that let's open this main. jsx file and in this one you can see here we

have this a strict mode so let me remove it and here we will use app context

provider like this and just use the same tag for this closing so we will add it

here so we have added opening Tag app context provider and here we have this app context provider closing tag and in

this one we have this app tag then we have this app context provider that is imported from this

context folder app context. jsx file like this now save the changes and now we have the support of app context on

our complete application next we have have to set up the routes so to set up the react router

first in this file we have to import the browser router so we will write import and in this one we will

add browser router from react router Dom correct and after that we have to wrap this one using the browser router so

here let's write browser router tag and close it

here like this so first we have the browser router tag then we have this app context

provider then we have the app component like this so we have wrapped the app context provider using browser router

tag now we have the support of react router in our project next we we have to set up the routes and router for that

let's open this app.jsx file and here in this

one we have this return div so in this div we are going to set up the routes so here let's

write routes tag just select it from suggestion so you can see routes tag has been imported from react router Dom

close this tag here like this now in this routes tag we have to use the route so just write

route select it from here so this route has been imported now just close this tag for

self closing now in this route we have to provide the path so we will add the path

of homepage that is slash so when we will hit this path we have to display the homepage so here we will add element

and in this one we have to provide the page component so here we will add curly bres and provide the home page component

so just add home and select it from here so you can see this home has been imported from Pages a student SL

home like this now now we have to close this tag correct now whenever we will open

this slash then it will open this homepage component if I come back to the web page here you can see the message

homepage that is coming from this page as you can see here we have the pages and in this Pages we have the

student and here we have this home and here you can see the message homepage so the same thing is coming on this website

so it is coming using the react router now again come back to the app.jsx file and we will create the route for other

pages so after that we have to create the route for course list page so just add route or let me just duplicate it

and here we will change the path it will be course list and in this element we will write

course list so you can see this course list has been imported from Pages a student and

course list after that duplicate this one and here we have to add the path for course page so here we will write

path name course and it will be a dynamic route so here we have to display

different courses so here we will add course SL colon ID and we will provide the dynamic ID and

based on this ID we will display different courses so here we have to display the course Details page so just

write course details you can see this course details

has been imported from Pages student now let's duplicate it and here we will add the another page

that is my enrollments and here we will provide

component called my enrollments so it has been

imported here you can see we have added course list component so we have to add one more route for this one course list

and here we have to provide the dynamic input so after this course list we have to provide SL colon

input so based on the different keywords we will display different courses so let me just collect it it will be

input and here also we will Mount the same course list component So based on this input keyword we will display the

filtered course list after that we have added this my enrollments and just duplicate it and

here we have to display the player where user can watch the course so let's write the path player

and this route will be dynamic so we have to display different courses So based on the ID we will display course

on this page so here we will add/ colon course ID and here we have to display the player

component select it from here so this player has been imported after this player we have to

import the loading component so here just duplicate it and let's

write loading SL colon path so so it is also a dynamic route and here we will add the

loading component after adding it let's check all the routes so just copy this path

and come back to the web page and here if I provide Local Host Port 5173

SL course list so you can see here we have the message course list page correct now if I change the route if I

add course and after that we have to add any ID so just come back and here we will write SL course SL in the ID we

will write 10 like this now you can see course Details page so this route is working

now let's check this my enrollments just copy this one paste it here so now you can see my enrollments page so this

route is also working now just copy this player and after that we have to provide the course ID so here we will write

player and write any ID like 10 so you can see player page so it will display the player page now just come back and

here we have this loading and after that we have to add the path so let's write loading and then we will add then we

will add any path so you can see the text loading so these routes are working next we have to add the route for

educators so here after this route we will create one more route and this will be route open and

Route closing tag like this and in this one we have to provide the

path and here let's add educator like this and in this one we have to provide

one element so we will add the element and we will add educator element so you can see this

educator has been imported from Pages educator folder and educator file now just close this tag like

this now in in this one we have to add the nested routes within this educator so here let's write within this opening

and closing route tag we will write another route tag and this will be self closing like this and here we have to

add the path and we will add the path called educator and here we will add the

element and in this element we have to provide the

dashboard so just add dashboard now just duplicate this one

and here we will add the path add course we can remove this Slash from here and here we will

write component that is ADD course and here we will write the path that is my courses and here we will add the

element my courses now just duplicate it and here we will write the path called a student

enrolled and here also so we will add the element that is a student

enrolled so you can see so you can see a student enrolled my courses add course dashboard all pages has been imported

correct now we will test these routes so first we have to use the path educated and after that we will add these path

name so just come back and here let's write SL educator so here you can see educator page and if

I again write SL educator so it is displaying blank page

so we have to display the Nate component here like dashboard so just come back and we will open this Pages educator and

go to educator. jss correct so in this one let's write one div and in this div we have to

provide the outlet so first we have to import the outlet so just write import outlet from react router Dom and

within this D we will write cly bres Outlet we have to use this Outlet tag

and close this tag here now save the changes and come back here now you can see it still it is

blank so we will just come back here and you can see here we have added these nested routes so from this one we will

remove this slash that's it after removing it if I come back here you can see we have the educator page and in

this one we have this dashboard now if I change this path if I write my

courses so here you can see educat page and in this one we have this my courses page if I come back and let's see the

other routes so here we have the add course and a student enrolled so just copy this

one and here we will write SL educator SL add course so here you can see educator page then we have the add

course so all these routes are perfectly working after setting up the route next we have to create the component and we

will Design the component so first we will start with the navigation bar so let's see our figma design file for the

navigation bar design as you can see in this figma design this is the navigation bar and in

this navigation bar we have the logo some links and one button so we will create this navigation bar for the

homepage and in other page let's go to course list page so in this page you can see the background color of this

navigation bar is white and all the contents are same as the homepage and this course Details page

but the background color is white that's it now if I go to other page like this one so this is for the educator

dashboard page where educator can add a new course so in this one you can see the navigation bar looks different so we

will create the different navigation bar for educators so let's start creating the

navigation bar for the homepage for a student so just come back and we will

open this component folder then go to a student then open navb bar. jsx so here we have added this text we

will remove this text from here and we have this div and in this one first we have to add the logo so we will add the

image tag and in this one we have to provide the logo so we will use the logo from assets so if I open this

Assets in in this one we have the assets. JS file and if I open this assets. JS in this one we have imported

all the images using this file path and import a statement and we have provided these

name for import and after that we have exported all the images in this assets object so we can

simply use this assets object and use any image like logo search icon any other image also using this assets

object and after that you can see we have added some other data so here we have the dummy educated data B that we

will display on our website this is an object after that we have this dummy testimonial data so it

is an aray and in this aray we have multiple object that represent individual testimonial data after that

we have the dummy dashboard data then we have this dummy a student enrolled data then we have dummy

courses so we are going to use these dummy data and we will display these data on our

website so right now we are going to use the logo from assets so simply add curly press say then write assets selected

from here so you can see this assets has been imported from assets folder assets file and from this one we will find the

image so from this assets object we will use the logo that's it after that we have to add the alt

property so in this one we will add logo and here we have to provide the classes so we will add the class name property

and we will provide the width and after that we will change the width for different screen size so just

add LG and width 32 after that we will add cursor pointer so in this navigation bar we

have added the image that is the logo after that we have to add different content in desktop view and mobile view

for that we will create two div this is the first div just duplicate it this is for the mobile view so in this one we

are going to add the content that will be displayed on laptop view or desktop view so here in this one we will add the

class name hidden so by default it will be hidden on mobile phones and here we'll add the

screen size medium and above screen so for this one we will add Flex so again it will be visual on medium and larger

screen after that we will add item Center then we will provide the Gap and here we will

add text color so the text color will be gray 500 in the St we have to add some links

so we will add two links so just add a div and within this div we will add two links so here we are going to use button

tag and in this one we will add the button text called become

educator and after that we will use this line and after that we are going to use the link tag so here let's write

link we we will use the link tag from react router Dom so you can

see this link has been imported from react router Dom package now in this

link we can add two property so first let me close this link tag and here we will add the two property and in this

one we will provide the path so simply add SL my

enrollments and here we will use this link and closing link tag like this so within

this link tag we have to add the link text so the link text will be my enrollments like

this so in this navigation bar we have added the logo then we have have added the div for desktop screen and this is

the another div for Mobile screen in this one we have added one div that contains two links we have used one

button tag and one link tag and after this link and button we have to display

one button that will be create account so here let's

add button tag and we will add the button text create account now in this button we will add

classes so just add the class name property and here we will provide the Tailwind classes so let's write

background blue 600 then text white padding X padding Y and rounded full so that the corners will be

round after that here we have the first div so in this one also we will add some classes so here I'm going to add the

class name and in this one we will provide Flex item Center justify between padding X and we will add different

padding X for different screen size then we have added the Border bottom then border color and padding

from y AIS after that we have to add the background color as you can see in the figma design we

have different background color in the navigation bar when we move to course list page and for other page we have

this background color in the navigation bar to do that here before this return a statement

we will add some space and here we will check so just add con is

course list page equal to location

dot path name dot includes so if the URL path name includes this text that is course list

it means we are on the course list page so this variable will be true so whenever it is true we have to add the

background color white and if it is false we have to add another background color so we are going to use the turn

operator so here we have this class name so we have to wrap all these classes in curly

bres to use the template literal here we will add the back tick so remove this single quat and replace it with

backtick and after that here we will use dollar sign curly bres and here we are going to use this

is course list page variable we will check if it is true then what will happen we have to display

the white color in the background so we will add background white and then we will add the colum and it means when it

is false then we will add another color so here we are going to use background

Canan 100/70 now save the changes and next we have to mount this Navar component on

app.jsx file so we will open this app.jsx and in this Navar component and this Navar component will be displayed

on all pages so we will mount it before this routes so before this routes here we will

Mount Navar so we will select this Navar from this components student nabar so you can

see this nabar has been imported from components student naar now this now just close this tag

and here we have this div so in this one also we will add some classes so here let's

provide text default mean height green and background white for entire application after adding it let's come

back and open our website so here you can see we have this navigation bar correct so right now we have added this

navigation bar here in this return in this D so this navigation bar will be displayed on all

the pages including educator dashboard so we have to provide different navigation bar for educator so

we have to hide this one and when we will on the educator page we will hide it so for that here we will

write cons is Educator route so when we are on the educator

route then we have to hide it so here we are using use match from from react router

Dom so here you can see use match has been imported from react router Dom and in this one we have to provide the

path this one so if the path matches SL educator slash anything else right so in that

case this is Educator will be true and whenever this e educated route is true then we have to hide this navigation bar

so here let's write curly presses and in this one we will write not of is Educator

route so whenever it is false then only we have to display the navigation bar so here we will write and operator and we

will move this Navar here that's it save the changes and still you will see the navigation bar on

the homepage so it is hidden it is hidden because we are on the educated path and

if I go to homepage here we have this navigation bar and if I go to any other page that includes the educator in the

URL so you can see when we go to/ educator SL add course then n then the na bar is hidden and if I remove this

path this navigation bar is visible on a student page so this is the home page for a student now we will Design This

navigation bar so just come back we will come back to the nav bar. jsx file and in this one you can see

here we have added the class name for this div and after that we have this div that includes one button and one link so

in this one also we will add the class name and here we will provide the tnd classes so here I'm going to provide

Flex item Center Gap five save the changes just come back to the web

page here we are getting some space in the right side this is because here we have added this another div right so in

this div we will add the class name and we will add medium and above a screen it will be

hidden so it will be hidden on medium and above screen size now you can see we have this navigation bar till this

point so this navigation bar for desktop view is looking nice now we will add the navigation bar for mobile view so just

come back and for now let me reduce the screen size so you can see if I reduce the screen size it is hidden on the

small screen so we have to add the navigation bar for smaller screen so just come back and here

this is for the smaller screen so here let me add one comment for phone screens and here in this

div let's write some classes so we will write Flex item Center Gap two then Gap five and text Gray

500 after that here also we will add two links so we will add the div and in this div

first we will add the button so we will copy this one only paste it here so in this button we have

added we come educated and then we have this link tag that is my enrollments right and after that here we will add

one button and in this button we will add one image so we will add the image

tag then we will use the cly addes assets dot user

icon and after adding it we will come back to the web page now you can see here we have this links become educator

my enrollments and then we have this user icon so instead of button we are displaying one user icon for the smaller

screens like this after that we have to add the Coler authentication on our web page and using

the Coler we will add the functionality in this create account button so that user can click on this button to create

an account and after creating the account we will display the users profile picture here and we will replace

these links according to the US users login estate if the user is logged in then we will display different links and

if the user is not logged in then we will display different links here for that first we have to create the account

on cler to create the user authentication in our project just click on the link given in the description

that will directly take you to this page that is color.com so this clerk is a user

authentication and user manage platform using clerk we can easily integrate the user signin sign up feature in our

website and we can manage the users profile so to integrate the clerk authentication first we have to create

an account on this website I'll click on this link sign in I already have an account so I'll

choose this Google signin then you will find this screen here you have to select create

application and in this one we will write our application name so let's write great a stack

LMS and here we will choose the email signup option and Google sign up option then click on the create application

button after that we have to choose this react and here we have the steps to

integrate the color authentication in our project so the first step is to create a react application using V and

after that you can see the next step so the next step is to install cler so here we have the command that we will execute

in the terminal so just copy this one and and come back to the vs code editor and we will open the

terminal first we have to stop the project using control C press Y and here we will paste this command that will

install the color package after executing this command if I come back to the side word and

open package.json file so in this one you can see we have the dependencies object and in this one we have this

Coler react so the Coler has been installed after that we have to do some setup so you can see the next step we

have to use this color API keys so just copy this key from here and we have to add it in our environment

variable so just come back and here in this client folder we will create a new file with the name

EnV where we will store all the environment variables so in this one we will paste this color publishable

key and we have to start our project so in this terminal we will write npm run Dev so it will start our

project after adding it just come back to the Color website again again and you can see the next step so

we have to import the color publishable key in main. TSX or jsx file so just copy this statement from

here import your publishable key just copy this one and come back to the vs code and we will open main. jsx file and

in this one here we will write this a statement that will import the

publishable key from environment variable right and here we have added it before this create

root correct next we have to add the color provider component for that first we have to import it so here let's write

import curly Braes color provider and we will import it

from single code at Coler SL Coler SL color react we can remove this line from here a strict mode is not

required so we have added this import statement color provider now we will wrap these components using the color

provider so after this browser router here we will write color provider like

this now let's move this app context within this color provider so now you can see first we have the browser router

in this browser router we have the color provider and closing it here then we have the app context provider then we

have the app in this color provider we have to provide our publishable key so we will add the publishable key and

provide this key from here so write this cly bres and provide publishable

key after that in this one we will add one more thing that is after sign out URL we have added this after sign out

URL and in this one we have to provide the path that is SL like this now we have the support of

color authentication in our project now we can simply use the color reusable component to create our login

or signup component so just come back to the navigation bar so in this student we

have this na. jsx so in this one we are going to use

the color component to create the login or sign up form so first we have to import it so here we will write the

import statement in this na. jsx file we will import use

Coler from Coler slash color Crea after that we will import user

button then we will import use user

from color react now we have to add the functionality on the button that will

open the login form for that here we will write const we will get the open sign

in from use cler we are going to use this open

signin when we click on the button so it will open a sign up form after that we have to get the user

from this use user so here let's add const user equal to use

user like this now you can see here we have added this

button create account right so on this button we have to add the onclick property so here we will write on click

and in this on click we will provide the add function and here we will use this open sign

in that's it save the changes and come back to the web page if I click on this create account

button it is opening this login form you can see sign in to Great stack LMS so we can sign in using this Google account or

we can use the email address and if you are new on this website you can create an account using this link we will click

on this one sign up so it will open this sign up form where we can sign up using the Google account or we can use the

email ID and password to create an account but before creating any account we'll just come back to the vs

code and here you can see we have added this button so this is the create account button so whenever we will sign

in or sign up then we have to hide this button and instead of this button we will display the users profile icon for

that here we will wrap this one in a curly Braes and here in this curly bres we

will use this user it means whenever the user is available if the user is already signed up in that case we will display a

user button component so just add user button select this

one and we will add colon so whenever the user is available it means the user has already signed up then we will

display this user button and else we will display this create account button like

this so this is the user button from Coler if I scroll up you can see we have already imported this user button from

cler act right after adding this just come back to the web page and click on this create account button then click on

sign up and I will use this continue with Google option I'll choose this email

ID then click on continue now you can see we are successfully logged in on this website

and here we have the profile icon and instead of this create button we are displaying the profile

icon and if I click on this one here we have the option to manage the account and we have the option to sign out from

this website if I click on this manage account it will open this window where

we can update the profile and we can add another email ID and if I click on this link we can

update the profile image we can click on this button to upload any

image now let's close it we will replace these links according to the user estate if the user is logged

in then we will display different links and if the user is not logged in then we will display different links so just

come back and here you can see we have added become educator and my enrollments

so let's wrap it inside a curly bres like this in this curly bres we have added

this button and this link correct and here we will use user then we will write and operator

then we will use this fragment and close it here after this closing link tag so you

can see whenever the user is logged in then only it will display this become educator and my enrollments

link and if the user is not logged in then we will hide it right so after adding it if I come

back to the web page here we have the option to become educator and go to my enrollments and if I log

out here we have this create account button only because first we have to create account then only we can go to my

enrollments or we can become a educator and if I click on this one it will open this sign in or sign up form

now let's add the same thing for the smaller screen so just come back to the vs code

and here we have this code for phone screen so in this one also you can see we have

this link called my enrollments and this become educator so we will copy the same thing

just copy this Curly bres from here and and we will paste it here within this

div and in this div we have missed the classes so just add the class name

property and here we have to provide Flex item Center Gap then gap for different screen then we'll add the

text extra small and here we are using user if the user is logged in then only will display

this become educator and my enrollments and after that here we have to display

the user icon so if the user is logged out then only we will display this user icon and if the user is already logged

in then we will display the user's profile image from cler so here let's write the curly bres and here we will

write a user and if the user is available then what will happen we have to provide the user

button like this and colon and if the user is not available then we will provide this

button now it is clear now save the changes and come back to the web page so if I change the screen size so

here you can see we have this user icon in a smaller screen and if I click here so it should open the login form so

just come back and here in this button we have to add the onclick property so just

add on click and in this one we will add the Aro

function and in this addo function we will call op signin function that's it now again come back and click on this

user icon so it is opening this signin form and let me sign in using the Google account so now after sign in you can see

we have these links become educator my enrollments and then we have the profile image so now we have completed the

navigation bar for our website after creating this navigation bar let's come back to the figma

design and on this homepage you can see we have to create this section where we will display the welcome message a small

text and one search bar for that let's come back to the vs code editor here we will open this

sidebar and in this one we will go to components a student and open hero. jsx file

now in this one we have to add the welcome text that will be displayed on the hero section so you can see in this

figma design we have this text then a small description and one search bar so just come

back and here let me remove this text

and here we will write H1 tag and we will add the text this

one Empower your future with the courses designed to fit your choice after that we have to

add this text in a span tag so here we will add the as span and uh close it here at this point

and after this asan tag we have to add one image so we will add the image tag and in this SRC we will add the curly

presses select this assets then write dot sketch and here we will add the alt

property a sketch after that we have to add some classes so just add the class name and

in this one we will medium block then hidden so it will be hidden

for small screen and for medium and above screen it will be block then we'll add absolute then bottom minus 7 and

right zero so we have added the position for this a sketch image after that we have

added the asan tag so in this asan tag we will add the classes so here let's write the class

name for this text we have to change the color so here we will use text blue 600 after that here we have the H1 tag

so in this one we will add the class name and here we have to add the classes so for medium and above screen

we will add text home heading large then text home heading small then relative font bold text Gray then maximum width 3

XEL and margin X Auto after that in this first div we will add the class name and here we will

provide the classes like Flex Flex column item Center justify Center then width full for medium screen

we will add the padding top and for smaller screen we will add padding top 20 then padding

X then padding x0 for different size a space y text Center then background gradient so we will add this color in

the background gradient color then we have added the title and in this title we have added the a sketch

image after that we have to add add the a small description so we will use the P tag and in this one we will add this

description text now in this one we will add the class name and here we will

write medium block and hidden so it will be hidden and for medium and above screen it will be displayed then we have

added text Gray and maximum width to XEL and margin X Auto after that we will add another text that will be displayed on

Mobile screen so here we will add this a small description text and here we will add

the class name in this class name we will write medium hidden so for medium and our screen it will be hidden then we

have added text color then maximum width and margin X auto save the changes and next we have to mount this hero. jsx on

the homepage so let's open sidebar and from here we will go to Pages student home.

jsx and in this one you can see we have added the text home so just remove it and here we will Mount our hero

component click here so you can see hero component has been imported from component folder a student folder then

hero close this tag after that here we have this div so in this div we will add some classes so

just add the class name and we will provide Flex Flex column item Center space y then text Center save the

changes and come back to the web page so here you can see we have this title text then small

description and here we have the sketch image so right now this text is looking very small so let me colnect it we will

come back to the vs code and let's come back to the hero. jsx

file in this one you can see we have used the custom class name home heading large and home heading a small right but

we have not declared these classes so let me just come back in the left side bar and we will open this telin

config.js and first we have to create our custom classes in this theme so here in this theme extend

object we have this extend object so in this one we will add font size where we will Define the custom font size so

let's add font size colum then add the the object in this

one we will Define multiple font size so first let's add course details heading a

small and here we will add the column then we will provide 26 pixel

comma 36 pixel now duplicate it and here we will add course details heading

large here we will add the value 36 pixel and 44

pixel we have to add a comma here so now we will duplicate this one and in this one we will add the font

size name that is home heading a small and here we'll add the font size 28 pixel and 34 Pixel duplicate

it here we will add home heading large we will add the font size 48 pixel and 56

pixel and we will add one more custom font size that is default and in this

one let's add 15 pixel and 21 pixel save the changes and come back to the web page now you can see this font

size is looking perfect for this screen correct and if I change the screen size

you can see on a smaller screen it is looking perfect and we have to remove the sketch image from a

smaller screen and then we have the a small description in a smaller screen and here we have the large

description now it is looking beautiful now just come back and we will

open this hero. jsx in this one you can see we have added edit this paragraph text after this paragraph text we have

to add one search bar so we will create a search bar in this search bar component so just open

search bar. jsx file and in this one we have added this text so remove this text and here we will add a form

tag like this now in this form tag we have to add one image and in this image we will

add assets dot search icon and in this alt property we will

add search icon and after that we have to add some classes so here we will add the class

name and in this one we will add width for the medium and above a screen we will add

MD width Auto and after that we will add width 10 for Mobile screen then we will add the

padding from x-axis after that we have to add the input field in this form so we will add

the input type will be text and in the one we will add the placeholder so in this placeholder we will add the text

called search for courses after that we have to add the class name property and in this one we

have to provide some classes like width it will be full height full then outline none text Gray 500/80

after that we have to add one button so we will add the button tag and in this button type we will write

submit then we will add the button text that is search then in this button we will add

the class name and in this one we will provide background blue rounded text white and padding X

then padding x 7 then we will add the padding y for different screen and margin

X1 after adding it here we have this form tag and before that we have this div so we will remove this div we will

simply return the form tag in this component now in this form tag also we will add one class name and let's write

maximum width that is Excel and after that we will add the width full and for different screen we will add

different height 14 and 12 then we will add the flex item center background white border border color and

rounded after adding it we have to use this form component in this home component so just

open this home. jsx and after this P tag we will Mount our search bar so here let's

add search bar so you can see this search bar has been imported and let's close this tag now

just come back and here you can see we have this search bar in this one we have the search icon and search button

correct now if I enter anything in this input field that is the search boox input

field and click on the button it should open the course list page and it should display the courses related to the

search keyword to create that functionality we will come back to the vs code and we will open search bar. jsx

file and in this file before this return statement we will write

const navigate equal to use navigate

hook so we are using this use navigate from react router Dom and now we can use this navigate

function to navigate the users on other page after that we have to add some State variable where we will store the

the input field data so here just add const and the state variable name is

input and the seter function name is set input equal to use a

state use state has been imported from react now here we will initialize this state variable so first we will add the

data and if the data is available then we will add data else we will initialize it with empty

string after that here we have to add form Handler function so let's add one function const

the function name is on search Handler equal to create this Aro

function here we will get the form event and here we will add e do prevent default so whenever we will submit this

form so it will prevent the website from reloading after that we have to navigate the users on

course list page so we will add navigate and in this one we have to provide the path so we will provide the path slash

course list and in this path we will add the input field data so we will add plus and

provide this input like this next we have to link this on submit Handler function with this form tag so we will

add on submit and provide this on submit Handler function in this form tag after

that we have to link this input field with this input state so here in this input

field we will add on change here we will add the arrow

function with this event in the parameter so we have created this Arrow function

and it will call this set input Setter function and here we will set the value using the event do Target dot

value after that we have to add the value property also so just add the value and here we will add input State

that's it so we have added the on change and provided this Setter functions set input so whenever we will add any data

in the input field that will be stored in this input State and when we submit the form then this input keyword will be

added in this path and user will be redirected to the course list page with this input text so just come

back and open the website here we have some issues so just check it we will open the console

tab here you can see we have some error in this search bar. GSX data is not defined right so just come

back and uh here in this search bar we have to get the data from parameter so just add data so if the data is

available in this parameter in this props then we will use this data here and if the data is not available then we

will use empty string to initialize this input State now save the changes and come back to the website again now you

can see we don't have any error and if I type anything in this input field like react and click on this search button so

now you can see we are redirected to this course list page and then we have the/ react so here we have this course

list page correct now on this course list page page we can display the courses

based on this keyword that is react now just come back to the homepage so we have created this

functionality for this search box after that if I open the figma design you can see we have to create

this section that is companies right so to create this just come back to the vs code open open this sidebar and from

here we will open this components a student and open this companies. jsx file right in

this one we have to remove this text so remove this title text and here we will use the text in P tag and here we

will add the text trusted by Learners from and after that we have to add one div

and in this div we will add multiple images so just add the image tag and here we have to add the image so simply

add assets dot then we will add the image name that is Microsoft logo and here we will add

the alt text Microsoft after that here we have to to add the class name so just add the class

name property and we will provide the width 20 and for medium and above a screen size we will add the width 28

that's it now we have to display multiple logo of companies so just duplicate this

line and replace the images so in the second one we will write Walmart logo then we will write

essential logo then we will add Adobe logo and after that we will write P

logo then we will update the alt text also so here we will provide different uh text in the alt property like this

after that here we have this div so in this div we will add some padding from top so we will add the class name and

provide padding top 16 then we have this text in P tag so here we will add the class name and in

this one we have to provide text base text Gray

500 then we have this div that includes all the images so here we will write class name and we will provide Flex Flex

WP item Center justify Center Gap six and for medium and above a screen we will add Gap 16 then for medium and

above screen we will add margin top and then we will add margin top five that's it after adding it we will

Mount this component on home. jsx so just open pages then a student then home. jsx

and in this one you can see we have added this hero component so after this hero component we have to

add company's component so you can see this company's component has been imported from component folder a student

folder and companies now just close this tag and save the changes now just come back to the web

page now you can see here we have all the company logo it looks nice after that if I come back to the

figma design you can see we have to create our next section that is the course section right so to create this

course section first we have to create a course card and in the course section we will display the four course card right

so to create this section we will come back to the vs code we will open

this course section component and in this one we have added added this title in H1 so just remove it and here we have

to add a title in h2 tag so let's write S2 and provide this text after that we have to add some

description in P tag so we will add the P tag and provide this small description right next we have to add

the course components that will be individual course card then we will display one button so here

we will add the space for course card then we will add the button so here we will add the link tag

we will use this link from react router Dom and just add this closing link tag and

we will add the link text that is so all course says and in this one we have to add the two property so just add

path that is/ course list so when we click on this link it will display all courses and it will red us to the course

list page and after that we have to scroll the web page to the top so here we will

add the on click property and in this one we will provide the arrow function and here we will add

a scroll to property and in this one just provide zero and zero so it will scroll the we

page to the top correct now in this one we have to add some classes also so here we will add the class name property and

in this one we will add text Gray 500 that will be the text color then border border color gr

500/30 then padding X padding Y and rounded so we have added the CSS properties for this button now we will

add the CSS properties for this title and description so in this title we have to add the text size so just add the

class name here and provide text 3 XEL font medium and text Gray 800 after that we will add the class name in this

description so here we will provide text a small so the default size will be text a small and then we'll add the medium

for medium and above a screen we have to add the text base then we will add the text color and

margin from the top now we will add the CSS properties in this div so in this div we will add

the class name and here we will provide the padding from y AIS then padding X8 and for medium and above screen size we

will add padding x40 like this save the changes and come back to the web page but before that we have to mount

this courses section so just open home. jsx file and after this companies we will

add courses section component so this courses section has been imported now if I open the homepage

here we have this title learn from the best then we have the description and then we have this button so all courses

and if I click on this button it will open this course list page and if I come back to the homepage here we have this

text so below this description we have to display the course list right so just come back

and we will come to this file that is course card. jsx right and in this one we will create

the course card to create this course card let me just come back to the figma design

again and in this design you can see we have four courses in this course section so in this first course you can

see we have the course thumbnail then we have the course title then educator name then we have the

ratings and price so we have to create this card so to create this one we need the course data

also so if I come back to the vs code and go to this assets and open assets. JS file so in this file you can see we

have already added the dummy course data so let me scroll up here here you can see we have one array with

the name dummy courses and in this one we have multiple object and each object is representing a single course so in

this course we have the course ID course title then we have course description after that we have the course

price then we have is published data then discount so we can also add discount on the course after that we

have the course content so this course content is also an aray and in this aray we have multiple object so for this

course content we have this chapter ID then chapter order chapter title and chapter content and in this chapter

content you can see we have added two lectures so we have the lecture ID and this is the second lecture of the first

chapter so in the first chapter we have added two lecture with the lecture ID lecture one and lecture

two right so right now we will focus on this one this dummy course data where we have the course price course title

course ID discount and if I scroll down here we we have this educator details then we have the enrolled

students and we have this course rating so in this first course I have added only one rating where user has given

five star right so we are going to use these data to create our course card now let me just come back to the course card

and here in this one we will get the course detail in this props so here just add

course so after adding it here we have added this title in H1 so I'm going to remove this one and in this one first we

need the course thumbnail so we are using the image tag and in this image SRC we will add

the image so just add curly say and we will get the image from this props that is

course Dot course thumbnail after that in this one we have

to add the course details like course title then educator name then we will display the ratings so here I'm going to

add a div and in this div we will add the course title in S3

tag and to get the course title we will use curly bres course Dot and the property name that is

course title I'm using this property name from this assets you can see in this asset file we have the course data

and here we have the course title right here you can see we have the course thumbnail

also now just come back here after this course title we will add the instructor name or educator name so we will add it

in the P tag so let me just copy this paste it here and here I'm going to add the property that is educator.

name so it will display the educator name after that we have to display the course rating where we will display the

average rating then we will display the start icons and then we will display total number of ratings so we are going

to group all these things in a div like this and in this div we have to display the average rating that we will display

in P tag suppose we have the average rating of 4.5 I'm adding it manually we will add

the dynamic value here after that we have to display the star ratings so here we will add a div

and in this div we will add the curly presses and here we will add one aray we will

add spread operator aray and provide five now on this one we will use the map

method and in this map method we will add the parameters and create create the arrow

function so in this parameter let's addcore comma I for the index and here we will return one image

tag so write IMG tag in this image tag we will add the key

property so in this key we will add the index I let me close this tag like this in this one we will add the SRC so

let's add SRC

CES I'll move this image tag within this bracket like this now in this SRC for now I'll add the

same icon so let's add assets dot star so it will add the a star icon

for five times after that we will add the alt property

and next we have to add the total number of ratings so we will add it here after this div so we will add a B tag and in

this one we have to add the total number of ratings so let me add any fixed value right now so I'll add

22 after this course rating we have to display the course price so after closing of this div here we will display

the course price in P tag so we have already added the course price in the assets file in the dummy data so we are

going to use that data so we will add CES then we will

use course dot course price but in the assets dummy data you will find we have

added the discount also so we are going to display the final price here after applying the discount so here we will

reduce the discount amount so we have added the discount like this one you can see we have this dummy data and uh in

this dummy data you can see we have this discount that is the 20 it means we have added 20% discount so we are going to

reduce that 20% value so we will add course dot

discount multiplied by course price divide by 100 so we will get the final

price and we are going to display the course price up to two decimal point so we will wrap this one in this

bracket and here we will add dot to fixed and provide the value

two like this and before this course we have to display the currency also so we will get the currency from involement

variable so that we can update the currency at one point and it will update the currency on entire application so to

get the currency from environment variable here we will open EnV

file and here we will declare a new envirment variable that is currency so we will declare it as

Vore currency equal to and here let's add dollar

sign now we will store this currency in a variable in our context file so you can see here

we have app context do jsx file so in this one we are going to declare a very table so in this provider

function let's add a space and here I'll add con currency equal

to import do meta do EnV and Dot we will provide the envirment with variable name that

is V currency now we have this currency variable here to access this currency

variable in entire application we have to pass it through this value object so in this value object we will just add

this currency now we will get this currency in our course card component so where it

is let me open it this one and here we have to get get the currency from our context

so here before this return statement let's

add const cly bres

currency and uh we will get it from Context file so we will use this use context hook so this use context has

been imported now in this one we have to provide our context that is app context so this app context has

been imported now we have this currency so we can use this currency here before this price so here let's add curly

Braes and provide this currency variable that's it save the changes so in this course card you

can see we have added the course thumbnail then course title educator name and then we have

added the rating and this rating is a fixed value this is not Dynamics so we will update

it later and right now here we are displaying the actual price of this course next we are going to display this

course card in the course section so this is the courses section do jsx file in this one we have added these title

description and this button so before this link that is a button we will display the four course card so

first we have to get all courses data from our asset file so again we will open this app context. jsx and in this

one we will get all courses data in a state variable so in this one here we will

create a state variable so just add

const and the variable name is all courses and we will add the setter function set all

courses equal to and we will initialize it with empty aray so we have added one empty aray for

this all courses now whenever we will run this application we have to store the course data from our assets file in

this all courses state for that we will create a function so here only we will create a function let me add the comment

first so we will add the comment pitch all courses and here let's add the function

const pitch all coures is it will be a synchronous function and we will create the Aro function now

in this one we have to store the data from our assets file in this estate so we will use this Setter

function and in this Setter function simply add dummy courses just click on this

suggestion so this dummy courses has been imported from this assets file right

so now we have added the course data in this all courses next we have to pass this all courses through this value

object like this so that we can access it in any other component now let's come back to the courses section and here we

have to get all courses that we have just created in the context file so before this return a

statement let's add const and we will provide this all

courses and we will get it from use context and provide the app

context correct now we have this all courses data that we will display here before this link so before this link we

will add a div and in this D we will add the cly addes and provide all courses and on

this one we will add the slice method here we will add 0a 4 so we will display only four courses so this will

be one array so we can use the map method so we will add the map and in this map we have to add one Aro