Resume Management project with React18, ASP.NET Core7 WebAPI, TypeScript and Entity Framework Core

hello everybody Welcome to my YouTube channel today I'm here with you with a new project which is a little some sort of mid-level project and it is a resume management using react 18 asp.net core web API version 7 and also type the script first let's see what the solution architecture in this project we have a user and user has interaction with our front-end project which is react 18 and type script and our user is directly communicating with this front end and on the other hand we have a back-end project of asp.net core web API which is.net7 and the interaction between front-end and back-end we'll be using HTTP requests and rest API standard and also we are using a real database which is Microsoft SQL server and for a connection to the database we are using orm and we are using Entity framework core orn inside of this project let's see what is the ingredient of this tutorial and what we can learn together on the backend project you have the if you have a lookup on entities and we use dtos we use application DB context and use orn but also we use HTTP method like HTTP get and HTTP pause and also we use the swag here to test our database and our apis also we use Auto map here because it is really important to be familiar with it in Grid project and also for the first time you speak about the entity relationships in this tutorial we use one-to-many relations between different entities for example we have some companies and each company can have many jobs and each jobs can have many candidates so we use 120 relation and we handle it inside of this project and on the front-end project we see the nested routines and the importance of it and we can see we can use nested routines we use three of the most important hooks of front-end which is user State use effect and use context and you know that in react these three hooks are really important also we cover dark mode inside of this video and because I wanted to speak about use context I implemented dark mode using a context and you can see that how easy it is when we are working with our context and also we make our nav more responsive and you can see that how cool it is and it will be beautifully responsive also we use typescript interfaces and you can see that how cool it is to use interfaces inside of our typescript project and also we use dto that we use DQ on our backend and also we use the view on the front-end project and you can see what it is also we use axios we use SAS modules and also we use mixing and Views moment.js so let's take a look at the demo of our project so this is the Swagger of our backend you can see let me show you we have three different controllers and we have a lot of details here you can see that we have some different level for our jobs like intern junior senior and the others and also for the company sizes we use this array of enum which is a small medium large and they will be like this and they have companies and we can create a company and see a list of them and also we can have jobs and we can create a job and retrieve the list of jobs and also for candidates we can create a candidate and get the list of them and also we can use a another arrow to download the PDF file of this candidate resume and we test them on the front-end project so in front-end project you can see that I have a single frontal project and it has dark mode this dark mode is implemented by context and on the companies you can see that I don't have any companies let's create a new company for example the name is Amazon and the company size is a select and it cannot be tight it must be selected from a list for example I say this is large and safe this company is safe you can see that I have a company of Amazon a sizes large and creation time is this let's create another one for example Microsoft Microsoft is let's say medium and it's safe and also it works on dark mode and also here we have Dartmouth that's so good so for the jobs we don't have any job yet so let's create one for example senior front and develop and for the job level we can select from a list for example intern Junior midwives and you run a lot of them I use senior and for the company you can see that it is dynamic and it is coming from the list of our company so if I add another one for example let's say Zara learn it is just a test large save and I go to the jobs and create a new one senior front end developer developer no it is a senior and now I have this zaralon it is completely Dynamic and let's save it okay this is not saved the title is in your front end level is this creation time is in and out and let's check the dark mode that's cool and check the dark mode here that's okay now let's go to the candidates no we don't have any candidate let's create a one for example you can see that this job is also Dynamic and it's coming from the from this list senior front end so let's create okay for senior front end first name is test one last name is test two email is test at test.com phone is the test phone number for CV I am a developer and also a YouTuber I hope this video helps you a lot and that's it and let's add a PDF file for example let's choose this okay and save now you can see that my candidate is saved and let's check that mode it's okay it has a first name last name email phone CV and also download and here you can see in this button left here you can see that this is linked to our PDF file if I click on this okay it says that under f you can save it let's start downloading and go to the right F and you can see this is the original file and this is the downloaded file this is exactly the same that's good and you can see that the dark mode is good and also this dark mode is working correctly Also let's check the responsiveness and let's refresh okay this is my project and you can see that I have this by clicking it my menu will be open from the left side it's a beautiful transition and I can choose anything I want for example home it's here and companies it is companies you can see that this grid is responsive that's good and jobs okay this is also responsive let's check that mode okay and also candidates uh this is good so this is the demo of our product and also the codes are already uploaded inside of my GitHub and the backend and the front-end codes overall here and you can simply access to it and use it so let's continue and start our coding so let's start by creating a new folder as always so inside of Drive F I create a new folder name resume .net react and type script and inside of this folder I create my project front end and the packet let's start with our backend okay so I will open Visual Studio 2022 and create a new project my project is with c-sharp language and this is API web API you can see that if you recently used up one of them you can see them here but I'm searching for it so asp.net core web API my project uh the project will be inside of this folder resume management select so the project name simply will be our backend and solution name is back in and project name is back here next .7 is good for me I don't need authentication and let's leave everything like a standard configure for https yes enable no yes yes and let's create our projects and starts okay this is my new project uh I close this let's delete weather forecast and also delete weather forecast control layer okay now we can use this project uh let me show you my database structure in this example we have a little complicated database and we have some relations you can see that we have companies table uh jobs table are candidates and there are some relation between these entities for example account you can see that this is a one-to-end relation it means that one companies can have multiple jobs also jobs and candidates have one-to-end relationship it means that jobs and candidates have this one-to-one relation and a job can have multiple candidates but a candidate can just have one job and a job just can have one company so on the inside we save the idea of its Planet let me show you for example we have companies jobs and it is one to end so inside of the end which is our jobs we save the company ID and also on the candidates we saved it there is a job ID and we saved so we will create them soon but let me show you another beautiful thing when you are using this type of entities there are sometimes some shared properties that uh repeated between all of entities for example you can see that I have ID created at updated add-on is active and they are repeating on all of our entities so in these scenarios we can simply create a base entity and inherit this properties from that base entity and this is what we will do in this tutorial so let's do this let's go to our project and inside of my backend as always you know that it is a good idea to have different folders for managing your files and your classes let me show you what I'm going to do in this in this video I will create a new folder inside of backend I name it core I want some of my features to be inside of this core folder so inside of call let's create a new folder named context you know that we are using the context so after context let's add a dtos you know that details are a good idea when you're using a great project and also let's have some entity so let's have a full level our entities Also let's create a folder for enorms in this project we use some enorms and you will see them and that's it also let's have another folder name Auto mapper config you will see that what is automobile why it is vital to be used inside of our project so this is the folders I need for now so let's start by creating our entities so you saw that we have some shared entities and so we can simply create a base entity for them let's do this and let's create a class and call it base and TT so inside of this base entity we have some props for example we have a long ID and this ID is a key these keys from system.componentmodel.data annotations uh uh after ID you can have appropriate the time of created ad and we can have a default value for example date time that no and let's copy paste this and use another field name updated at and also I want to have another prop with type of Boolean and its name is is active and you know that you have a lot of props in real world scenarios and you can use them as you want so I want to have all of this as my base entity that's good so let's add different classes uh you saw that we have them company job and candidate so let's start with them for example company is one of them this company inherits from base entity so no it has all of the features of Base entity and you know that we can use public abstract so if we change this class to abstract it cannot be initialized with a new keyboard and it can just be inherited and this is the base entity so let's continue with our company we need to have a for every company has a string of name and also we have some company size and before creating our company sorry which is an enorm let's create all of our entities because we also want to have the relations for them after the company we have of course the job this job also inherits from base entity and also let's have the candidates and this candidate also inherit from our base entity and that's it so now we have all of them and we can use them to Define our relationships and let's create our enorms so we have all of the required classes and Innovations and okay delete instead of enorms I want to have the first thing is for our company so we have a company size that's it so this is the public of you know not a class and for this you know we can have for example the small and medium uh large that's it this is for our company size and also let's add another one so this time we are using a job level this is a public you know and for job levels we have different levels for example in turn is the first one then we have a junior developer then mid level let's say that then we have a senior a team lead and the CTO and architect or any different levels you want you can simply write right here and use them so this is the job now we have company size that's good and they have job levels no we have all of our entities and our email so we can Implement all of them let's go to the company which is the first one and after name we have a different prop the type of this probe is company size and the name of it would be let's say size and after this let's check our relations we saw that any company has a list of jobs but a job just have one company so let's implement this for relations we can say that we have a oops public collection or you can use list or collections or eyelids or eye collections I simply use a collection of job and the name would be jobs let's also use certain getter for them and I think that's it and this is for the company so we have a name size and a list of jobs let's go to the jobs which is the next one this job inherits from base entity and inside of it we have a string of title and also let's have a job level of limit so this is coming from this job level inner that's good and after this level let's go to the relation style so we saw that we have a relation between jobs and companies so this is end to work from the jobs so we simply you can't save the company ID here so you can say that the type is type of the keys which is long and this name is Company ID and also let's have a prop uh let's have company of company and using this The Entity framework code will handle all of our relations and that's good let's have another crop because we have one one to a relation between our job our candidate so let's create a by collection of candidates the name is candidates okay no we have one to a relation between job and candidate so we save a list of candidates inside of our job and let's go to the candidate and here we are inheriting from this entity and we need a lot of stuffs for example we need a first name and let's copy multiple times okay we need first name last name email uh form uh cover letter and resume URL and that's it so the next thing is our relations and for relations this candidate has just one relation with jobs and from the candidate so it is n21 so we can simply say the jobs ID inside of our candidate and let's do this so here you can create a prop type is long because it's ID and they say the job ID and also a job of job so I think everything is good let's check it quickly and continue so we have a base entity which is an abstract class it has an ID created ad updated ad and is active let's have uh through as default value for this is active so it will be saved automatically as zero in our database and that's it so the first thing is company is inheriting film based entity so it has idn on all of them and it has a name and a company size and this company size is a small medium or large and also it has a an Eye collection of job and that's it on the other hand we have job so it inherits from base entity uh it has a title it has a job level of level and the job level is inter engineer senior and the others and for the relations we have a relation with company so we are saving Company ID and a company of company and also this job has one to a relation with candidates so it saves a list of candidates in itself the next thing is candidates and you have your first name last name email phone cover letter resume URL and under relations we have just one relation with jobs so we saved the job idea the type of long and save the job itself so for the entities that's good let's go to the database passed so we created these entities after this we need to install some package so let's go dependencies right click manage nugget package and go to the pros sections here we need two or three different packages the first thing is Microsoft let me show you that it is loading okay we need Microsoft that the framework let's install it Okay I accept also you need to Microsoft that in the variable core.sql server and this will install the Microsoft and the framework with itself but you can install it and there is no problem okay the next thing is Microsoft that in framework called the tools let's install Okay I accept and that's it let's check on install okay we have Microsoft Infinity War core magnificent record.cl server and if you want to call that tools that's there and now let's create a context and add a new class for our context which is application DB context and that's it here we need to inherit from the context these three context you must press Ctrl Dot and it will suggest you using microsoft.eferal core okay that's good the next thing is you need to create the Constructor uh pass some configurations but it will handle automatically let me show you you need to press Ctrl that again uh it says you that you can generate Constructor and the second management Constructor with options let's press enter okay that created the context you can simply make this generic and pass application DB context to it and that's so the next thing is we need to have a DB set for each entity to create a table for them so let's create the prop of TV set by the way there are a lot of features that are going to be covered in this video so feel free to ask or leave comment for any question you have and we can discuss it together so the first thing is we have a company so let's say we have a public DB setup company from backend core entities okay the name is companies and let's copy paste it okay the first thing is company NeXT we have job and it's table name is jobs the next thing is candidate and it is candidates and that's good and we can use it but because we are using some relation it's better to configure the relations than our application DB context is creating so for doing this you can type override on model creating you can see that it suggests you let's press enter so this is the function unit protected overwrite void or model creating which receives a model builder of model builder and it calls based data model creating and you can work with it do not delete this line it is required and then you can manage your relation so let's work with model builder dots entity so for entity of job I want to Define its relation and you know that any job has one job goes to job dot company I write them and then we see what is this so any job has one job dot company uh on the other hand it has which many so it has many which many on the other hand it is company so company goes to company Dot jobs so it says that on the other hand you have jobs related to these and here we can simply has for use has foreign key say that job job Dot Company ID and we simply configure our relations we say that before the entity of job we have one company entity and on the other hand company has many jobs and for the job you have the foreign key of job that job Company ID that's it let's have another one with model builder that entity after job you have the candidate with one too many relationships so let's handle it we say that it has one candidate goes to candidate has one job and other on the other it has many job got candidates and has a foreign key so for the foreign key our candidate goes to candidate dot job ID and this is the next configuration we needed so we configured all of the relations we needed let's go to the next part which is using this context so we need to go to the program that CS uh here we need to say TV configuration and that's it and you know that we need a connection string and the connection string is always be always be used inside of app setting and it will be stored here so let's say connection listening is an object and for our local we have a server of dot local uh let me watch the inside of this code so server is Dot and database is a name for example resume management .net or any name you want I simply use the same name again and trust it underline connection is true and also let's trust server certificate to through and that's it now this local is used here so we can simply say that Builder Dot Services dot add DB context of application DB context and inside of this we have some options so options that use SQL Server of here we can simply use that configuration dot get connection is string with key of our local that's it that is all of the configuration we needed Builder that says dot at the context application DB context with options of options that use the SQL server with local now let's check everything let's open the package manager [Music] inside of view you can go to the other windows and open application as a console let's type CLS and add migration of initial initial migration let's wait for it to see if you have any error or problem no we don't have any error that's good everything is created so let's say update database we are using Code first upload so we'll create database from these codes okay it says that done and we don't have any problems so let's open Microsoft SQL Server management studio and check our database dot okay because I'm local and we have resume management tables okay we have all our tables that good and let's see our database diagram new database bit candidate companies and jobs kilos okay you can see that I have jobs companies and candidates so companies has one to one to many relations with jobs and jobs has one to many relation with candidates that's all good so I think this is the time to close everything and everything and go to the controllers we want to start with our company so let's create a new class of company uh no instead Oculus you can use glassbot there is a better idea to use a controller Creator so let's add an API controller it will help us to write our codes faster so this would be company control layer company controller that's good and here let's create a Constructor so I type ctor it will create a Constructor with pressing tab twice and here we receive application DB context of context and I want to create a new field so you can use create and assign field of context and create another property of contents I use this property that's okay let's move this property up and make it private and also let's change and rename it so I say rename to underline context you can use any name you want I simply use this context and now I have access to context and it is time to go on cloud functionalities and of course we'll start with create because Cloud starts with create and read then update then delete so create read update and delete and that's it so for creating we create a new HTTP method and we know that for creating the standard is HTTP pause and let's create a new Road and the road is create so it would be a slash API controller which is company slash create it will be a slash API a slash company slash create let's create a publish I think you are familiar because you have done on our previous works and you know that it should be an async to use asynchronous code and I can simply return a task of action result because I simply want to return action result of create company and for the inputs and you know that it is a better idea to have dto so let's go to the core instead of details because we have different entities we create folders for each one so let's go to the details and create the first thing is company so come honey and after company let's create a new folder name yeah job and also let's have candidate and we will create the related details inside of this folder so for the for creating a new company inside of company let's add a new class and let's rename it to company create dto let's see what you need inside this company create so you know that inside of company we have name size jobs and ideas others we just need to create this tool so let's copy them and go to the company create and this is it name and Company size of size and I just need them no let's close this company we can so our body received this this company creativity of dto and now I can work with this video we can use Setter and Getters for this conversion to create a new entity but in great projects we use automobiles let me show you how we can create automatic mappings using automobile we need to create a new message to install a new package so yeah let's search automaper and we need this automobile.extension that Microsoft that dependency injection let's install it is really so easy using them let me show you okay okay we have a error now this is not an error it's okay let's comment it for now and go to make it package and check okay it is so inside the automobile config let's add a new class for configuration so we say Auto map here config profile or any name you want and inside of this V inherit from a profile let's press Ctrl dot this profile is using automaper that's it and here let's say c t o r to use Constructor and inside of Constructor we can have the mapping we want for example because we have three different let me categorize everything we have company [Music] we have job and we have candidate so this is better to have categorization so for company I want a map so I created here I say create map from company create dto2 company entity that's it no I can let's say let's continue Ed okay everything is clean no I have the auto mapping of company credit dto2 company the next thing is we want to say the program.cs that you need to use this mapping so let's go to the program.cs after at least TV configuration let's use Auto matter configuration configuration and we say that Builder dot Services dot use sorry at automobile uh inside of this automarketer we use type of the name of the class which is Auto mapper Auto okay we have a problem here yes let's rename this this is auto mapper config profile yes okay no it is true and Auto my pair it cannot find it automatically let's copy the name okay now it is recognized and we say that Builder that services start at automater or with type of automobile config profile and that's it so now we can inside of our controller we can receive the automobile using dependence injection uh I'm a pair of mapper will be received and let's press Ctrl Dot and create and assign a property of my pair we can change it to private uh let's rename two underline my pair no we can use this map let's uncomment them no I have this dto and I can convert it so I can simply use it with that off new company equals [Music] my pair we can use the map function it has a source on the destination so what is the destination for this map it will maps to a company entity and the source is detail so no this is let me show you this is a company so we can say that you are a company of new company so we created this new company and we can simply update under like context that companies dot add a scene of new company and also a weight of underlined context Dot save changes async and we can simply return okay with a string of company created successfully let's say and test it to see if we have any error or not so we have the company let's create a new one okay now we have a company so you can say it is area of zero one two but this is not what we want this must be a string so we need to have a little configurations let's come back here and go to the program.cs after controller here after controllers we need to have a little configuration uh after this let's press enter here to be more readable so we say that Builder that Services dot add controllers Dot uh Json options and inside of it we received options and we say that options dot Json serializer options that converters Dot add and inside of it we need to have a new Json staying in a converter no we can convert from the stream to enum and from enum to S3 that's so good and also we need to have a little configuration instead of our context where is it here on the context here we need to change the fields to the string you know that let me show you inside of companies design no this size is inch but it must be a string to save the string of our size successfully so here we need to configure it so we use model builder folder entity the first thing is our company so for our company we use for the property of company goes to company dot size and for this property we say yeah you has the has conversion and the type of this conversion would be a string that's it let's copy paste this uh because you want to use job levels Also let's do it right now because we have the job also and we say that for the job and job that level you also need to change to the string control s and because you are changing our model creating we need to add another migration so let's say that migration of update enum2 string okay it created and you can see that it is altering your column uh from end it's all type is int and this new type is inverter Max or string so let's update our database and let's check them again let's disconnect close no connect again for tables okay companies design no it is in Virtual Max and it is saved as S3 that's good so let's close [Music] test the game okay this time let's check the company size a small medium large okay and that no that's right let's copy this large uh create a new company for example Microsoft large execute company created successfully uh let's select thousand rows okay id1 Microsoft large created that update that and is active that's good so it seems that our company is working correctly so let's close this and this and go to company controller now it's time to work on the read and we need to create an http get with root of get and this must be public async a task inside of this task I want to return and this time I want to return an action result and what is this action result type it is an i in our label of uh our companies but we do not want to return the anti-diving to create a new dto so let's create the dto for it and continue so inside of companies let's add another let's stop okay and inside of company let's add new class company get dto and for this gear let's see what you want to return from the base entity I want to return this ID let's copy all of them from here and paste them and also let's go to the company and copy these I don't want to use these jobs for now uh company get dto let's copy them here and check what you want so I want to return ID yes I want name I want size yes I want to create in case of that yes I don't want to update that I don't need it and I don't want to return exactly so I need ID name size created that and the most important thing is the name of this dto properties must be equal with what is going to be mapped for example if it's name but it is not name it will not be converted automatically and you need some configuration so use equal names so this is company editio and let's close these and so we say that you are returning a company [Music] available yet companies it don't have any returns so if you say that VAR companies equals to andela mapper that's map uh what is the the source and the destinations of course the destination would be there company but before this mapping let's get all of our companies from our context so let's say that companies this is better the company is equals to andela context Dot companies dot to list or at least async is better so let's evade them this is my company so that conver Ted companies equals to underline mapper dot map this companies what is the destination destination is company dto that's it and we can simply return an okay feed converter companies it has a problem let me show you what is the problem let's test it it so if you on the feature see the kind of problems you know exactly what is going on so it says that automobile dot automobile mapping exception missing type map configuration or unsupported mapping and it says that you are not using correct mapping configuration so we need to configure them let's go here inside of automatic config profile for the companies let's create another map so create map this is the syntax so what is the source the source is company entity what is the destination destination is company get detail and this is it let's press Ctrl s and start again no I have this company get again we have problems what is the problems let's check everything so we are mapping from the company to company details so the mapping is okay uh here we are nothing from our companies but we are mapping to a company gate and this is the problem it must be an list or I in a variable or some iterable type of mappings so let's press Ctrl s and start again Let's test okay no you can see that we are receiving ID name size and created add and inside of our database we have ID name size because that update that and is active so this is the beautiful usage of our details and using automaper it will be so easy so for the companies I just need create and up and read and I don't need the other features and also you can ask another read get Company by ID because I don't need them and I don't want this video to be so long I do not Implement them but let me know in comment if you want to implement them and we can work on them on another video so for the companies it is good and I think we can go to the next part which is that minimize everything which is implementing the controller for the next thing which is our job so let's create a new okay let's stop for control layers add new controllers and before controllers I think it's a good idea to see what we are going to do so we can create the details you saw that for different operations like creating and getting we created different details so let's create some details for our jobs and then continue to aware control there let's create a new class and the first detail would be job create dto and also we need to have another one so also we need to have job yet dto so for credit you let's see what we need job okay we have title level Company ID company okay you need three street so let's delete this and this so for job create we simply need to use title and level and Company ID and let's see the mapping so for jobs let's create a new map to complete it so from job create the tool job and this is the mapping 48. so let's close job create the next thing is job yet let's see for the get what we need let's go to the base entity and copy all of them paste here to see what we have also in job let's copy all of them and also have it so I need ID yes and create that yes I don't need to update it I don't hit this active I need Title and level uh yes and I need company ID I don't need company or company and also I don't need this so let's clean up a little so the first thing is ID then let's move this down after ID we have title good level okay Company ID and that's it and I want to create a new prop inside this get detail and let's create it so let's create a new string of company name I want to return the company name of this job and I will show you that or you can simply do this so this is our detail and all of them are uh exist except the company name so we need to have a configuration for this company let's do this and inside of this mapping so let's create a new map 4. from a job to job get dto and this will map everything instead of uh company name that we need to handle it so let's use four member in this scenarios we can simply use four member and they say your field is destination goes to destination Dot and for this we have some options and we say options Dot Mac from SRC goes to SRC where is this coming from this is coming from our src.company DOT do you have a name yes you have name so this is the mapping we needed and you can see that using formula we can easily handle all of them so I think this is the mapping we needed uh let's close job with dto and let's close automobile and job and base entity so now let's create a new controller and here add new controller API controller empty job control layer and you know that what because map and application DB context is exactly the same we can simply copy them from here so let's copy this part from company and this is exactly the same we have application view context just we need to change this company controller to jobs controller because this is the Constructor and now we have the underlying context and underline mappers and also let's copy this comments after this we need to have a cloud and create so let's create http post and let's have a road of create let's have a public I think task or action results and what is the name create job and inside this job we are receiving from body of our request job create dto and for this dto we simply create a new so let's say that new job equals to andela mapper dot map so if you mapped automatically so this is job created your dto and in map this dto this is the source and the destination here is job entity so we are mapping from detail to job and then we add it to our context Dot jobs Dot at async of new job and the rate underline context.save changes async and simply return okay job created success fully so let's test it and see what is the result so for the job we need title level and Company ID first let's check the company ID and see what companies do we have so we have company with idea of one which is Microsoft so here let's create Company ID is one what is your level let's see the job level for example I want to create a senior job position okay level is new and title is senior front end developer react yes let's execute and see the result job created successfully let's check on the jobs select top okay you can see that I have id1 title is okay level is in your company id1 created that update that and is active everything is saved Ah that's all so I think the create is okay and let's go to the next thing let's copy the comments from here I want to this read and also all of these comments yet job by ID so for the read let's create http get uh let's have a root of get again public up async uh task this time you don't use iaction result because we are returning something so I simply use action result the generic type of I enamorable of job yet dto we created this detail together and let's say get jobs and this time we save our job equal to underline context that jobs Dot to list async and then we can use bar converted map jobs to job editio you know that we created this mapping here and also we handle company name that's good so this is the converged job and we can simply return okay we need converted jobs let's check uh we have some problems but let me show you what is the return of this so let's execute okay now we have a problem it says that missing type map configuration or unsupported mapping uh uh for this packing version okay let me show you what is going on here inside water mapping we are going to use this or see that company name but no this company is not exist let's use it and then see if anything is changing or not in these types when we have relation we need to use in kilo so we say these jobs must included with job uh sorry this is companies let's close these companies and for this job here include we say then job you need to include job that company then to list AC so this is a join command in SQL now we have access to our company let's check it again to see if we have any error or not let's try again okay it again says that configurational unsupported mapping mapping type of job get dto system the collection.list okay we have another problem here it must be I in our variable of job with dto you see that it is saying that it is related to our list let's check again try it again okay this time it again says that unsupported mapping this time it says a single state machine box yes the problem is it is not waiting so you can see that when you have any error you can simply read the error messages and see the problems let's check again [Music] okay this time you can see that I have everything ID title level Company ID company name and created that and that's good so let's create another company so here we say that company name is Amazon it's size is large execute okay let's get uh idea of this is two Okay so so let's create for Company ID of two uh team lead fit seven years of experience and let's see the job levels the team lead execute job created so let's grab all of them okay senior companies Microsoft level of Team blue Company 2 company Amazon and you can see that we are simply working on our relations and we do not have any problem that's so good uh let's refresh so we have company creating company getting lists and creating job and getting lists and let's go to the final step which is working on our next entity and final entity which is candidates so as always let's go to the details inside of candidates let's stop first let's create the details to see our overall problems and solution can be date created your copy and also let's create candidate kits so you can see all of them together candidate get detail so the first thing is creating so for creating let's go to the candidate entity uh let's copy all of them you know that in base entity we do not create anything ID is handled by database and these three has initial values and default values let's copy just all of them from here to create I need first name last name email phone yes cover letter I don't need this resume because we are generating it automatically I show you later and for the relation and identity job I need first name last name email for cover letter and job ID that's good uh on the other hand we have jet dto so forget dto first let's copy everything and this is really a better idea to see what you need and also here copy again to this so I need ID entity that updated that is active I don't need them I need first name last name email is good also phone and cover letter and resume URL in get it will be here inside of this gate if you send to the request uh I need job ID I don't need this job and let's add another prop with a string of job title but this time you know that it is so easy to create this fill so I think four can it get it is good and now let's close can it get and can it create and let's create the mapping for it and continue so here we need to create a map first thing is creating so we say that candidate create dto need to map to candidate entity that's good and the next thing is the get so let's create the mapping for it can create map of from candidate to candidate get dto and also let's have a little configuration it is four member uh uh what is the field we need the field is from the destination dot job title and this needs to handle from options and we say option Dot where is this coming from map from SRC equals to src.job dot title so this time you know that this job must be included to read the title from it so let's press Ctrl s and I think it's good we will test this so configuration is good and candidate close base entity and Company and let's go to the final step which is for our controllers and we create a new controller this is an API and candidate control layer so let's copy paste you know that copy paste theme is not a problem and an issue in fact it is a good help when everything is simple so let's copy from job and copy this Constructor and this properties here let's copycon the control layer and change this so now we have underlined context and on the line mapper inside of The Constructor it will be injected and it should be used here let's see the required comments copy them next we need read so you see that we are following the crud standard although we are not implementing all of them and just implementing what we needed but we have the structure for the future updates so let's con start with this create so for the creating of course it is you know that standard is HTTP post uh I wrote I say HTTP not http so the road is of course create and let's create a new method with public async task uh by action result by the way if you are not sure the voice sometimes I'm using I actions that sometimes I'm using action results asked on the comments and we can speak about it and also we can have some different tutorials that focus on the differences of this type of action and action result and action result so I simply return and test with action result of create candidate and this is it but this is a little tricky and you know that we are saving a PDF file for the resume of our candidate so instead of receiving a simple body we need to use forms and you need to have multiple data I will show you later on the front-end project but for now this time instead of from you know that we are from body and from a lot of things from their query for road service I need to use from four because I want to receive also an image or I'm sorry a file instead of just simple steam or long or integer so let's receive a candidate create the video of dto so I receive a dto and a file so I say that I am receiving an iPhone 5 of PDF file that's it so let's minimize disability okay how much more better no you can see that we are receiving a dto and a PDF file that's it so first V save PDF 2. server then save URL into our entity and this is the reason let me show you again this is the reason we are not receiving the URL from the user we are just receiving the file and behind it automatically so let's start I want my project to be clean so I use some variables outside of my usings let me show you I say I have a pair of five megabyte is 5 multiply 1024 multiply 1024 so this is five megabyte and you know that this is byte and this is uh megabyte and no this is five megabyte and then that of PDF my type equals to application and slash Json this is another variable I want so after this I check my file I I say that if PDF file Dot length is greater than this five megabyte or my PDF file that content type is not equals to PDF mime type this is the validation so we can simply return a bad request it file is not value so it seems that we have a problem and let's see what is the problem PDF file is not not here uh it says that cannot even is convert type of line to Boolean oh sorry this is the problem this is the right operator or PDF dot content type is not equal to PDF mime type this is another problem okay no return bad request and this is my validation tells if you are not resigning anything we continue so we create a new URL for this so viral resuming you are a let's create a new guid DOT to a string Also let's add a DOT PDF in the last of it so we create a new guid and we add that PDF on the end of that new URL and then let's have a file path Wi-Fi pad equals to path dots combine of let's create a new road for it for example inside of my backend let's add a new folder and here let's say documents and inside of documents let's add maybe we may have some different types of documents so for example for PDFs I create a new folder and here inside of the pad that combine using directory dot get current directory we receive the current directory and then the arguments then go to PDFs then go to this resume URL which is a name dot PDF that's it so this is my file path uh then using this disposable type so using that off stream equals to new file stream [Music] and this file the same receives file path and a mode so you can use file mode of read write read write or create so I say file more dot create new create open and you can see we have a lot of them I say create and no but it is not recognized automatic okay no that's good so we can simply evade PDF file Dot copy and we have copy2 and copy to async and that's it so after it the video will be saved so we can create our new candidate and work on it so we save our new candidate equals to using map here.map you know that we have a destination and a source so what is the source the source is this dto is coming from body so we say the source is Eco and the destination is candidate entity so so after this we say new candidate dot presently URL is this resume URL uh this will be saved into our new candidate and this is the dynamic part of Saving it after this we can simply add this to our context so away context that candidates Dot changes is seeing and then we simply return on OK and we say can the date save it success and that is so let's test it uh go to the Swagger uh see if you have any problem or not so you know that we have you know that this time because we are using from form it is showing us a multi-part slash form data which is required for other images and our files so let's try it and for the first name I say Muhammad last name is for example gmail.com phone number it is not really a problem for us for cover letter I am a developer uh no this is the job ID let's check the jobs and get it ID okay I I divon id2 so I use id1 signal front and developer id1 let's execute you can see that it says that the PDF file field is required so we need to send the file and in Drive f I have some different PDFs so one of them is my real portfolio resume so let's test them for example inside of Drive F I send this momentary front execute so it say that file is not valid why let's check the file and let's test another one execute okay again file is not valid so it seems that we have some problems so let's go here and send our request again and check it execute okay we have a file and you can see that it is [Music] PDF file E3 and we have this dto okay let's go to next line okay PDF one two three okay and what is the content type oh this is the problem this is not application Json I just write it quickly this is application slash PDF so of course it is wrong so let's start again as I'm trying to write it fast because this is a relatively big project so let's check again try it out Muhammad toy email address gmail.com this number test cover letter I am [Music] front available okay job ID is one and let's send this and execute so it says candidate saved successfully let's go to the database and check our candidates select top okay you can see that it is saved and also we have resume URL which is it starts with 95e and ends with ee9 let's see if it is saved or not okay you can see that the file is also saved and if I open it's fine let's what happened okay okay you can see that it is working that's so good so I think it is good for our create the next thing is ready our files uh let's go to the details and check candidate okay handed get okay we created the get for the candidate and the initial State a stage and also we have automobile for you so let's close everything and go to there controller candidate and after creating it is working correctly now it's time to return everything so let's simply start HTTP get and wrote off get let's return a public Asics and this time I'm returning a task do you know what is the type of course it is not I action without this action result uh action result and the type is I in our labor of candidate get detail and yet candidate is the name and that's it so this time let's use a weight on the first step so welcome the dates is evade to be sure that everything is working okay so let's use context dot candidates and you know that because we are using the job title and job ID we need to increase so we say candidate that in kiload and we say that your candidate goes to candidates dot we need to use job relation and then we can simply send it to this to to list AC 10 is the time to mapping so let me map it to convert it candidates map and you know we have a source and a destination the source is our candidate and it is going to be to the destination of in our labor of candidate get detail and we return it so single reason okay V8 converted and that's it let's press Ctrl yes and check the result so let's press the start and okay let me show you we have three controllers the first import company the next one job no we have candidates and let's get execute check the result okay 200 that's good so you can see that you're returning ID first name Muhammad last name sorry email this phone this cover letter is this and resume URL is this and job ID and job title also is correct no it is finally done but we have just one thing which is downloading our PDF file from server you see that we just have the resume URL which is the URL of the file or expected to say that the file name of our resume so we need to have an URL address to download this PDF file let's do this and inside of candidate control layer let's create another one so this is for read or download [Music] PDF file that's it uh let's use HTTP you can use anything you want but you know that very when you are receiving your Source from server you can simply use HTTP get so this time we say that we have a wrote this route is download download slash ID and this ID would be parameter so HTTP get our router download slash ID and let's create public of this time it is not async so I can simply use action result of download PDF file and it will simply receive a streamer you are a and inside of it we create this file path again let me show you well hit this let's let me show you exactly what is there the solution we exactly use that file path again you see that I could paste from there so my file path is again file paths.com get character get current directory then documents then PDFs then the URL which is the URL row to the our files you can see that it's exactly the same file path then we check that if not system [Music] dot IO dot Phi dot exists of file path we can simply return a 404 or not found uh should not phone and we say that file not found you know that it's not found is 404 that's good but if you are not returning it means that it is found so we can use that PDF bytes equals to system Dot IO Phi Dot read or you have real all texts or bytes or lines this is a file or PDF so we can simply use all bytes of this file path then we save our file equals to F5 with some inputs and the first thing is this PDF bytes the next thing is its type which is application slash PDF again and the last thing is the URL which is the name of it and even this name it will be written so after this we can simply return this file return is 5 let's press Ctrl s stop and start again so let's check try it execute okay this is the URL of my resume so let's go to the slash API candidate slash download and try it so we simply say that this is the ID and no I must not have ID just UI let me show you here must have an arrow okay this name and this name must be equal so this must be URL and this also must be URL to be sure that there is no error and they are equal let's check url url that's good this is my route okay now it is URL and let's grab the file name again okay this is My URL is this copy and try it URL execute okay now you can see that it is giving me the file to download if I go to the Drive f uh start and load okay this is the file and this is the file okay let's delete it so let's check another for example how to write resume file okay let's create a new one with this so refresh let's create a new candidate okay test test two test three test four test five job ID is one and PDF file is this execute can this save successfully uh inside of inside of documents PDFs okay now we have two files that's good let's get the second candidate is test test two test three four five and this is the file name copy uh let's download it execute okay drive F AF no okay this is the file okay you can see that the file is exactly three pages okay 3D page you can see that it is saving and downloading correctly and refresh it seems that all of our API rows working correctly so you saw that we created three different controllers and let me show you again we created three different control layers and we just implemented some of functionalities they wanted so we didn't want to get one by ID and update and delete so we didn't Implement them we just implemented anything we wanted and we used different dtos and also we used this Auto mapper and you can see that all of our configs inside of this once one file and I think for the backend project it is good and you can see that we can use these for this API load inside of any front-end project you want and just for the last uh thing let's go and handle course policy you know that on front-end project you can handle course so we say that use course uh options and we say that options dot hello any origin dot hello any method dot allow any header and also this is for the handling our course policy and I know for the I think for the backend project it is good and we will continue on the our front-end project now it's the time to work on our front-end project so let's go to the resume management drts and open a new terminal here CMD and I want to create a new project so in peace create react app and the name is front and and also let's use Dash Dash template type a script because I want to use typescript so npx create react app front-end Dash template type SD and let's press enter and wait for our project to be let's start that's good and let's open our project using vs code so this is our project that's [Music] first open it to be sure that power changed and using npm start so we start changing files and folders and then starting it will assure that we don't have any uh errors or any problems or issues so this is our project let's start the first thing is I don't need this file so let's delete some of files like app.css after test index.css logo that is VG and setup test and report will be vital we just have these three files let's go to the index and let's delete these lines I don't need them delete this and this so let's format documents and in order to be sure that you have let me show you 30. prettier I'm using this extension protea code formater to use as format document extension that's it so the next thing is inside of app.ts6 let's delete everything uh say rafce rafc create a new component for me you can see that I'm using this snippet this ESL plus react Redux react native Snippets uh let me show you e s class I'm using this extension and simply using it you can create your component faster and that's it so let's check everything okay we don't have any error that's so good the first thing is we need to use SAS so let's copy this npm my SAS and let's open another terminal and I say npmi SAS it is starting to install as always I want to use two different files global.css let's create it global.scss for our Global style and also underline mix since that is CSS let's create a simple mixing of outside mixing of the flex and we have inputs of uh direction for Flex Direction [Music] uh dollar justify for our Justified content and color align for our lives so we simply say that display is flex and Flex direction is Direction [Music] and justify content is dollar justify and align items is that's it let's follow a document this is all we need for our mixins that's good let's close this and let's work on this yellow bar so here we need to have some Styles like star star before and everything after so padding of zero margin of zero box sizing of Border box and I change font family to Aria that's it and after this I want to have dark also I use some CSS variables so let's create this root and we say Dash Dash below equals to this color for eight six four f f and also let's have a BG color and this would be FFF and also let's have a text text color one of black and also let's have a text color two in case we need it you can use five five five it's great and that's it also for the links we use text decoration of now so this will be generally used and for our UL let's simply create a list style of none and that's it and also I want to use a wrapper class inside of my app so let's create that wrapper and we say your width is 100 percent and also your padding is 2 RAM and your minimum height can be 100 viewport high but because I want to use a nav bar I can reduce the size of my board from it so we can simply use calculator of 100 viewport height minus 60 pixel and the six pixel would be the height of our nav bar uh after this wrapper let's create all of the things we needed for example I want to have another class name context that I will use it later here I want to use my mixing so I need to add sign in key load and deflects and the first input would be column for our Direction and for justify content I use flexstart and foreign items I simply say Center and we need to interload our mixing file so let's import it on the top home and add sign import dot slash mixins now as I have access to my mixings and after this content I can simply use a couple touring for them gap of tour let's format document after this let's work on our dark team so inside of app I want to use a class name of ack so I can work on this app and all of my components will be inside of this app so here I simply say that for the app your color would be variable of Dash Dash takes color one and your background color will be variable of dash dash BG color and also I say that for that app when it has the class we can simply change these Colors Let's copy these colors and we say that in the dot after dark we can change it to zero zero zero vertex color one we can use FFF and also for text color 2 we can use 999 and by the way you know that we can use this inside of app because you are using scss and instead of this we can simply use this operator so let's format document now this is the classes for our act and I think that's good for our Global files so let's close it we created the global.css and we need to import it here inside of index so let's say import global.sc SS now we have access to them all over of our files and also we created mixings that good now let's continue and Go to the next part and let's see what we need today next part I want to have that mode inside of this project so before starting let's handle the dark mode and then we will handle it inside of our Now button all of our projects so when we are using dark mode there are some so different ways to implement it we can simply use context so let's create a folder named context in this project you can see it is easy to use context so let's create a team Dot context Dot t s uh you can use TS or TSX because we are returning a component I can simply use TSC or also you can use TS there is no difference so let's import something from react because we need to create a context so let's import create context and we need to create a context so export cons of team context is create context and that's it so because we are using typescript we can create a type for this so let's create an interface of I team context interface or any name you want and in this interface I simply say that I want to have a dark mode with type of Boolean and also I want to have a toggle dark mode which is type of and void which is type of f function so let's form a document again okay this is the type of this context so let's use this here and we say that create context with this type and we need an initial object so here let's say that you have a dark mode which is in the initial state it is false and another thing is this toggle okay this is an object this must be this and for the toggle dot mode we say that it is just a simple function in the initial State and then we'll change it so this is my context and you know that when we are using context we need to use context provider and wrap all of our component inside of it and it is better to encapsulate our provider inside of this thing context file so let's create the wrapper of it so we say that const ant team context provided it is going to be this component and export default this that's good so inside of this theme context because we are going to receive children as our props and here let's create a new estate so we need to use a state so we need to import use a state from react and here we can say that const of our dark mode set dark mode equals to A use state which is a type of Boolean and it is initial in its initial value is false that's it and let's create this function here so we say that const of toggle dark mode equals to Arrow function which set a dark mode and change it and you know that you can simply change the dark mode but here because sometimes we may have some issues and some problems when changing the previous estate the official documentation of State say that you can receive Pro State and then change it this way so let's format document and I said let's say that the type of this is uh this is a exactly the type you are using here that's it so no we can simply return the theme context that provider and inside of it we can return these children and also you know that there is a value for our provided and here we can pass the dark mode and also uh so let's format document no we simply return a term context that provided with our values and these children will be inside of this component and we just know we have a problem it says that children implicitly has an any type okay you know that you can change the type inside this type SK blades and have another interface for this so you can create interface so let's copy this and for naming you can simply use I the name of it and then props or any name you want I simply use this signature uh here I say that I'm going to receive a children and these children is a type of react dot react node and your type is I team context provider props so let's format document now this is all of the codes we needed for our team context provider so now we can use this in context provider let me show you inside of index.ts6 let's delete this react.strict mode and importing context provided from Context slash team context and wrap it a round of app so let's format document now we have access to and this context all aware of all of our components and our trees so this is good and no inside of app we have access to it and here let's import and use it so first let's import something from react and here now we need to use context so this also we need to import the theme context itself and use it so if it is the first time you are using context don't worry and after using it you can see that how cool it is so we say that cause the theme context context equals to use context of this theme context that's it so let's log the thing context and check the results inspect console refresh okay you can see that I have dark mode and toggle dark mode which is a uh function so I just need to use this dark mode here so here I can destructure this dark mode and here let's log it okay it says that it files that's it and no I don't need this anymore and I just want to use it so I can create my style dynamically and I say cons app styles of course if it is dark mode or it is not based on this you can change the classes if it is dark mode this must be app slash dark else it can simply be up and in this time we can use this app Styles let's format document and for no let's check the classes you can see that it is no app what if we change the context to true let's refresh now you can see that it is app Doc and we will handle this later on our nav version with clicking on a toggle button so this is the context for no uh now let's continue and use our program the first thing is we need to use drag router Dom and we need to have an app or so first let's install npm our record say hello I copy this and open my terminal and inside of app I want to use a navbar and then all of my roads so let's delete this and here we say that let's have H1 this must be navbar format okay after a navbar I can create a wrapper class and you know that we created a wrapper class it is this so this will be generally used for all of our roads and inside of this wrapper we need to use our roads that's it and it is installed so let's format document now you can see that we need to have navbar and Roads and also let's wrap everything inside of it inside of my record turn down draw the road here so let's import browser rotor from react router let's have this browser rotor uh wrap it inside of our context and let's form a document so inside option context provider I have browser rotor and then I have app an app so I have access to everything I want no let's work on our navbar the installed SAS and we install the react rotor Dom and the next thing is we need to use some icons so let's start using material let's install these packages these three packages need to be installed so let's paste and press enter to start installing and in the mean by let's create a new folder and components components [Music] inside of components I want to have a nav bar okay navbar Dot component dot TSX is my file and also a navbar.scss that's it so let's create rafc we'll create a new component for us the name is navbar that's it and let's import that slash navbar.css and also here I have the nav Oculus and I work for it later and let's import this navbar to add delete this and navbar and form a document let's refresh okay now this is number component uh because we need to use icons okay it is installed let's go to material icons and copy this uh package name also and say npmi mui slash icons materials it is installing no it is time to import some let's let it to be installed and then we need to import something from its icons and continue developing our nav bar and it is installing good so in the meanwhile creating a the main class name would be of course navbar and inside of my number I will have some different parts the first thing is my brand Division and inside of it I have expand and I say resume management formats document and after this I want to have a menu section and afternoon section I want to have a hamburger a new section and of course I want to have a Target section so let's work on them the first thing is our menu and we need to have some links so let's create the links inside of an array and work on it dynamically so I say const links equals to array which has an object so it has some href and also a label let's copy this so one two three four the first thing is a slash uh it would be home and the next thing would be companies uh its level would be companies the next Road would be a slash jobs and its level would be of course jobs and the next thing would be slash candidates candidates and label would be of course candidates and that's it so we need to map through this links and let's import the required from reaction the required component which is link of reactor Dom and final document and inside of my menu here I want to have a URL uh for every item of My Links array I will map through them I have some items and let's say that for every item I have an Li and that's it inside of Lis I have some Lynch this link has a two props that would be to item Dot href and inside of the label we use item dot label so let's form a document and see it so refresh okay you can see that I have resume management refresh home companies you can see it is working home slash home slash companies slash jobs and slash candidates that's all good and you have a warning and if you're asking what is this this is the extension let me show you ninja console this is this extension console ninja and it sometimes shows you the errors of your console so it says that each child must have a problem it's right because here we need to have a key of item dot href you know that this is unique so let's form a document no this is my menu and after this menu I want to have a hamburger menu and in order to using it let's close this I want to import icons so let's import something from as time enjoy slash icons the icon is menu icon I want to use so inside of hamburger I simply say menu format that's good the next thing is inside of toggle I want to use a toggle button from Material let me show you that and this here you can see there are a lot of toggle button like this and this and that's good so let's use a toggle button of material UI okay it is imported that's good uh let's use a value of let's say check or anything you want so we need to receive the dark mode and the toggle dark mode because with clicking this button we need to trigger that mode so we need to import the uh required thing so the first thing is of course import you use context because you want to use context let's move this up because it's coming from react and then we need to import our theme context also so important context from this road that's good and here let's say that cons of team context equals to use context of in context no I have access to everything from a document and you know that because it has let me show you inside of context because it has these two options I can de-structure them so let's copy them and instead of in context IDs structure then directly and I say that I have these and I can use them so here in inside of this toggle button I simply can't say that the selected equals to if it is dark mode or not and on change we can simply call toggle dark mode Let's format document and what we need to use inside of this toggle button we need to import two icons let me import them here I want the Sun and the Moon icon so I can use light mode oops light mode and dark mode that's it so inside uh this target I use the conditional rendering and I say that if it is that word you need to render light one else you need to render dark mode and for a document and on change you have toggle that one so let's see if it's working or not refresh okay you know that is working correctly that's so so when I'm clicking on this you can see that it is changing but its color must change so we work on these colors later but you can see that my dark mode is working and also let's go to the global and change this transitioning so inside of that app I see you transition is all three point seconds and is in Alt so it must be much smoother okay you can see that now it is smooth and that's so good so I think that is so good and let's open this now but this side and continue watching on our styling inside of network so do we imported nav or yes important number that is CSS and then we have navbar then we have brand and minuso let's import everything the first thing is navbar and then we have four classes of that brand one two three four we have brand we have menu we have hamburger and we have Target you can see that we have the structure here and we can work on that so for Colors Let's see again what we had here inside of global we use this BG color and text colors and for colors let's copy this line and this line so let's copy them I think background color is okay just let's focus on the color that's it so for our brand be sure use this color and also for this menu or let's have it just inside of there and I think it must work correctly and we will check it so inside of Napa first thing is we need to use flex so let's import our mixins at sign import all dot slash slash makes sense this is the first thing and then we add sign in kiload of the flex and direction would be row and we use a space between and use Center and that's it let's check okay that's so good and for the background color I want to use a color like let's say color like this will work for me and this is a simple color and for your color you can use this vertex color so let's move this up that's good and after background color you can use V top 100 to be sure that it is 100 of its pattern and let's change the height to 60 pixels and also let's have a padding from top and zeroids but it's top and bottom is zero and left and right would be two Ram let's format and see the result okay no that is good uh this time let's change the for no let's change the color to FFF and then we will change it later so for this brand [Music] um let's check everything okay in Spanish is resume management that's good and this and these are svgs so let's work on this menu inside the menu we have the UL and again kilo let's copy these because we want it to be again robot instead of space between it needs to be Flex a start to start from the left that's good and also let's have a gap of one ram and inside of it we have some Lis and inside of Li we have some A's and we say that your color is FFF and your cursor is pointer let's format and see the result okay that's good and now we can use this hamburger menu and inside of it you know that this hamburger movie will vote only on mobile responsive so we say your display is now and also let's change this cursor to point this is vital and also let's use this cursor of pointer for our toggle button and also inside of this toggle button you know that we have SVG so for this SVG we can use the color of variable of Dash Dash below this was let's Okay dash dash below is it let's follow my document and check the results okay now you can see that it has the color of blue always and the color of this section is independent from all of you can see that it is independent from all of our components by the way you can change this but I think this is a good idea to use this color and background color of fix to the nav bar so let's check everything no I want this to be on the right side so let's use Alexa one for this brand and it will gives all of the spaces it has so no that's it and for this target let's have a margin left of one ram that's it okay you can see that how good it is home companies jobs and candidates and now let's see uh okay you can see that we have other fellow on our responsiveness so let's change the responsive problems inside of okay here 580s let's stick to 600 pixels so let's copy everything inside of navbar and work on them inside of our media query so I simply say media of Max with of 600 pixel and paste everything from a document okay now here let's change everything four our number it is row a space between Center I think it is good uh uh color I don't need to change it and background color is good if it is good height is good for just a padding let's change it to 100 from left Android and brand is Felix one that's good I don't need it so we don't want to change everything of it then here inside of menu we need to have some detailed changes so this time this menu can be a column uh it is we feel like the start and Center that's so the next thing is for this let's use again this background color and color to be sure that here after this Gap we use color and background color again format documents so this time the menu has this color and background color and let's say your width is 240 pixels and your height is 100 viewport height and I want to change the position to fix it because this one to be completely absolute and independent from everything and I say your top is zero uh your left is also zero and your Z index is something big like this or just simply say 100 and also let's use a transition because we are working to moving it on left to the side so I say all and again three seconds and is in out that's it so now we want to work on this target let's Okay you can see that this is like this but we have a problem because this is here I want all everything to be centered so the height of this UL here uh okay I think or we can use column Flex start we can use them for our menu and let's form a document and this is for all of our menu let's check okay now we have a problem uh inside of menu we can use column Flex start and Center good background color and color we have them and its width is this that's good top zero left zero and inside of it we have this ul and for this UL let's say the height is 100 percent of your palette format okay no that's much more better but let's change the display of flex of this so instead of UL let's again use this and for it is Colin Bots everything is inside of the Justified content that are in Center no that's much more better also let's use a gap of two RAM and delete this Gap I don't need it so format okay no you can see that home companies jobs and candidates and now I want to show them so this time let's work on the hamburger menu and display is large and the cursive would be pointer on the top that's good so we don't need to change it later and for toggle we don't need to change anything off toggle just for the embed menu we change the display to block let's check it okay refresh now we want to work on this functionality of hamburger menu so let's work on it and go to the here uh let's create a new state for it so do we have a state no let's create use a state and here we say that cons open set open equals to use a state of Boolean of false that's it so this time let's have another function and we say that cons Target open menu equals to again let's use set open of receive state and change the previous state to it's not so for my document now we have this toggle open menu and let's copy this for under your menu is you can say or for this menu we simply can say on click call this target menu format and again we can use Dynamic classes so let's create a cons of menu styles because if it is open one and zero so if it is open your classes is menu open and it is simply menu and let's use this menu styles for my menu that's it so format document and this time here inside of this menu in my media query I simply say that if my menu has class of open you need to change the left so in the initial value let's in open let's change it to zero and in the initial value let's use the left of minus its width so minus 240 pixel format document and let's check refresh okay you can see that how cool it is uh now it is working correctly and if I say home companies you can see that URL is changing but let's close it when we are using this so let's go to the and this Alloys uh copy this on click so I want to toggle everything on my click so for this Lis I simply say and click Target for a document no if I close on any of these allies it will be closed automatically and jobs and candidates so that's so good and it seems that everything is working correctly no the navword is completed and let's stick to our roads and continue so let's close close and go to the app.ts is here we need to create some roads so let's create a page so pages and let's create home and inside of this I create a home Dot Page dot TSX and also home.scss uh uh let's close this app and open this home open to the side and rafce and I don't need this page and this and here let's say that slash home that is CSS in case I want I want to use this class name and simply inside of this home you can use this class name of home and also we you saw that we created a global class which was this content so we can use this and here we say content home so inside of it we need to have some different places for example an H3 of welcome to website and then let's have some VR and then let's have a span with a aluminum of 100 learning 100 for my document that's it so let's go to the app and here we need to import it and use it so let's import the required components from react rotate down I need roads and Roads that's it so let's import roads and here let's have a road for path of the Slash and element of home page and that's it so let's refresh and go to the home now you can see that I have them on that mode everything is changing that's so good no we have home but let me show you a beautiful thing about this home import and it is the improving our performance using lazy loading so in order to use this let me import lazy and suspense you know that we can use lazy loading and when we are using the lazy loading until something is not load it will show us what we want until everything is loaded so let's change this a little and we change these two this is the syntax cons home instead of this home let's comment this and we say const home equals to lazy of a function and we say that this is an arrow function of import and the import this URL using this place so we import this and close this okay so this is my Imports with lazy loading that's it for a document no in order to use this lazy loadings we need to use suspense so let's close everything or it's better to use this suspense up of this road so let's import these suspense and wrap everything inside of suspense the suspense can have a fallback feature and for this you can use anything for example any component you want and when it is loading it will be shown let's create a beautiful spinner for this so let's go to the components and create a new folder named the custom linear a spinner of loader dot component dot TS6 let's go to the here and find our spinners okay Auto GPU idea alert progress I want to use this line here so let's copy this and inside of this okay we need to create the compound this was the name of our folder so this can be let's work on it okay let's cut this and we say custom linear progress okay inside of it let's create custom line here progress that component.tse that's it raf-c-e okay delete delete now let's copy this copy uh in written we use this so box is coming from Material UI let's import them import something from at sign mui material and the first thing is this box and also this linear progress that's it so now we can use this custom line here and inside of let's close this and inside of app for the fallback we can simply use that so let's paste this and this must be a component so let's make it a component format document and now then it is file backing it will use this line here and it is imported that's good now let me show you what will happen when it's refreshing okay you see in a moment it loaded let me show you beautiful thing about it uh I go here and I go to the network and intentionally lower my speed so in 3G you can see that while it is loading and the fallback will be shown that's so good no we have everything of our lazy loading and I think that's good and also for the home page it is enough so let's check it the next thing which is our companies so let's close home and home and go to the pages and create companies folder and inside of companies I want to have companies Dot Page dot TSX and also companies that is CSS and rafce that's good let's close this uh import dot slash companies that is CSS that's it so this is my company so let's import it inside of app so I want to have another one another road uh it's path is slash companies but this time I use this type of row because I want to have nested roads so let's have another road for its index which is just a slash companies and its element would be there companies that's it but these companies you can see that it is loading automatically as ordinary Imports so let's change this so I copy this and I say that const company is equal lazy of importing this and let's delete this and another parenthesis for a document and here let's close this road okay format no we don't have any no you can see that we have a slash companies and here we imported this company is using lazy loading so let's work on these companies component uh before working on these companies because we want to send some request from back in we need some requirements so let's create two different folders we are creating folders because we want our work to be a standard although it may take some time from us but it will help us a little bit to be more maintainable our project will be more maintainable so let's create a new folder inside of SRC name con stats and inside of it we create a new file name url.constance dot t s and I want to use my base URL as a constant so I say export cons uh base URL equals to an extreme so let's grab the code I want my pixel so let's start off project and start that's it so let's get the URL okay now you can see that I have HTTP slash IPA slash candidate or company or job so this is until this API this is my base URL so let's copy this and paste it here and this is my base URL and after this I want to use this space URL everywhere inside of my request so it is the best practice to have an instance of axios in order to do it let's create another folder instead of SRC and we name it to helpers and inside this helper I will create a new file name http.helper or HTTP dot module or any name you want for example http.majule.ts would be much more readable so I create HTTP Dot module.ts and inside of this I first import my axios oops icus from axios uh okay do we have any problem HTTP Dot module.ts what is the problem it says that axios is cannot find module I think we did not install like seriously let's check okay we need to install axios first so let's copy this npmix use uh terminal npmi X use that's it it is necessary now after axis we also need to use our base URL so let's import our base URL does it recognize automatically yes and you can see that no access is recognized that's good so we need to create an instance so we say simply the cons HTTP module equals to X use Dot create and inside of this we can have an object and we can have a lot of configurations you can see some of them I want to Simply use the base URL of the space URL and for a document and then I will export default this HTTP module now I can use this HTTP module and it has the base UI that's so good so let's close it and let's minimize everything ah go back to our companies let's import HTTP module from helpers so inside of my companies I created HTTP modules and now I can use it let's have some states and in order to use a state we need to import them from react use estate okay we say cons of companies set companies requires to use a state of its type and for its type the initial value is this empty array for its type we need to define the company so let's do this and create a new folder again and the name is types and let's create a file of global Dot typing.ts and here we can export interface for our company for interface of by company and let's check the data we need so let's go to the companies try it okay you can see that I'm receiving this object so I simply copy this paste it here and comment it no I can work on it and create everything I want like ID let's say ID is type of string and we have name type of string and size it's type of string and create an ad with type of string and that's it so now we can use I company and the type is I company that's it and a company of array that's so so after this also you saw on our previous project that we can use a loading and set loading equals to use a state of Boolean files and let's use our use effect so use effect and dependencia so this is the inside of this user effect we can simply first use set loading of true and after this we can use our HTTP module.get so it has the base URL and we just need to pass there enter the entire URL after our base URL which can be the company slash gets and after this getting we use and then and that catch so inside then we receive a response and let's change this type to I company array and here we can simply set this company to our state so set companies to response that data and also set loading of files and inside of cache we received the error and we say please alert error this is just tested this is not important for us and also we can log the error and set loading of files that's it so consider that error okay we have any do you have any problem here what he said [Music] cannot find name of error it means error let's format okay inside of this catch I'm receiving this error and okay because we are using more than one comma let's open curly brace format okay no that's true and that's it so let's log our compound it's just one time to be sure everything is right and so inside of my company's refresh okay cannot find X use or let's type difference inside HTTP modules let's go to the HTTP module uh check everything okay access from excuse we don't have any problem here it's refresh cannot find accused or it's gonna mine type declaration foreign terminal and Ctrl C and we're going to start again okay you can see that no we don't have any problem and that's good so inside of companies let's refresh go to the companies okay okay you can see that we have access to them so it's time to work on this and let's close this let's close this global and this so This division will have a class name of of course the content class name of content which is shared and also companies [Music] format document so instead of this let's have a division in top with class of heading and inside of this I want to have an H2 with name of companies and after this I want to have a button to add so let's say this is a button but I want the button to be imported from material so import ant from a slash mui material so this is the button of material and the variant of this button would be outline and on click I want to redirect so let's import the required things import something from reactor and I want to import use navigate that's it and here I say that cause redirect equals to use navigate and unclicking of this button I say on click you must redirect to a slash companies slash at and that's it so here I want to use an icon so I import the icon from material import something from at sign and UI slash icons material the icon would be add and here let's use add and formats document let's check okay refresh okay now you can see these companies and if I click on this it goes to companies at that's a good no let's go to the next part and after this button I have this division of heading and then I want to show the data in order to show the data I want to use a grid which is coming from let me show you uh okay mui data grid I want to use react it again components and in order to use it we need to install X data grid you can see that how cool it is so let's install it's a it's for getting you started we need to install this package so let's open a terminal and CLS and okay let's use npl I mui X data grid to be in a start and while it's installing let's go to the components and here we need to create the component for grid and we use that component so let's see to be installed okay that's nest.no and let's go to the components and create a new folder named companies [Music] okay and here let's create a new component company grid dot component dot TSX okay companies grid dot component dot TS6 that's good and also let's create uh companies grid dot scss I copy the name because I needed Ctrl C uh this is it and also rafce rafce okay no that's it so for the class name let's use companies grid uh inside of this let's check what we need to use so let's see you can see that you can use a box and they targeted which has rows and columns and you can use a state and Page size options and a lot of features so we need a box and they targeted with rows and columns let's do this and inside of this let's change this division to a box of material this is it after this let's inside of this box let's use a data grid which coming from X data grid that's it so we need a rows and the colors okay for this rows if we give this rows from our data of our props so we're seeing a data uh this rows will be this data for the columns we need to Define our columns here so let's define them first and we say call stuff columns which is a type of grid call definition call definition which is coming from this models and this is type of array in this array we can have some objects that would be our rows our columns definitions the first thing is it has a feed what is the name of this field for example let's say ID and after this we have a header align the class name and their name I want to use header name and it is ID and we can have a vid for example 100. let's press Ctrl let's follow document and let's copy them so let's copy them I want to have 4 the first thing is ID the next thing is name size and also created at so fill this id id 100 good name the label would be name and this would be 200 the next thing is size so label would be size and it's width would be 150 the next thing is created at so for the label we can say uh creation time and is with can be for example 200 and we want to use anything else instead of bit creation time so we can simply use render cell so let's go to the next line to be more readable so foreign and we can render products here we want to use the moment so let's install moments npny moment and terminal npmi moment and for it is in a styling so for this render cell use params and we say that okay you need to use the moment it imported that's good you need to use the moments of these products that rho Dot this created ads and format it using this y by y m m and d and that's it so let's format document now you can see that I have all of these fields and these columns would be used here so let's close format document what else do we need we have all of them here and for this because it says that element of data has any types let's create a props I copy this name easily and I say that interface of I companies grid props is receiving a data type is a company array and here we use this type that's it so I think that's so good so I have box and for this box let's have inline style because it has to be uh specific the width and the height of the parent of this data agree so we can simply say that is 100 percent and your height would be 450. uh forget to use this S6 okay and also we have columns and rows and we need to specify the idea of rope so get through ID would be you need to receive the row and roll dot ID and that's it so after this we can use the row height we can change the height of your rows here so let's format document we don't have any error I'll put it here that's so good so I think this is good for now and we'll check it later and because we are using this company's grid just let's use inside that company grid for everything let's use the color of Dash takes color one to be sure that everything is responsive and after being responsive everything is working correctly on at our dark mode so let's go to the companies and here after this heading we can simply use them because I have a loading I say that if loading is true this can show you the structure so if it is loading I just simply want to return a circular progress of material UI with a size of 100 else for this if the companies that land is zero we can simply use an H1 and say no company and you can simply return that view so we can simply use companies grid uh this company it has a props you can see that it is Data so for data we can send it companies and let's form a document so if it is loading show circular progress as if it is length of 0 show no company else use company grid let's check and see the result refresh of ok now you can see that I'm showing the company's grid and I think that's so good so let's work on the stides and let's open these companies split right so this is my company's and inside of companies I have uh dot heading so for the start heading I want to use a flag so let's import at sign import dot slash mixins and here we can use at sign in kilo of the flex of row and space between and Center that's it and alsolette use a Vita 100 percent that's so good so now let's check it refresh okay no companies is here this plus is here and it plus it goes to companies at so let's work on companies at so this company's page is finished and Company grid is also finished now it's time to work on companies ah let's go to the pages inside of companies you can use any Pages which is related to companies so let's import let's sorry create at company Dot TSX it's better to use that page that tses I use rfce and close this uh this so let's go to app.tf6 and here inside of companies let's have another route so this route is nested so for the path we can simply use add for the element this is AD company that's that's good format close it format okay now you can see that it is again the wrong way so let's copy this and we say import ad company const app company equals to Lazy loading of this format document okay now I think everything is good now if I refresh I go to the companies and I press this I'm coming to at company pay and inside of this ad company let's close app okay you know I want to work on this the first thing is we need to have a dto4 creating so let's go to the types and let's copy this and export new interface of I create company dto but I need I need just a name and size and that's it so let's create a new state here because I want to work with the state so const of the company uh set company equals to use let's import use the state and the type would be I create company dto and we need to have a default values so for default values we can have a name of empty string and the size of NTS string and that's it so after this we need to use our structure and use a class name of content and let's delete everything inside of here so this is my content inside of content I create a new div name add company and inside of this ad company let's create an H2O at new company and inside of it I need to have some components of material UI sign enjoy material the first thing is a text fixed so for this text field I want to have some props the autocomplete must be off level of it must be company name uh variant of it must be outline and the name of it can be named if you want to use an either targeted value outside of this you can use this name of name but we can use it or let's do it in line so we say that you have a value and change simply so for the value we can use company dot net and in unchanged we can simply return e say set company to all company must be held and also the name would be e dot Target dot value and let's form a document and see the result okay you can see that this is my company let's copy this text field again quickly for the next times we will copy paste this was the first time you are we are writing this so the next thing is size but in order to use size we cannot use text field because it must be an enote so we can simply instead of this text field we can simply use a select let me show you here so we can use select and you choose them from this so let's copy this form control from here and simply work on it so after this I will use this form control for my document import okay and form label select and then item that's it so for this I don't need this ID and input level would be company size and this is a select and that in this level ID and I don't think ID and the value would be company dot size the label would be company size and unchanged we can simply use this again and this will help so we say e said company or company and this time the size would be either targeted value and format document and we have some menu items so the next thing is small and its value would be a small medium large and change these and this okay let's refresh okay company size medium large smart that's good so after this full control we can use two different buttons so let's create a division of btns inside of btns I want to have some button and the first one is save uh the next one is back but let's create this button completely first so I say you have variants of outline container text I use outline and your color would be primary and we need to have on click so let's create two different uh functions kind of stuff handle handle click save BTN is Arrow function and also let's have a handle click batch between and inside of this pack between we can simply redirect so we need to import use navigate okay it is not recognized from reactor Dom we need to import use navigate so can't stop redirect equals to use navigate and on Android click back we can simply back to the company so we can simply redirect it to a slash companies that's it so let's un save we can say handle click save video no let's copy this button and this button is back variant is outline but it is secondary the color secondary okay and this time we handle clicking format here refresh if I click back within if it goes back and save it in will work on save so I think this is good for now let's work on this save and then click save the end here uh we can press enter to work and first let's check if company dot name equals to mts3 or company dot size equals into string you can simply alert fill all fields that's it and we simply return else we can simply use HTTP module imported okay dot post and what is the root After Base URL we need to send to a slash company s slash create and for the data we can simply pass this company because it is ready and then okay dot we have then and that catch so in then we can simply return the response and we redirect to again slash companies and in catch we can simply log the error but first let's receive the error and you can cancel that log the error that's it and let's format uh I think it is good for now so I mean let's open this to the side let's close this keyword typing now let's work on this ad company dot at company after this company is we can use this file for both of them and we can use vitaf 500 pixels we say that your max width is 100 percent and also let's use another flag so copy and this time you are your direction is column and it starts from top so Flex and start and this is Center that's good and let's have a gap of 100 and also for everything we can simply use the color of where Dash Dash takes color one to be sure that everything is working correctly on our dark mode let's check okay we need to import it so import dot slash companies dot is CSS and let's check okay no that's good so we in companies yes you have two companies let's check company name is zalarding for Test Company size is large safe that's so good but let's change the order so in companies or the company's controller when we are getting everything here I want to get them bit ordering that's order by descending of Q equals to we need to order them by created add that list async okay refresh okay now you can see that on companies I know it's up now you can see that we created this and that's so good so let's go to the next thing and the next thing is jobs for now we created some of our structures so from now we can simply copy paste a lot of things from our previous world so let's close all of these and go through the pages and create a new one for jobs let's see our previous work so we had these we can simply copy them and change them as a as before so for our jobs let's copy this com scss and this file Ctrl C in jobs paste let me show you how what you want to do so refresh rename jobs.page.acs and also jobs.css and we rename everything two jobs so this companies must be jobs at a job that's good this was for this and let's go to the jobs Dot Page first let's change the name of this component so cost of jobs and Export default jobs okay we need you to say use effect okay we need jobs dot CSS HTTP modules okay and I company in fact we need to use a job and we will do it later so button Okay add okay use navigate component grid we need to use jobs grid and we will create it so for jobs we have the jobs and set jobs is user setup not a company it must be I job so let's go to the typing and here let's create them so let's grab the job from here and check the fields we need okay let's copy these objects from here and comment it out okay so exports interface of a job and we need ID which is a string and title of the string okay ID title next thing is level is a string and after it we have company ID uh company name and created that uh they're all let's copy these quickly okay okay okay and format you can see that we are using a quick way to create everything because we are uh using our time so instead of inside of our job I have ID title level and Company ID and company name and created ad and in the meanwhile let's create its uh create job so interface of I create job dto I don't need ID I need Title yes I need level and I need company ID I don't think company name and I don't need this so we created a job and I create job dto that's good no we can use this eye job okay and I don't need this I company anymore and also let's comment this company is great so jobs and set jobs is good loading okay related is okay and use effect set load interesting module.get a job of Slash job slash get and then response get response and set jobs of responsive data set loading okay error okay let's delete this okay this time in this we can say that this is jobs and debug class name of heading is the same because it is a structure in this we can say jobs button variant outline on click redirect to jobs slash app this is AD that's good and button if loading circular progress as if jobs that length is zero no job else we need to create jobs grid so let's do this and in components for this company's grid let's copy this exactly let me show you instead of components let's say jobs so let's change these companies to jobs and let's this to jobs grid and instead of jobs create this is jobs and the rest is the same okay so inside of job grid we have box data okay moment react and a company instead of I company we need to use ijob so this time for The Columns we have some different things and the first thing is id id is exactly the same the next thing is the title it is job title and it can be 500 let's do this uh let's use some of them so the first thing is ID and the next thing is title and after it we have uh level and 150 is good so after level we have company name and the header name would be company name I don't use Company ID I don't need it and this is 150 is good the next thing is the created ads and the header name would be creation time and it is 150 it's good but again I want to use a bring their cell and set inside of it I use a forearms and I receive this problem then I use the moment of pronounce that row Dot created at Dot from now this time I want to use from now and let's delete this and this and format cell document okay id id title title level level company name okay created ad question time and that's it so this is the colors so interface of uh companies is jobs we just changing any company to is data is type of I job array and companies arrays companies grid needs to be jobs grid and data is type of this and box is six of these it's jobs grid data grid row calendar okay okay box and return this so let's form a document you see that how easily we created this job it is from exact same structure so let's use this jobs grid and its data is jobs and formats okay let's check is use effect okay jobs HD module eye job button circular add use navigate jobs grid and let's delete this okay okay content jobs and that's so good so let's check everything go to home okay this is companies and let's go to the jobs and it seems that we need to wrote so let's go to the app uh after this company is let's create another one we can simply copy this it is faster okay control the copy these paste comment comment so this path is for jobs and for the index you can simply use jobs from jobs.page you can see that it is not in the correct format so let's copy this line and we say the jobs is lazy loading of this address delete this okay now we have jobs and for my document now let's check refresh okay this is companies and this is my jobs I have IDE title of senior front and level company name creation time and a lot of things and you can see that here it is a day month year but in jobs it is for example 15 hours ago which is from now the next thing is going to jobs at so let's work on it and now you know that we can simply copy everything from the other file so let's go to the companies uh we have this ad company Dot Page so let's copy this go to the jobs and paste it here and rename this add company to add job Dot Page dot TSX and here we have adjob okay that's good we just need to work on this so at company is a job the first thing is the name of our component so this is adjob and the export default of add job format and we have a lot of things here we don't work on them right now so here we can simply say that job and said job they call you the state of I create job detail you know that we created them so inside of its initial value let's see if we have a title of empty string also we have level of interesting and also we have company ID of empty string let's form a document okay just let's comment this handle click and redirect is good no this time we need to give the companies uh fetch the company instead of this back end so we need to use use effect so let's use effect and because we want all of the companies we need to get list of all companies and work with them but we have done this before inside of our company space so let's simply copy the state of it from here so this is the all of our companies uh I don't need this loading okay we need companies and also we need to disuse this user effect to set everything to this company so let's copy this user effect from our companies after this okay let's import a company okay and I don't need loading so delete this and delete this and format document okay so in this use effect we create this request and get list of all companies and it will be used inside of these companies estate and we will use it so let's go to the structure of here and this is a content and after this this is ADD job so add new job and here the text feed is off and the label is the first thing let's see it it is we have title level and Company ID so here it is for the add new job after this it is job name or job title or any name it can be your title or job name variant is outline good and the value of it would be job dot title and Unchained we say set job to old job you can see that it is same and oops the title is event.targeted value format okay this is the first one after this we have a form control and we need to work on our job level job level but you know that let me show you in Swagger for the job level we have this array so we need to work on this let's copy this array from here copy and here we need to use this array and just use them so before our component let's create const of levels array which is a type of string array equals to exactly this and this must be a string so let's change the string a string string this and this and this format document okay so I need to use these levels arrays uh inside of this form control yeah okay so this would be the job level and the value of it would be the job dot level the level would be job level let's copy you can say that set job of previous job and your level would be e dot Target dot value okay for my document no that's good but inside of them this must be dynamically so let's simply open curly ways to use JavaScript and we simply say level array dot Mac and for each one we have item so for any item we can simply return a menu item the item we had and if every menu item must have the key the key can be the exactly item and it has a value and its value can be the item and also it has a label and the label exactly can be the item so the value and the label is the same string okay let's delete this and this and this so what you have done inside the select we use the level array and we created some menu items and after this we need to have the company so we grab the companies from the backend using this so we have access to backend companies it must be select so let's copy this select uh paste it here and work on it so the first thing is here we need to use our company I know that this can be disturbing but this is a real world project and you need to do a lot of these works on the future carrier so the input level is company and the value is job Dot Company ID and the label would be this company that's it and Unchained we received the E and it's a set job of the job and this time you change the company right to e a Target that value and this time here for these menu items with a map on companies companies that map you have an item for every companies and for everyone we have a key the value is for the key of this menu is item.id and the value also will be writing that ID because you want to save this value and here it would be the item for the title it is item.net so for my document this is it then we have btns of save and backend okay let's uncomment this and check for my document so let's format okay home companies jobs okay do you have any error no roads okay we need the road so let's go to the app and here we say that for add element is at job again this time you know what you need to do so this must be like something like this uh add job is lazy loading off this format document okay now we have error that's good cannot resolve slash companies so let's go to the add job and here it is jobs that is CSS let's delete this okay refresh now we don't have any error that's so so we can have job title job level is interior meters and you run the others and the companies zalarding Amazon Microsoft and if I add another company like test one with medium save do we have access to it in jobs yes this is fully Dynamic and that's so good so let's work on this save and now you know that we have the front end and after this inside of this save we need to First have a validation so we simply say that if job dots title equals to all this so let's completely copy paste it or job the title or job dot level or drop Dot Company ID foreign document okay Java title is empty or job level is empty or Java company alert is use HTTP modular slash job slash create and send the job in response redirect to jobs else consider drug errors and in a handle click go back to jobs let's format document and see the result go to the home companies jobs so Insider jobs I say that I mean level developer of test I mean the job level is mid-level and the company is Amazon save okay mean level developer of test level is mid-level company name is Amazon and creation time is in and over that's so good uh also let's go to the jobs controller and change the returning of it so order pi descending of Q goes to Q dot created add Dot to list of async to be sure that it is okay refresh okay now it is on the top and it seems that our company is working correctly let's change okay we need to work on it companies we need to change the colors later it seems that we have problem okay no problem so after job it's time to go to the candidates uh let's work on the types first so inside of types now we have I company IQ company ijob I create job and of course the next thing is candidates so let's see the structure so let's get uh let's copy one of them command okay no let's create export interface of I candidate um ID uh first name last name email phone cover letter resume URL job ID and job title okay so let's copy you can see that I'm doing as quick as I can so for my document so this is my kind of ID first name last name email phone cover letter resume URL ID and job title Also let's create the last one which is I create candidate detail and I don't need ID I need first name last name email phone and cover letter I don't think there's no URL I need job idea under the job title so first name last name email phone cover letter and job ID so for another document let's close everything and go to the pages so here let's create candidates and let's see the jobs okay instead of candidate I want to have candidates Dot Page dot TSX and also candidates Dot scss and that's it so let's copy everything from here to this and copy everything of the CSS to here so first let's change the CSS this job is candidates heading okay okay uh candidate okay and inside of this candidate let's change this name this candidate and Export default of this and this is candidates and set candidate use the state of I candidate array that's it so we have loading okay user effects that loading through HTTP module of get r this is type of I candidate and here is to a slash candidate get but then we have a response so we set the candidates through response.data and we are set loading okay okay the everything is okay so content candidates and heading [Music] candidates button redirect to candidates slash at an ad and button that's good loading circular purpose or if candidate start length is zero no candidate as we need to use candidates grid so let's create the Grid in components let's copy the JavaScript so let's copy paste this folder and change this to candidates folder and everything related to can this will be inside this folder we simply use a this this candidates candy dates great and let's copy this name okay and follow document and inside of this let's rename to candy dates grid dot component that TSX and let's rename it candidate create candidate no let's work on it so we need to import I candidate from this file and for the columns we need to change it a little so of course we have ID but let's delete this and after ID we can have the first name and it is first name uh let's use 120 and copy this and then it is last name last name and then use email and also let's use phone it can be 150 and 150 and after it you can use cover letter color letter or CV and it can be 400 and after cover letter we don't need to use this resume URL and because we don't need to use created anal you can use resume URL uh their name is download and its width is 150 and in render cell we receive the problems and we can instead of this moment we can simply return an a link so this a link will will be the Lynch and it's href would be let's use template literals let's use the base URL slash let me show you inside of our Swagger for downloading we can use a slash candidate slash download slash the URL so we can use base URL which is a slash API then slash candidate can be date a slash download and Slash the URL and the URL is dynamic so it comes from params Dot row Dot resume URL that's it uh we say the type of view is download yes and for your uh let me show you format document for here you can use a link then this is the I can't delete props and the data is type of I candidate and let's change this okay so you're receiving a data and box okay okay a data grid let's follow a document now let's go here and here we say the candidates grid and your data is the candidates which is this so let's form a document and let's check you can use the things you say okay this is candidates that is CSS HD module okay I don't need a job button Okay add use navigate we don't need job period we need this okay let's check go here home refresh go to the candidates do we have the road no we don't have so let's import it inside of app.ts is so let's copy this simply because we have another nested Road comment comment this is a slash candy texts that's it so for the index you say this is candidates which coming from this page again this time you know that we need to say this candidate is the lazy load variable so oops delete this and the second it's lazy of importing it's from here format no let's go to candidates from home okay companies okay jobs okay candidates okay uh this will go to the end that's good now you can see that I have ID first name last name email phone CV and download so instead of this link let's check it okay it can show you that E9 okay and this one is af9 that's so good it's working correctly but let's use a simple icon here so inside of candidates Gree do we have we no we don't have it so let's import something from Material icons and it is picture [Music] as PDFs okay so let's copy this and instead of this link we can use this okay now you can see that I have I'm using a icon here so that's so good and now this is the time for and for work on the last page which is adding a candidate so you can see that this is empty for now uh let's work on it so let's close everything go to the pages so inside of candidates we need to add another one at candidate dot h dot TSX r a f c e and the better idea is to copying from a job and editing it so let's copy Ctrl R Ctrl C copy everything and here paste it and this is my component so I change it so instead of add job I I say this is at candidate let's copy this add candidate and Export default of I candidate and that's it this is candidates that is CSS and let's go here so this time we don't want to use the levels because it was for the previous page it was jobs and Ctrl X deleted but this time let me show you in Swagger refresh okay for creating candidates we need to send the job ID so we need to use the list of jobs so first let's change this to candidate uh set candidate and then this I create candidate.to and what we need here of course the first the first name an empty string and last name of mts3 also we need to use the email of empty string and the next thing can be the phone with empty S3 and also we have cover letter of empty string uh the last thing is now let's use oopsync alone and the last thing is job ID which is an empty string for no so let's format document this is the initial state of us everything is empty and we don't need this but we need to use the jobs so let's go to the jobs and copy this state and paste it here and import ijob okay and also use this user effect because it is giving the jobs and we need it exactly and let's delete this user effect we don't need it and we need to use okay I don't need loading and it's loading and it's loading so format document now we have access to all of our jobs and that's it also we need redirect yes so let's comment this for now uh the next thing is you know that when we're creating a candidate you need to send the PDF file so let's create another estate uh after these jobs we say const off PDF file and set PDF file equals to A use state and this user State have a file or not so in the initial it is null then it can its type can be a file so let's format document no we have this candidate and set candidate then we have this PDF State and we have jobs estate and also we have this navigate then we have this user state that gives all of the jobs and set them to the jobs array which is the state of jobs and then if you have these two we work on them later so let's have them and this and this we have redirect to a slash candidates when we click on bank ptn so really direct to a slash can the dates that's good for a document okay now let's work on our structure and then we will configure all of our save button so what we have inside of this create the first thing is I have content then I have the class name of ADD can D date and after it let's go to this instruction add new Okay add new Candy date after this I want to have a new uh let me show you here first name last name email phone cover letter and job ID so it is better to First select our job so I can simply delete this I don't need it and let's cut this and minimize okay so this is a full control and here I say that this is for my job so select this value is my candidate.job idea of course that's good the label is the job and Unchained you say that said candidate you can see that the structure is the equal but there are just a little changes on the names so it will save the previous candidate and we say the job ID is either targeted value for my document and here instead of companies we can say that we have the jobs jobs.map we have some items and the key is this item.id that's good and value is the idea of the item this item is a a job that's so good and here we don't have the name we say that item dot title would be shown so this is for my form control and after this form control we can use first name last name and the others so the next thing is this text field of the first label is first name the variant can be outline and its value can be candidate that first name and unchange let's copy all of these from here we say set candidate all candidate and the first name is either Target dot value and we have a lot of them like this so let's copy after first name what do we have we have last name of course so this can be last name variant okay value is candidate dot last name Unchained set candidate of candidate and your last name is either Target dot value let's form a document and copy again okay we have first name last name after the let's see first name last name email phone cover letter so first name last name okay this was first name this last name the next thing is my email variant outline value is email and also here set candidate of candidate an email is this and after email you saw that we have phone so phone this is phone and also here it is form that's it and after it we had cover letter so after phone we can use cover letter uh CV or cover letter or any name you want this is cover letter and also here it is cover letter so let's form a document and now we have all of them but the last thing is Let's see we have first name last name email phone cover letter and job ID the job ID is this phone control and all of them are here but the next thing is the file so in order to use it we can simply use an input tag the type would be you can see that we have the type of file and unchanged we can simply receive the event and say that sit there PDF file of event Dot Target Dot files of zero the first item of this array and that's it but it seems that's for a document it seems that we have problem it says that recently the object integrated file is possibly null okay no problem we can simply copy this and we can say that if events.target that files exist use event.target.file of zero and use not and for my document that's good so the next thing is btns okay okay okay that's it so I think we have everything we need right now now it's time to work on this click save so let's uncomment everything no you have a lot of themes like the first thing is okay let's delete everything inside of it to be quick and you can see that we have first name last name email and a lot of them so we can say that if candidate Dot first name equals to the empty string or now we can copy them easily so one two three four five one two three four five so we have first name and oops first name uh last name email phone email phone you can see that I'm using a simple validation after phone we are cover letter and job ID so cover letter job ID or not PDF file we also check that PDF file must not be not so if anything if any of them is true alert field all fields and return and we need to send them to the back end but because let me show you inside of swagger this time you are using multi-part formulator because you have we want to send everything to the candidate control layer here and on post off create we're receiving them from four so we need data of four and also here you can see that this value are coming from multi-party slash form data so I'm not using a form a tag inside of this component and simply you can create a new value let me show you const of my new for data or new candidate form data this is a form data of JavaScript so we can have form data inside of JavaScript and we have new form data dot append so we can append a lot of things to it so the first thing is first name so we can simply say that your first name is candidate DOT first name okay one two three four five six seven so one two three four five six seven the next thing is last day so append last name and candidate last name also email phone that's good and cover letter job ID and also we can use this PDF file so the PDF file would be this file and we are sure that it is uh not now because we checked that here so now we have this form data now we can send this form data to our backend so the HTTP module.post is slash candidate slash create and new candidate form data and here on success is redirected to a slash candidates and format document on Cache okay okay so let's test let's go here and go to the can the home candidates create okay we import it no we need to import it so let's go to the app.26 and here instead of inside of candidates we need to use at candidate and you know that it automatically Imports like this but let's change to the lazy loading so and candidate is using this address so we are in lazy load e and it has better performance let's delete this and format documents now we have a document so let's go to the home and candidates refresh okay let's add another one okay first let's say Okay fill all of it thanks so the job is one of them you can see that this is dynamics of mid-level developer team lead with seven years okay first name is test111 email is test at test.com phone is a number need Okay Siri I am developer a testing and let's change this to multi-line so let's go to the cover letter it is it and we say that this is a multi-line because it can be a multi-line text so let's refresh okay anything .com phone this number and CV hello I am a developer test and let's add a file for example from Drive F I choose this one okay and safe okay it seems that we save that you can see that I have a let's go to the candid controller and change the order okay so before these two lists let's cut and dots or thereby descending of Ctrl Z what is the problem okay order by descending of Q goes to Q dot created at dot to list of AC save refresh and talk now let's refresh now we can see that it is here up and if I say download okay it is zero nine four e and let's test on document PDF okay zero nine four e that's good it is saved and it seems that everything is working let's save another one uh in fact let's test everything from the beginning so on companies I create final test Company the company size is large safe okay it's safe and let's go to the jobs in jobs let's create another one job title is test final job for this company and job level is CTO the company is final test company save okay no let's refresh to be sure we have the test final job for this company with ideal Force Level is CTO company name is final test creation time is in an hour and let's create an candidate for it so let's add okay job is test final job first name is Mama test last name is this to email is at test.com phone is class nine eight nine eight nine eight five five five five cves I am a full stack developer and also a YouTuber [Music] hope this video helps you to be a better developer good luck and choose a file for example this file and Save and it seems that it's working correctly but we can use a a greater read for Siri so let's go to the grid of my candidates let's close everything components candidates so for the Civil cover letter let's change this to 500 okay that's much more better now you can see that it is creating and it's on the top because we changed the order and I think our project is finally completed and let's check just the uh dot mode you can see that it is okay in companies it is not working correctly you can see that this is right but the color of these are not right so let's go to the grades and check everything so the first thing is companies great so let's go to the components companies and companies gear so here we're saying that in company is great for everything we have the color of variable let's use this directly let's copy this here uh format document and see if it's working or not no why it's not working you have companies grid box okay we don't have the import so let's on the top import let's copy the file name quickly okay and that slash this let's refresh okay you know you can see that the problem was not importing so we don't need this we don't we can use this or this or no difference so for my document and refresh okay you can see that the problem was not importing so okay okay for jobs again we have problems so let's go to the let's check all of them so let's go to the components for candidates okay do we have imported it no so import dot slash this for companies do we imported this yes and for the jobs jobs grid do imported it no copy import dot slash now let's check so go to the home and companies okay okay ad companies it works jobs okay candidate okay at candidate okay everything is working correctly and also let's check for the final time the responsiveness okay you can see that I have this response you go to homes okay go to the companies you can see that this is also responsive and jobs so good and candidates so good and also responsive and to talk more so it seems that let's close like this this and this and this and this it seems that everything is working correctly and this was a relatively long video but we covered a lot of stuff inside of this video so I hope this video helps you leave some comments for me and hit the like button and subscribe to my channel and let me know if there is any opinion or any comment you have thank you have a good time and goodbye

Channel: Dev Empower

Views: 16,440

Keywords: .net 6 api, .net 6 web api, asp net core web api, asp.net 6 web api, asp.net api, asp.net api crud, asp.net api tutorial, asp.net core api, asp.net core api crud, asp.net core api entity framework, asp.net core web api, aspnet core web api, dotnet core web api, dotnet core web api tutorial, entity framework, rest api asp.net core, react js tutorial, asp.net, react js, full stack react project, .net core, web api, asp.net core, .net core web api, resume, asp.net web api

Id: AiwzQMupPsU

Length: 243min 38sec (14618 seconds)

Published: Sat Mar 25 2023