Build a Full Stack E-Learning App | NextJS, Strapi, Typescript, MUI - 1.Project Setup

hello to the curious and welcome to this new tutorial Series where we build an e-learning platform with next js13 mui strappy as a headless CMS server and much much more now we're going to cover quite a bit so what I've done is I've presented the information about everything we're going to go over for you so stay tuned for that that's coming up next but before we jump into that make sure to like And subscribe for all the videos that are going to follow for this series so you keep up to date and know exactly when they're about to drop hit the Bell notification so that you get told basically when it comes out so let's get started and build this e-learning platform [Music] shoot so as we're building an e-learning app we probably should know what we're actually building so let's go check that out now the obvious is we're building an e-learning platform similar to Treehouse udemy skillshare Etc we have video courses that the user can go through bit by bit have progress and eventually complete it and uh that's that's essentially the core of it so video courses uh we're obviously going to have the user be able to sign up uh be able to authenticate only be able to access parts of the site where they're authenticated which also means that they're going to need to use a profile page building and one of the biggest parts of this is actually using strappy as a headless CMS to take all the information from its back end in very small API endpoints and then we're going to use that so for example courses are probably going to have their own API users are probably going to have their own API endpoints and then we're just going to access those and get all the information Nation we need for the user or the courses Etc then we're also going to be using cloudinary to host our videos and images so video is obviously going to be probably very large and we want to be able to have kind of a CDN setup so wherever you are in the world you're going to have the fastest possible access to this video very importantly we're also going to be able to track progress of the users so as users go through video to video it should know that oh yeah they completed this video they've watched this video and maybe they've even completed the entire section or course so that'll be quite a good one to do and much much more there'll be plenty that we're going to cover and much much more there's plenty that we're going to be building probably too much to listen here but Caesar some of the core ones but what technologies are we actually using Sigma is going to be a really important one that's where we're going to host our designs that's what we're going to check to see if our sizings are correct we're going to double check make sure that the icons we're using and everything essentially looks about right next JS obviously that is going to be our front-end framework built on react we're going to be using SAS and CSS modules a lot of which is already built into next.js and material UI so I think for this all we're really going to need to do is install SAS I think CSS modules already comes uh kind of built in with next.js typescript goes without saying bismuth so you might not have heard of bismuth if you haven't watched the last few videos the Bismuth is essentially our own template for next.js typescript and CSS or SAS projects it has a lot built in so start a template it's to enable us to get going really fast so that'll be a part of what we're doing as well strappy obviously that's a The Headless CMS that we're going to be using so essentially we get to enjoy the fact that we get to access the endpoints for courses and users and things like that but also have the GUI of the CMS so the graphical user interface of strappy to be able to go in and do all the things and create the content to have the similar to Wordpress you're able to drag and drop and do things it's just going to be really good storybook obviously to work on components in isolation now this is going to be a multi-video format so that means that we're going to make sure that we break down all these tasks and all these features over a handful of videos um just to make viewing a bit more digestible rather than having a large two three seven eight hour video now what will we actually learn so we're going to be building a full stack application with nexjs as the front end and strappy as the back end and cloudinary and versel on the hosting and server side so obviously we're using nexjs as our front-end framework so you're going to be learning a lot about nextges 13 particularly the app Rooster's side of things so if you're interested in that that's all in here uh we're going to be using material UI which is used by some of the biggest companies in the world uh off the top of my head I believe Spotify Amazon Netflix um I mean you name them NASA they all use it um and then paired with that we're going to be using CSS modules as well to scope our styling to our components we're going to be working with apis obviously because strappy is going to provide us with lots of different content types lots of different endpoints so this project is going to be a really good place to learn apis and how we get the data and use it if you want to learn how a hedler strappy actually works this is a really good tutorial for you so as we're using next js13 we're going to be using reactating so we're going to need to learn how to use modern react practices and do them well so that'll all be in this tutorial as well and we'll also be looking at employing some clever typescript strategies as we go along as we build our fetch helper commands and all kinds of things along the way and as we're using react 18 and next JS um we're going to be using functional programming you may not have a choice if you're using react to get with functional programming but we'll be covering that as well and as we're using strappy as our endpoint and versel and cloudnary this is going to be a full stack app so there's a whole bunch to learn we're going to start at the design stage we're going to go through the front end and then we're going to go right to the back end uh it's integration we're going to work on the data layer and finally deployment and we're going to have a continuous deployment setup so this is a full stack app this is going to be something that you can put forward as a full stack application you know if it is a portfolio or just something you want to learn and learn how you know full stack app actually works and much much more there's plenty to learn on this project I'm sure but the only way to actually learn that is to get going so let's get set up so just before we jump into the code I want to show you the designs very quickly so you can see here this is our light mode version of the website everything above this line I would say is more High Fidelity which means it's of higher quality in design terms um this is our toggle for our light and dark mode so obviously this is in light mode we'll show it in dark mode uh it'll be fairly different um this is our header this is our alert component and this is our hero with a call to action to start a free trial with our image we've got our search bar component here so we'll be able to search through courses um and we'll also be able to filter them by difficulty rating and topic so you know if you want to look for JavaScript courses or if you want to look for CSS courses um you'll be able to do so through something like this so over here we've got a very basic wireframe of our courses so these will all be course tiles we're going to have individual courses in here so our you know JavaScript Mastery course or a CSS courses will go here the designs for them will be done later this is kind of to understand the shape of it and you can see here this is where our foot all go but we've not exactly defined it it's just a low Fidelity design to say that's where it'll be text will generally be centerised here but we'll show that later on in the series but yeah generally this is the layout here is the color scheme so we have our colors here so generally these are the colors that we'll be using of obviously success error warning and this will be our body color our primary colors and some of our accent colors this is a very basic design and it will evolve as we go through the series but for now I think it gives you an idea of what we're building right let's jump into the code so the first thing you want to do is make sure you've created a git repository so if you've got a GitHub account gitlab bit bucket whatever just make sure you go and create yourself a repository if you're in GitHub just go here click new repository and create yourself one call it whatever you want and then just make sure to have this handy git remote ad origin so we want the origin really this is really the only line that you're really going to need uh now at this point you could do two things you could go to bismuth which is our starter kit I'll leave the link for it in the description and you can essentially just clone this down and then change the uh which is the origin here to whatever your repository here is and then you're zoom and then you can just carry on with the tutorial but if you want to start from scratch I'll show you how to do that as well so if you don't want to use bismuth I'll show you how to quickly set it up now and we can get going with a project so let's do that now well just for clarity whichever you use your lend up at the same point except this has a nicer starting page so the first thing you need to do is make sure you are in your sites folder and then we want to create our e-learning app I am going to call mine curious courses so that'll be the name of my project and make sure to add the typescript flag here so that you put it into typescript mode so let's click and uh yes so like yes lint uh no Tailwind CSS on this project uh no we're going to be using the app router now we don't need to customize it we're happy with the default and we'll let that install and then we just CD into curious courses we'll also want to make sure we're installing and we'll also want to make sure that we're installing mui so go in here install mui material emotion react and emotion style these are the style engines for mui which allow it to work so we'll install that and as we are using mui we need to make sure that we're installing SAS as well so we'll do that finally we want to make sure that we have install strappy so we'll install it globally first so if you go here npm install strappy and you can see This Global modifier here which is essentially meaning that we can use strappy now anywhere in any project and then what we want to do is we want to actually create our strappy server and we'll just call it strappy within the project itself so we'll go to MPX create strappy app which is something we've just installed I'll call the folder strappy and I'll put it as quick start so we can get going quickly yes okay to proceed brilliant and you can see that we're into strappy now so we'll put in curious bite as the name put in an email address brilliant and when you're happy with that sign up and one of the first things we want to do is actually just go to the settings here and just grab an API token so we'll create a new API token and we'll just pull it call it curious courses uh unlimited you can change it to whatever you want we'll say full access so we'll save that for now uh let's go grab this API token so now that we've done that let's open up vs code and see our project here now so we've got our app directory we have strappy in here but what we want to do is just create an EMV file so we want to create an EMV file with this information this should remain the same on any of your projects as a first starting point and we'll just add our API key that we just created so go back here grab that and just paste that in and that should give us a permission to use now the strappy API so that's all connected so let's run this and see what this looks like so we need to make sure that we're using npm run Dev let's go check it out there we go so that is the project right now and if you're using bismuth you'll essentially get to the same stage but you'll have the Bismuth starting screen um which in my opinion is cooler so there's both ways to get started let's go back and just quickly tidy this up so we'll go to page and just within here go ahead and delete all of that save then we'll refresh that okay so that is the project right now so let's go back to strappy so we've got that running on localhost Elite and we're just going to create a quick type of content so go to content type Builder here and make this a little bigger so it's easy to read so go to create new collection type and we'll call it courses and we will click continue that singular version continue uh we'll have a very simple text here and we'll call it title click finish and what else can we add We'll add a description as well so we'll go description so we're adding a title and description and the amazing thing about strap is you can essentially build out your API really really quickly so this will be of type string no doubt and you're already adding uh basically data for your endpoints we have title and description um and then we can go to content manager here oh after we save it and then we can go to content manager here so we can go to and then once we're here click create new entry so we'll call it a Master Class in full stack app development we'll put next.js full stack app development make sure we add an R we go and create four full stack projects in next.js of varying sizes and Technologies let's just put that in as an example we've got the N so that's one um let's go and create another one let's create a new entry we'll say Advanced JavaScript and we'll say this is an advanced JavaScript plus that utilizes the oh well that demonstrates the latest that uses the latest standards let's just do that as a quick description save that so now we've got two courses so we've got this master class in xjs full stack app development and advanced JavaScript so save that and that's quickly done so we now have two bits of content and what we'll do is we'll create a simple fetch function just to show that this works so we'll go go back to the project uh we'll go here I'm just under home we'll create a very simple fetch function react so we have our course data here we're going to have our fetch query here and we'll see the base URL is strappy so if you remember this strappy API URL then we're asking for courses which we've just created and we're going to store that in data and we're going to set that data with our you state and then we're just going to console log that so we'll create a button here and we'll use mui and we will say fetch query let's make sure we import this grab that fetch courses let's make this an error function right let's go check this out aha right so fun times we need to use the use client abbreviation for now okay let's just add a variant on this to get some styling so variant and we'll put it contained cool let's open the inspect let's go to console so we're currently getting a 403 Forbidden so let's just go to strappy and just make sure we've got permissions for that so what we need to do is make sure we go into users and permissions go to roles um and just change some permissions because essentially we haven't added authentication yet so you'll be one of these public users who has an authenticated so this is the average person who goes to the side and we need to allow them to be able to do these callbacks you'll go to course and just select all for now and then click save and if you go back here refresh and click fetch courses so one thing I realized I forgot to do is actually publish these two types of content so if you go here and click publish and then go back and then publish these two we can now see that these are both published and then when we go to create your next app and click fetch courses we can now see both of our bits of data in here so we've got our metadata when it was created the description and the title and any other information here so a master class and next.js we have advanced JavaScript with the description as well so this is an advanced JavaScript course there we go so now we are connected to strappy we are almost there so that's a big part of the way there we can take it a little bit further so what we want to do is just go back and make sure our layout component is updated so we'll just call this curious courses for now and we'll just leave this as a description of front-end courses for the web dev learner I know we'll leave it like something like that yeah I'm pretty happy with this so happy with that layout component and I believe that is everything let's just go to the readme here we'll just add let's add this so we'll say curious courses and we'll say this is uh knee e learning platform with net shares 13 and strappy cool save that I think we're pretty much safe to go so we'll go here uh we'll close all of these down um we do not want to commit the EnV file so let's go to git ignore .unv as well just make sure yep that's emitted now so let's get add all and then get commit message of initial commit and then we'll we do need to go back and grab this line which essentially uh remote adds the origin so grab that go here add the remote origin hit push set it Upstream so when you're done with that make sure to publish your changes up to GitHub gitlab bitbucket wherever you're holding your changes and that should be the first initial step done we've set up Nexus 13 we've set up the strappy CMS server we've even connected the the two together so now that we're working on some kind of data layer we also have the endpoint courses set up and we've created two courses already and we've installed material UI and we now have the app fetching data from our courses API so we've set up the project now that's amazing we've got nexjs and strappy talking to one another with the courses API we're able to fetch the data successfully and get all of it we understand how the CMS Works a bit with creating content and how quickly we can spin up API endpoints and publish content for them and use them so this is a front-end developers uh best friend essentially to be able to create uh endpoints and apis very very quickly by by themselves so you can start to see how powerful strappy is now in the next video what we're going to be doing is we're going to be looking at authentication so we're going to be looking to use strappy's authentication to log in a user and then work on the authenticated session to maybe change the header to have a user profile page for example and all kinds of other things so that sounds interesting make sure to like And subscribe so you know when the next video drops and all the subsequent videos in the tutorial series for an e-learning platform follow me on the hashton as well to get notified when the next projects are being worked on and when the next video might drop you're probably getting told a lot earlier on than you would just waiting for it to come out on YouTube but otherwise I'll catch you the next one [Music] foreign foreign [Music]

Channel: Curious Byte

Views: 5,261

Keywords: Next JS, Strapi, Strapi tutorial, headless strapi, strapi headless cms, next js tutorial, nextjs 13, nextjs typescript, typescript tutorial, react app tutorial, react app, e-learning app, e-learning tutorial, react e learning app, MUI, material ui, material design, figma, figma designs, react, next js, javascript, frontend, frontend tutorial, front end tutorial, next js 13, next js app

Id: A0wHr51Frxs

Length: 25min 26sec (1526 seconds)

Published: Tue Aug 08 2023