hello coders welcome to another video tutorial this is cway we are going to develop a cloudbased tax manager this is Advanced version of the normal Todo app that you normally see and in this video or tutorial we will use men stack to develop This Cloud base where you learn about you improve your front end skills as well as your back end skills it is beginner friendly so stay tuned and let us get started before we get started don't forget to like And subscribe and also put on the Bell notification so that you get notified whenever I post a new video and also share it to your friends okay you can also support code wve okay so let me give you an overview of what we are going to be doing right okay so so okay so I have this here so a cloud-based tax manager so I'll just log in with my email okay so now we are in and we see our admin dashboard okay so this how it's going to be and we will see the total number of task we see the completed task task in progress as well as the todu okay and we also have uh a graph showing the charts by priorities right those with high priorities and that of medium and low okay also when you come down here you'll be able to see the recent task the recent task as well as recent users okay so if I click on any user like this this popup or this card shows then I see the username and the row as well as the email address okay that's nice right okay so when you look Top here you see that we have user I mean name here with initialize and you can edit your profile here right you can update your profile okay yes you can update your profile as well as you can change your password too so I'm not going to change my password and there's also log out now when you also click on this notification you see that notifications that you have are listed here and I have four notification so if I click on one then I see the details of the notification being here okay good so now you see that it has reduced to three good if I click then just keep reducing like that okay so you see that we have the task t here and it loads beautiful okay so since I am the administrator I can add task so I can click to add task so let us see test task and I'll select the users I want to assign to okay so I'll assign to myself and other two uh okay let me say to do and I'll put the date the date should be today okay okay and it should be uh let me put it as high okay I can also select assets so adsets like images so uh I will just go and select any image I get here okay let me select two and I'll just submit it okay so first the images will be uploaded to Firebase then the task will be added okay so assuming I have a task I can add screenshots of what we are looking for okay so um okay so uh okay so now you see that there's a task here and I can add subtask sub tax can say Okay um um tax manager um let's say YouTube tutorial okay that is a subtask I can add it as um tutoial okay I give a tag and let me make the date today rate and I add it okay so it has been added you see there's a a notification here okay so I can click to see there's a card here I can open the the details okay and when I open the details okay so you see we see we have the priority here the stage or the category and this tax I think does not have assets okay so there's zero assets there's only one um sub subtask okay there also the date was created and the users it has been assigned to as well as um the various sub Tas will show through here and we have also activity line activity line so let's say I have the project so I'll say project started okay so I just have to take started and just post it right and it goes through so project started I can also um say that uh comment um I like okay let's say I like coding I'm just going to put anything just put it through and it comes so you see each one has their icon okay uh let's see B found and I just have to submit it and you see it also has it icon here okay great great job right so be able to see timelines you can post comment you know you can post anything okay great um let me come back okay so now let's view the one with uh I mean images uh okay so you see the images will also show up here okay the images associated with it to show up and the users you know I mean everything then we can also add uh the various activities okay so if we finish a particular subtract task then we I mean we keep updating it here you can add more as you want okay now when I also you see so here we can have this board view right very beautiful and here also if I click on the user I see the card of sa right very beautiful okay so you see now we have the images shows here and the subtracts yeah I mean the sub conts also shows here okay so if I go to list view okay so I see it in a table form like this right and I'll be able to delete it you can delete it like this right as well as edit it okay so it has been deleted you see the one we added has been deleted we can also um edit it so comes here right okay then see as well as we can duplicate task so I can just click on duplicate and the task will be duplicated okay so the task has been duplicated you see that there has a name duplicated right duplicated task okay so when we delete this it is not completely deleted okay so we go to trash and we'll be able to see it there so now we see we have two there here we can restore all or delete all or delete one by one restore one by one right so if I click on uh let's see restore this I can just restore it and it go goes away and if I want to delete or restore all I can also restore all like this and they all goes away and when I go back I should be able to I mean see them here and they're here right you see interesting or very beautiful right okay great and I delete it if I go back I should be able to see it here and I can delete all great and now they go completely okay so if I go back it is not there anymore okay so I can filter it I can click on completed task to see the tasks that are completed I can click here to see the tax in progress and I can click here to see the to-do task okay great so also if since I am the admin I should be able to add users so I can add user so I'll say new user right okay row is let's say designer um let's say new at email.com and when you create a new account by default the uh let's say developer the email becomes the password so that person will have to log in and you see it's here we log in with the email as the email and the password is also the email okay very interesting right great great job okay and uh this thing is fully responsive fully responsive so if I click on responsive if I go to mobile view and I let me select um this okay so you can see it is here everything works as expected great great right great so you see great great and now I can click here go to task and I get a taxk view yes and there's a table table also shows here great great I should be able to add tax from here great as well as do all the necessary stuff like deleting updating everything is so here you can add sub tax from here okay can click here go do the same thing like you know we did so this is what we are going to do okay just is okay let me log in and log out as any user so let me just copy this new user okay and try it log out so I'll login great so great now uh you see I can log in now when I log in as a new user I should not be able to see the team members as well as the trash because I cannot delete no add okay so it's also pretty much simple like this so this is what we are going to be doing now let me give you a high level overview of what we are going to do so now I will just um pull up this thing and we learn because I understood there are some people who take uh this projects to I mean build upon and develop their final year grp projects okay so I'll come here I'll come to this to that I use and just go here okay so let me just open it and we will learn something okay okay so I have a documentation here right about the project so let me make it a little bit big okay so this is a full stack um tax manager doc right so there's an overview telling at about um cloudbased um tax manager which help us to assign tax to team members or users right and also help us to coordinate because uh when one person is doing other part somewhere you know this remote work will be able to know and monitor right because they will keep updating okay good so now let us look at the functionalities or the features of the project so there are the admin features here so as I said the user management admin can create user account as as well as uh add and manage team members right can create admin account manage users you can also do task assignment can assign txk to a user or users right to one person as well as update task great you can also um tax properties you can label the task as to do or in progress or completed you can also I mean label them according to priorities like um it's a high priority medium low or okay great and you can also add subtask great can also add subtask and you can um manage asset by uploading asset of each task and you can also manage um account account control right okay so users cannot create account it is the admin who add them and give them their credentials okay great so now the features the user can also interact right tax interaction and user can post um um uh comment or activity line right they can do and all that the user can do the admin can also do it right they can change task that it is done or not okay they can add new information or details about the activity how the task is moving okay and that one will help facilitate communication because we'll know the progress so the general features includes the authentic authentication as well as authorization if you're not author you cannot see certain pages right so users will have to log in that is be authenticated and in this we will use cookies okay great and there's also profile management as well as you can change your password and there's also a dashboard to give you summary of all that we are going to do now the Technologies we will use include um the Technologies we use include uh for front and we use react and we use cre we use V instead of the noral cre react app we use to kit to manage our state we will also use headless UI and ta cxs CSS okay in the back end we use node with Express yes then our database will be mongodb we'll use mongodb Atlas okay so uh we I'll try to put this PDF a PDF in the link I mean in the description so that those of you want to read more can read from this okay so now let us do some level overview so that we'll know what we are going to do okay let me okay so uh okay so in the same tool I'm using from eraser eraser yeah okay so I'll just go to my canvas and let us try to do something in here okay so what are we going to do now let us take um understand what we are going to do okay so basically there are two rules either admin or um uh or user right good either admin or user okay so I will bring this here uh okay so let me see here then um I'll just go to Icon uh let's say user search user great good so I'll bring this user in here so when the user logs in right when the user log in here it's either you are admin or you are a normal user right okay so in here and bring this uh don't worry much about my design skills great okay so it's either you are ad me okay the test is pry big so I'll go here and select large okay great great so it's either you are admin or I copy it or you are a user great then just put this around great change this to user okay so when you log in it's either you are a user so let me bring an arrow from here to here great um great so uh I think I should change ches great so when you log in it's either you are admin or user and when you log in as an admin you see you have access to uh your futures right the admin fatures so uh let's say admin uh Futures rate and uh let me reduce the font to medium gr and make this big okay so this I'll just duplicate it okay great so you have add new features like this uh okay so maybe I can put this into a diagram like this great oh my goodness let me select all no okay this okay so so now you have this and you can also have um the same for the user the user will also have their Futures so I'll copy one of this paste it here paste it another time so the user will also have their list like this right great I'll just link it like this great and also link this okay great and the admin have access to the users because they ad being can also assign himself as taxs right but the user do not have to just check where the arrows are leading right and there are um I mean General features both can access as well right so here I'll just put here as general Futures so General um features okay so I'll just increase that one put it here as general features okay so with this General features uh let me bring your letter down great then just put this Arrow here and this great so so so now so you see when you log in right you are either admin or a user and you have your features have your features the admin can also assign sub task so can do like all that the user will do and they have General features okay now let us find a a typical we I mean how we normally do our stuff when it comes to uh front and back and uh kind of writing okay so in here I will just search for database right okay and just copy this and put it here okay so let me make it big so you see so this is our database uh okay let me see database maybe I should reduce the text to text to medium very small large extra large then keep on okay so we have our database so before we can connect to our database there should be our back end so now when the user logs in according to what we're doing here if the user visit our front end the user is not interacting directly with the database the user can get connected to the database through our back end right so the back end acts between the user that's the front end and the database right okay so in that let me also go search for Server okay and I will use this as a server great okay let me make it also big okay then label this as s eight okay so Ser so now we can can get an arrow from here to here right and uh from here to should go this way to this way uh this way to this way okay so now the Ser a request to database the server send a request and receive a request right so we can put send request right so this is send request and let me ruce the point and I put here uh receive response okay so the server sends the request to the database and receive a response in here right okay great and in this case this is a mongodb okay and this is our back end that we we will develop right okay so now the user will need a means to connect right the user cannot interact directly I mean uh with server so we need to develop a a front end right okay so in that let me search for computer okay and I'm going to use uh okay I have let me use this okay so scroll up it and this and this will act as the front end that the user will uh visit right okay so uh let me say UI great this one okay great so the user will visit from here now when the user visits from here right now this user will will create an account right so I go search for user okay and I put it here okay so this user is the admin who created the account right so this is the admin who created the account I am doing this so that you understand if you want to uh make this as a a software as a service then you know what you are doing right okay great so this is the admin who created the account right okay so now let me connect this this right so uh okay so we send and receive response okay oh I should change direction okay okay so the user sent from the the UI to the server and receive a response okay great so the admin creates account right the admin creates account and add um his team members so I'm going to just get one of this let me duplicate it see if I can select all copy and duplicate great right copy and duplicate right great so now I as the admin who created the account can add my team members under me right and with this this team members I can assign them task so let me good great so this my team members I can assign them task right so I can say uh list great so this can be as the task let me duplicate it one more okay copy copy and paste great so let's me copy all of this okay so this is my task right okay so I'll just have to so I can assign different different task to different different users great right so let me wrap this great I can also wrap this right so this tax goes for users yeah users to the task this one also to the users right so I as the admin I will choose the people I want to assign the task great great so iend TX to my users so I mean I can have different different different tasks of all these users it can be one user or it can be many right so um if you want to make this okay so with what we are going to do do be doing we just be doing it for just one right but if you want to um make this as software as a service we can say now you have the platform and a lot of um I mean people register to put add their users right so can see this can be like one um client for you right so uh let me l this here as let's say your client or whatever so client one right and you can have the same let me zoom out a little right so now we can have the same thing here that's all of this right copy it let's see if I can paste it oh no here great okay oh okay very small okay okay so I mean you can have couple of this right so let's see if I can copy this let me copy try to see if I can paste it great so now let's see I have another one here and this one right if you want to make this as software service so that you know that you can have a lot of um I mean people getting connected so they will also create their platform connect right great so they send request and receive response great okay um I should go like this instead okay so so now you can have multiple right so uh we can label this as client two cent two okay so I I hope you get what I am trying to say right so you can have as many as client who also add their users right so if I try to print this so you see so so from let me try once again if you you understand right so from our database we have a server connected to a database right and it can only reach our database through our server and we have our front end where we can have various users right connected to the front and our server into our database and they I mean the person who registers the admin add their users and assign tax to the users okay so here so we can have as many as if you want to make this as a software as a service so this is what we are going to do I hope this is clear so sorry so I will put maybe a link to a link to this doc so if you want to read as well as maybe leave this I hope you understand what I am trying to explain right I hope you great maybe leave this image somewhere this as an image right a PDF somewhere that you can I mean look up if you don't understand I will understand something okay so now let us quickly uh open up our Visual Studio code and just do our project setup okay okay so this is my visous studio code okay so I'll just create an empty folder and just drag and drop it and just drag and drop it into it okay so just go into your file directory um maybe yes so I'll just go here um go into YouTube and Just create a folder in here as um tax manager right and just drag and drop this uh tax manager rate and just drag and drop it into your visal studio code okay so as I said we will use V so just search for V great and you see okay V is the next Generation front end tooling okay so how do we go about it uh just scroll down oh uh where is the okay get started is here great so all all you need to do you can use V to create vanila Javascript app view R you know anything so just come here if you're using or I am using mpm so I just copy this command come here now okay so in this folder I'll just open my terminal and make sure you are in the folder right tax manager and just paste it so mpm create V at latest right and I want it to be in the same direct rat right so uh maybe I should put for Slash and see let's see okay okay so he say do you want to proceed I'll say yes why okay and I want react so I'll select react um then do you want I just want JavaScript great so now it has been created in here okay great great okay so it has been created in here so now we have um our configs and everything in here so let us do our project setup okay um uh okay I think we can we can group this by putting this into a pH client right so that I'll copy all of this and put them inside a client okay great great okay and you see when you normally run beat app it runs on um port five one something something so I just want to change it and let it R on um 3,000 so just come here right and just say server server and just open object put a port and the port is going to be 3,000 right and just put the proxy appr proxy also open as object and so AP um 4/ API right okay this and our API also runs on okay so let's put this okay our API also run on what 88,000 okay that's great okay so I I've just changed the port and the server here to run on 3,000 okay great so now let us install our packages so first we going to to use um twin CSS so just go to Twin and click on quick search and they have search for V right okay search for V so install with v okay so this is installation for V so we have created the project already so we need to run this command Okay so come here and make sure you move into the client folder paste it run it let's go back okay and copy this also okay okay let's wait whil it installs okay so done so we paste the next command and just run okay okay and after that what do we do again okay we just have to put this into the jwin config okay so it's here so in here place it this content okay great so now but again let us install the packages that we will need okay so let me make it a little bit bigger great okay we have no need of this again okay so let's mpm install we will need um as I said headless UI so if you go to headless uh think get okay so headless UI go there okay so here this is for react and the others for uh there's also view but we are using re so we'll go to react okay so how do we install it we just need to copy this and install it okay so this we also need U at Ros JS slash toit we also need um Z LS so that we'll be able to combine a lot of classes okay we also need moment we need um re WR icons icons okay we also need react rux and uh we need react um router door okay okay so we need re and we also need a rechart for the charts recharts then what again we need we will need soona for the notification okay let's install it and see okay so while it is installing it let us um go and check our folder structure okay so we'll have assets okay we will not need this let's remove it okay so the folders We have we'll have Pages we'll have components components okay we have um Redux and Redux and lastly M okay so in here um so we just go in here and change this to whatever name cloud is tax manager great okay okay so now let us create the various pages that we will need we will need a login. GSX just run RFC wa if yours does not work go to extension and make sure you have [Music] es7 uh FL I think yes7 plus yes you have this extension installed then you can run the short um command Okay so great we'll have um dashboard. GSS R I'll make sure do the naming properly dashboard GSS RFC okay we also have um we'll have um tax task GSS rfcd we also get to tax Dil okay AR C uh okay it should be dot create r c um what again we we also need the trash speed GSS AR of C great then we also need the users page GSS andc okay so this are the various Pages we need okay and let's go in here we can remove everything from here we will not need it great and let us just render um the login page okay so we will not use this so we can remove it right we don't need count it go okay so if you press on shift and ALT then zero zero no o o instead it will remove All unus Imports okay great so you know okay so I have prepar some simple classes here so I'll just leave it then override what is in our index. CSS here okay so we have um fonts this for V CSS and we have some base classes right set margin and part all to zero certain box size into B box and the font of nemoto okay then we also have various classes for the loaders right with key frames okay okay then we have this for phone container and this also for okay so these are the various T I mean CSS classes so just copy and override it and that's so just copy and override this okay great they are not anything just for the loader animation okay great and I think we done with the setup so now with the components and other stuff we'll be uh doing it as we go on okay great so let us try to spin the app and see if it does work okay so let us try running our app and see okay so I'll go to terminal and make sure you see the into client and just um run mpm run there okay okay so so now the app is started on 4 3,001 the reason is I have another one running on 3,000 already so this is running on 3,000 already right okay so I'll just go into let's go here and a local host 3,001 Lo host 3001 NC okay so now we get login here great and uh let us check if our table is working so I'll just copy this I'm going and place it in create login and just put this one here and try and SA if that's work okay great it's working okay so this is the end of this first part in the next