The Social Media Project | Full Stack Web App Using Asp.Net Core Web API | React JS | SQL Server

hello everyone this is manoj welcome back to my youtube channel in today's video we will create a complete project based on react.js asp.net core sql server and the project name is social network if you can see on the screen so it will be a college social network project where users can register and login into the system and that will be that will go for an approval to the admin once admin will approve then they can log in and once the student will login or users will log in then they can write a post using the text title and they can also upload images now we will also have a news feed that the news will be added by the staff so whatever news they will add so on a page whatever news we have in the database so we will publish that and you students or users can view that after that that again similarly to the registration process this post will also go for an approval to the admin once admin will approve then only that post will be published on the article page and admin will have all the 30s like he can he she can check how many users are there how many posts are there how many articles are there if he or she want they can disapprove or approve any post or any registration at any time also admin can create staff employees so staff can view the user profile also they can post some events whatever event is happening nearby them or in the college or school so this is the overall project idea so we will try to complete this entire project through react.js asp.net core and sql server all right so before starting the actual implementation of front and back end projects let me give a quick overview of the end result so this will be our actual end result so this is the login page and from here we'll do the registration and once you do the registration then you will come to this login and let me log in with any user so once you log in you'll come to your login your user dashboard and from here you can add a new article you see i have already created some articles and from here you will create your news and your news will come over here and let me log out and now let me login with admin so now it will go to admin dashboard you see in admin dashboard we have registration management article management if i click on registration so so far we have two users one is this second one is this and both are approved from admin panel and similarly we have two articles so whatever article that user will post they will come here for the approval and admin will approve it same admin can create news from here also admin can create a new staff so let me log out now let's login with staff so staff will check the user information only so in the staff login we have a registration so here staff can see all users who whoever registered so far in the system so we have three kind of logins one is admin one is user and another one staff so this is login page and this is the registration page so this project we will try to achieve by our application all right so let me close this so far i have created a new react.js project if you see here so this is the new dxgs project and i also created a dot net core web api project if you see here this is the default file and folder structure and now let's go to sql server so i have created a new database called social network all right now let's open the requirements so we'll start from the database so first we need to create some tables which will hold the record or you can say the details of these modules all right so the first one is registration so let's quickly create a new table so create table registration in this table we will have a id column and let's make it auto increment one by one also make it primary key and name worker let's copy this email password phone number is active and finally is approved so in the registration table we will have our incremented id column name email password phone number is active is approved is active means if there is a record with is active value one that means that is an active record and if the exact value is zero then it means that record is not active and the student or user will not able to login is approved means that is for admin purpose all right if is approved 0 then still student or user cannot login when it is approved and the value is one then user or student can log in all right so let's select and execute this command first so our station table is ready now paste it again so now once user logged in he or she can write post all right so now we need to create a table called article so article in the article will have id and title after that content and after that we also need email of user who created or who is creating that post or article and after that image and is active is approved all right it is active again zero one for the active or the active record is approved for admin purpose so select this execute all right now in the requirements user can float okay users can be news feed okay let's create a new table news and title content email from news let's remove the image and also remove this is approved that's here created on date time so our news table is ready and finally we also have registration this is admin login okay staff can also post event so let's create one more table events so events id title content email is active created on all right so let's execute this so now we have created all the necessary tables whatever required now select star from registration article news and events all right so our tables are ready now go to visual studio now we'll try to create the apis first of all let's add a new folder add new folder and name it models and inside this first model we will create as registration so right click add class name it registration inside this we need some properties so first property would be id and another property is of string type that is name let's copy this another one is for email password phone number is active and is approved and save similarly right click class article let's copy some properties from here and we will change the property names so id is there title content email image is active is approved all right same for news right click add new class news copy article properties and paste so id title content email is active created on we don't have image is active and created on okay we don't need this created on all right save this article also last model for the database events let's copy all the properties of news because all the properties are same as news so id title content email is active okay save let's add one more class for response we need to pass some response to the front end to the rxgs project so here first property should be status code that's copy paste and another one is for status message and we also need list of registrations give it a name list registration we will also need list of articles so copy change the object let's copy paste list of news list of events save and we also need one more registration class so registration so we are done with our response class now right click on the controller part add controller api controller add first we'll create registration controller registration add all right now the first thing is we need to create a object of i configuration class so private read only i configuration control dot so we need this name space and object configuration and now we need to create the constructor of this controller so ctor then hit tab copy paste change the object and here underscore configuration is equal to configuration save now we also need to include one more namespace sql client so first let's create a api method so http post that is for registration let's also create a route and route is registration public response control dot we need this name space social network dot models because this response class is in models folder public response registration and that will take registration class as parameter so registration now response is equal to new response and finally return response save so now let's create a sql connection object for that we need a namespace she's using system.data.sqlclient so connection is equal to newsql connection ie configuration dot get connection string dot tostring so here we need to give our connection string name perfect save let's also create a new class called dell so here also we need to use some namespaces so using system dot data and one more system dot data dot sql client now public and let's create a response class so public response registration and that will take registration class as parameter also sql connection response response is equal to new response and return response so now sql command cmd is equal to any sql command here we need to give a query so insert into registration so having to give the properties so name email password phone number is active is approved values registration dot name let's copy this and another one is for email so registration dot email another one is for password phone number and by default is active mark one and is a proof zero all right so and finally the connection object so our command is ready now connection dot open enti is equal to cmd dot execute non-query so this command will execute our command at sql end and after that connection dot close and if i greater than 0 it means if this record gets inserted then we need to return a response as status code 200 response dot response sorry status message is equal to registration successful and that's it and copy and if the record is not there in the database means if there is any error so in that case we will return the status quo as 0 sorry 100 and registration failed save go back to registration controller now create object of this dial class so in time sorry response is equal to dial dot registration and here we need to pass two parameters first is station second one is sql connection done and finally we will return response so our registration api is ready save again go to dal now let's create another method for login so this will also take registration class because we will pass if you see the registration class we will pass this email and password from the front end from the react project all right so here also this sql connection so now sql data adapter da is equal to new data adapter select start from data station table where email is equal to registration dot email and password is equal to registration dot password and finally the connection object so adapter is ready again data table dt is equal to new data table da dot fill dt so let's also create a response class object is equal to new response if dt dot rows dot count greater than zero means if we have any record which matches with this email and password then we will return response as response dot status code is equal to 200 and response dot status message is equal to login successful and we also need to create a registration object because we will pass all the user details to the front end so registration equal new registration let's create this inside this block and registration dot id is equal to dt dot rows 0 because we will also will always have a single record we cannot have multi duplicate or multiple records for a single email all right so id we need to create it so convert dot 2 in 32 because this id is having data type is integer all right so registration dot name is equal to convert dot to string and dt dot rows 0 and the column name which is name let's copy this and let's also return [Music] email let's copy paste and finally response dot registration is equal to registration so if we have any record which match with these email and password then the response will be 200 login successful and the data of this particular user who is trying to login all right in the else part let's copy these two lines copy paste and also this registration so in the else part if there is any error so then it means login failed and we will pass registration class as null so save and finally return response save so our login api is ready perfect go to registration now let's create a login api so http post and let's create a route login and public response login registration [Music] registration let's create okay let's copy everything from this registration paste and instead of this registration let's pass login all right so save so our login api is also ready go to the requirements so we are done with registration and login now we need to create an api for the approval all right so here in the dial let's create public response user [Music] approval all right so here we will have a user id if you see registration so this id we will pass from the front end whenever admin will try to approve any user all right so here response response is equal to new response and return response so sql command cmd is equal to new sql command and now we need to update this table if you see the registration table once we have data so based on this id we will update this is approved all right so update registration set this value is approved okay is equal to 1 where id is equal to which we will pass from the front end registration dot id comma connection and is active equal one so that that user should be active only then that will get approved otherwise not so our command is ready now connection dot open and i is equal to cmd dot execute non query connection dot close save and now if i greater than 0 means the record gets updated then we need to return a response so response dot status code is equal to 200 and response dot status message is equal to user approved save sims copy the response and in the else part let's say if we get any error or by any case this record will not get approved then in that case we will return status as hundred user [Music] approval failed save so go to registration now we need to create an api so that will again for http post not patch post route and user approval that is the route now public response let's copy the same name and registration registration and in the body let's create a response class return response save so here first let's create sql connection we already have copy paste and dal is equal to new del and response is equal to del dot user approval first parameter registration class second parameter is sql connection save so our approval api is also ready go to the requirements so you can write post upload image all users can view news feed okay now we need to create api to insert news and to get all news so in the dal so public response news and here we will use news class and sql connection connection response response is equal to new response return response so first we'll create to insert unused so sql command cmd is equal to new sql command connection object so now we need to write the command so insert into news so in the news we have title content email is active created on values so news dot title let's copy this and content email is active for exactly make it one always and created on the current date for that we have a command get date that's a inbuilt function of sql server so that will take the current date time and save it in the table so our command is ready connection dot open entire is equal to cmd dot execute on query connection dot close if i greater than zero then response dot status code is equal to 200 and response dot status message is equal to news created copy else news creation failed save return response similarly let's create one more method for that will return all news so that will only take sequel connection and response response is equal to new response return response so sql data adapter new data adapter comma connection object and here we will write this command so select star from news where is active equal one so all active news will be published on the front end data table dt is equal to new data table and da dot fill dt save if dt dot rows dot count greater than zero else if there are records in this data table then we will fill a list list of news is equal to new list object and here let's create object of news table news is equal to new news and news dot id is equal to convert dot 2 and 32 dt dot rows okay before that we need to create a for loop so entire is equal zero i less than dt dot rows dot count i plus plus so let's cut this and paste inside this for loop so here we will pass the index as i and id again new start title is equal to convert dot to string dt dot rows i and title copy paste paste so after title we have sorry for news we have content okay content and he sorry email create is active created on created on okay go to first we need to change the conversion it is activist and let's go to news and let's take one more property for created on so we will also display the date whenever the news is created so save save after that lst news dot add this news and after this for loop if lst news dot count greater than zero then response dot list news is equal to lst news save and response dot status code is equal to 200 response dot status message is equal to news data found else 100 no news data found and null save same thing copy from here and paste it here save so our newslist method is ready now go to registration controller and for that let's create a new controller called news so on the controllers folder add controller api empty news so go to this controller and copy this configuration class paste also the namespaces and change this to this controller the constructor all right so first we will create api for to add news all right so go to here and let's copy this registration paste change this down to add news copy paste so this will take news as parameter and we will pass news let's make it add news copy paste so we are done similarly let's copy this paste newslist so change newslist new list and this method will be a http get save so our add news api which is post and newslist api which is get both are ready save sorry here we need to change the get sorry news list for newslist we don't need any news parameter save so we are done with our news also go back to the requirements so we also need to create article all right so in this dal save first let's copy this sorry because we will use the same kind of code article ad article so for this we will [Music] save data in this article table so title content email image title content email and one more column is image so copy paste and is active is approved okay so copy this paste and this will take article class article so article dot title article dot content article dot email and we also need article dot image and this active is approved so is active one also make is active as zero save this is integer we don't need to pass in single quote save all right so in the add article so we are done with the command so here instead of news article save and now copy this news list and paste so this will be article list save so now in the article list we will have two scenarios one scenario let's say i am a user i created one article so when i go to my articles page then i could be able to see the articles whatever i have created another scenario is we will have a separate article page will we will see all the articles irrespective of any user all right so for that purpose article list we will use article so go to article class and let's create one more property type save so go to dal so here we will check if article dot type is equal to we will pass this type from the front end so let's say user then we will change the command or if article type is page it means this is for the article page so we will pass this page so let's copy this paste it here cut so initially data adapter is null and pass so if the type is user then it means some particular user is trying to get the article list all right so copy the article name copy and here from article article where email is equal to article dot email so we will pass a logged in user email so it will only return his or her articles all right otherwise if the request is coming from the article page then we will return all the articles all right so save so here we need to change type let me also check from news yeah news is okay so here we also need to change this article okay give it a name art copy paste so article id title content email is active and what is the next field title content image image okay so list article dot part and if list article dot com greater than zero then response dot list article is equal to lst article else particle data found no vertical data and in the spot list article is equal to null perfect save so we are done with our article list and also the add article part all right let me recheck article article article perfect save so we are done with our dell class methods now go to let me close these classes go to the controller right click add new controller api api empty and will create a new controller as article save go to newscontroller copy this paste change the constructor copy the namespaces replace and similarly first we will create a new method for to insert article so that will be http post and route add article public response ad article that will take article class and now response response is equal to new response return response so now first of all sequel connection is equal to new connection i configuration dot get connection string name of connection string that is social network con dot to string so our connection is ready now create object of del class del is equal to new del and response is equal to dal dot add article and pass article object and sql connection object save let's create article list api so that will be again http post because we will pass some parameters from the front end so for that route will be article list public response article list let's copy this object so response response is equal to new response and sql connection connection equal new sql connection i configuration dot get connection string sn con dot 2 string and del is equal to new del response is equal to del dot article list article and return response save so we are done with the api of add article and article list perfect go back to the requirements so user is station login add article and okay user can view feed that is also done rejected okay so now we need to create an api for these articles yeah to approve or disapprove okay save here so let's copy this method paste and change it to article approval so here we will pass article class and let's copy the article name and update article is approved where id is equal to article dot id that idp will pass from the react project done and in the response article approved or article approval failed safe so article upload is done okay now go to registration and let's copy this user approval go to article approval and paste it here instead of user approval change the name as article approval so that is our article approval api so response response and article approval that will take class as article so copy this copy paste so our article approval api is also done save go back to the requirements so registration approve and also the post approval okay admin authority okay you can delete faculty okay staff can view okay staff and faculty are saying send why okay we will not cover this because this will be done for sms okay without sms we will try to done this so admin can create faculties okay so let's go in the registration so do we have any table for faculty we don't have any table okay so as of now staff can post okay let's have a table for faculty paste call it as okay staff so id name email password phone is active we don't need this is approved because admin is creating it so name email and password okay phone number is also not required for this so create so our staff is created go to visual studio in the models right click add new class staff and let's copy some properties from here paste so we have id name email id name email no need for content also no need for image password is approved password string is active no need for type id name email password is active okay save go to dal copy this registration method paste so name it staff registration so now we need to insert data in the staff table so name email password name email password remove this also is approved change the class as stuff staff dot name staff dot email staff dot password done save so copy paste stop registration successful staff registration failed another registration let's copy this paste and copy this name staff registration change it and here we will need this staff table sorry staff class so change it and pass this as a parameter so done so we are also done with staff registration let's go to the requirement now admin login authority you can do it faculty so okay now admin can also delete the faculty so let's create a method to delete the faculty so let's copy this paste delete staff so delete from staff where id is equal to staff dot id and that id will pass from the front end and is active is equal to 1 we have is active all right so save stuff deleted successfully staff deletion failed so save go to the registration copy the same api paste change the name as delete stuff delete stuff and here also change the method as delete stuff perfect so our delete api is also ready save go back to requirements staff can view user profile okay and can post event okay now we need to create api for event so let's create before creating api go to dal so add article in article list so we need these two same methods we need to change some [Music] properties so that would that will be for add event and instead of article let's pass the event class and copy name as events insert into events title content email title content email is active created on is active created on copy paste all right so even title event dot content even dot email and is active is one and for date pass get date method so save for success event created for fail event creation failed and now create a event list method so that will for that we don't need any and we will create a get api for this so let's delete this we don't need any condition for this so select star from events where is active1 all right and we need to change the class as events save event event okay eb ent event that's the object okay that's a inbuilt keyword so we cannot use it so change till here so id title content email is active and created on okay to event oh we don't have this let's copy from news paste and created on copy and paste list even dot add event and if list even dot com greater than zero and here instead of list article pass list events and here list event paste events data found no even data save paste and list event list event list event save so our event list is ready article list article article um paste same let's check for news news news okay done so our dell methods are ready so save now let's save this class also go back to which function is this events okay so let's create a new controller add controller api empty go to news controller copy this paste change the constructor and copy the namespaces paste and here let's copy both these apis and paste it here let's change some properties so add event add event event list event list save add event ad event event list event list save add event event list so here add event and here event list save we need to change the parameter as events save done now go back to requirements so so far we have created a user registration and login api also we have created approval api for admin login once user logged in yeah we have created a ad article also get articles with image feed post individual user correct and will be approved reject by administer approval also the same approval for the post admin can create faculty add delete faculty and staff can view profile perfect and post event yeah so so far we have done with our database part as well as our api part now if you have a look on the solution explorer so in the controllers we have created one two three four four new controllers one for article one for events one for news and one for registration and in the models folder if you see we have article class we have events class news registration response staff and also we have a dial this dial class will communicate with the database part all right so we are done with our api let's try to build the project so ctrl shift b let's see if there is any error so build started so we'll succeed it perfect so there is no error in our web api perfect now let's go to our react.js project so now we will try to create our components in this folder all right as we are done with our web api part so let's go to visual studio and now we'll start working on the front end part so so far i have created a new rxjs application so in the source folder let's create a new folder and name it components and let's create our first component which is for registration registration.js and let's create a react object and function registration and export default registration return dev save now for registration and login let me show you one website so this is the link i'll also mention this link in the video description so mdbootstrap.com so on this website you will get a lot of registration and login templates so you don't need to work and write your own code so let's say if you want to use this template so click here show code and copy this html and paste in your project so there are a lot of templates whatever you want you can simply use it so i'm using this one all right so let's save this and go to app.js so remove this header part and import registration component save perfect go to browser so our template is ready in the table we have id name email password phone okay we don't need this username so let's go to registration and let's remove this username this and div save perfect now we need to create some states so let's use use state and const name set name use state copy this second one is for email set email password and last one is for phone number phone number phone number okay so save now let's copy this set name first go to the name field so here we need to give a event on change and on the event change event set name e dot target dot value so copy this and paste it for email and change this to set email perfect similarly for password so set password and for phone number so set phone number save and for this button we need to create a on click event so on click pass event and we'll create a handler as handle save so copy this let's create a click handler so handle save and e not prevent default let's try to console all these values first so console.log name email password phone number save go to browser let's try to give any name password one two one two three four five phone number anything and submit open developer tools so we have name manage email password and phone number perfect so we are able to get the values perfect now go back to visual studio code now we need we need to use a post api so for that i already installed a package which is axios if you see here i have installed this package so let's import axios first so import excuse from axios and here first we need to create a data so const data is equal to so name name go to web api and in on further registration if we go to this class go to definition so we need to create these properties so name as name email email password password phone number phone number so save our data is ready small phone number this state variable phone actually now axios dot post so first parameter will take the url so we'll create the url and next one it will take the data so pass data dot then result const dt equal result dot data and finally for catch console.log error so save go to web api project try to run this project so we'll get the api endpoint so let's copy this urls because this is our base url const url equal and after that we need the controller name which is registration so after this api slash registration and then the method name so in our case we will use our routes so our url is ready so copy this url and use it here so let's save and try to put a breakpoint over here and go to vxgs project phone number is not defined okay so line number 13 oh we don't need this remove save so let's try to give any data let's say i'm giving my details we're at gmail.com password12345 phone number four five four five four five four five submit so we are successfully landed on our web api project if i hover this registration so you see email is virat name password phone number perfect so let's try to go ahead so if you see the response registration successful perfect so let me continue this will manage the message first of all let's go to visuals to sql server and try to execute this command select from registration perfect so our first registration is successful okay so here let me remove the breakpoint and let's open developer tools and let me change the user as virat11 [Music] and virat okay and go to network submit so in the response so we are getting the status quo 200 status message all right so we will use our this object so go to react.js and here alert first of all if dt dot status code equal equal 200 then alert dt dot stick this message else or let's alert this message without any condition so go back to browser again let's try to submit registration successful go to sql server again try to run the same command perfect so as of now ah there is no duplicate validation so we'll apply it but our registration is working perfect after this we all we also need to clear these fields so go to vs code and let's create one method as clear set name blank set email blank set phone number blank string and set password blank string and will clear will call this here so clear email sorry this is for name email and password phone number save submit okay so you see all the fields has been resetted and if i go to sequel so we will get some registration details perfect so registration is working now let's also put one button here to go to login so go to vs code and copy this paste login save and here and then login const and the login window dot location dot url is equal to login now we need to install one more package which is react router dom so let's close the terminal now npm i react router long so now we need to create some route so in the app.js will create some routes so that by following a url will go to our respective components so package has been installed so here let's remove this logo so import from react router dom so the first thing is browser router as router routes and route so here first router and inside this we will use routes and inside routes will create our route so route path this and element is this registration same let's also create one more route for login and let's create one more file new file login dot js so import react from react function login return div export default login so similarly as i shown you here same thing we have for login if you check this url so we have pre-developed so many login templates so whatever template you want you can simply click on the show code and copy paste i already have one so let's paste it here inside this div paste and now run this application so npm start so our application is running so this is the default route and if i give this url sorry login okay i need to change this route we need to import our login components so copy and paste it here save now you see our login component is ready perfect so now we'll try to implement the login functionality over here so go to vs code in the login first we need to create some states so const email set email use state let's copy and paste password set password save copy for email on change set email e dot target dot value copy this on change event and paste for password and set password save and on sign in button let's create on click handle login let's copy this event name and create it so cons handle login e dot prevent default so const data and for data go to web api for registration if i go to this registration class so first property is email so email and we also need password so password save let's import axios from axios and here axios dot post let's create a url let me copy the url from here and change the method as login so change this login so the first parameter is url second is data dot then result const dt is equal to result.data and alert dt dot this status message and for error console.log error save perfect now go to browser and refresh this so let's use this email and also this password click on sign in so login successful if i change password as anything sign in login field perfect so you can see our login is also working let's try with this email login field because password is incorrect let's copy the correct password sign in login successful perfect so our registration and login both apis are working so let's go to vs code again now we need to create dashboard one is for this user one is for admin and in the components folder first of all let's create a file for routes so i'm giving name as router page dot js so here we will create our all routes so first statement is import react from react and export default function router page so here we will now create our routes so return now let's import browser router and other important properties from react router dom so react router dom and browser router as router switch route so here router switch and now we'll create a route so route path this is for default route and for this we'll use our login component so let's copy and paste and this is for registration let's copy and change the path as registration save let's import these components so import login from login and import registration from registration so save in the app.js js let's remove this login from here and use router page and delete this login so import page from components and router page so save now if you see this is for login and if i add registration here okay we need to give a keyword exact so if i refresh this so now we'll go to our registration form perfect so our routes are working now here let's create some header files and dashboards for each role so first of all let's create a user header dot js so inside this will create a navbar where we'll place our links like add article add news all right so for that if you search bootstrap never templates so we'll go to this website and here similar to our login and registration templates so we'll get a lot of navbar templates so you can copy whatever template you like all right i have already created one so let me use that so this is user header code this is pretty straightforward so we are having a single state for user name and we on the use date means on component load we are setting our username as whatever we are getting by this key username if you go to login so if we are getting a login as successful if user is valid then we are setting the user name on this local storage similarly we are getting it here from get item so by get item we need to pass a key in our case we are using this key username all right and this username we are using here welcome username all right so this is our user header let's create a new file for user dashboard dot js and here we'll use that user header page so import react from react and export default function user dashboard return and here we'll use user header so save similarly let's also create header and dashboard for admin so admin header dot js and admin dashboard dot js so let's go to user dashboard and copy in the admin dashboard we'll use the same thing need to change the file name only so from admin header and this will be admin dashboard and let's use this admin header save now go to admin header so this is the code for admin header and this is the same as user header now let's save and try to create some route so let's go to router page we need to create routes for these pages so here user dashboard and here let's use the component user dashboard and here admin dashboard and change it to admin dashboard and if you go to admin header we have created some links so again go to router page.js so user dashboard and admin dashboard save if you go here login so we are sending to this admin dashboard if it is admin and else it is user so save go to chrome and let's try to execute this command so so far we are having two users one is admin one is for user so let's try to login with user sign in so you see we are having two links here add article news these links will not work because we don't have any corresponding component for this you see welcome one of the this is coming from our local storage all right so this is user dashboard log out and now let's try to login with admin admin so in admin perfect welcome admin so we have four links sorry this link will not work as we don't have any component so this is for registration article news and stuff okay so let's try to work for this registration list so we'll create a component which will show all these user details on a list all right so go to vs code and let's try to create a new route first so let's copy and from admin header let's copy this name registration list and also paste the route will create the same component as registration link so component right click playstationlist.js okay i already created this code so let me copy paste it here so this is our registration list so we are using a variable called data so if you see this api let me go to web api project and in the registration controller so this api will return all the registration list and if i go further in the dial file so here we need to pass a user type so on this admin part on this as ad registration list we only need to display the users data all right so if you see the payload so we are passing user type as user and this is a post call so once this api it will get success then it will return the list of registration so let's save this and playstation list is not defined okay we need to import it on router dot page so let's import registration list so let's save now go to browser you see on this link we are getting a single user if you see the registration table we are having two users but user type user is only one this is admin so we are filtering it at the web api end so we'll only display users data all right now we need to display the article management the article list so if i try to get article data so select star from article select star from article so as of now we are having two articles all right so we'll create article list over here as of now there is no component so nothing is getting displayed on this page so go to vs code so we need to create a component right click here and article list dot js so this is my article list data so similar to registration list here we have a variable data and here we are getting the article list from the api so once we get the data we are setting this variable and from this variable we are populating our table using map method okay so this is very simple now go to router page and let's create a new route for article list and change the component as article list save go to browser you see we are having two articles and both are already approved if you see the is approved property so both are is approved all right see i am i am only showing you because i have already done this code but if you still need any problem any confusion regarding this project so you can comment me in the comment box or you can connect with me on my instagram so i will help you with this project all right so this is very simple the same thing i have done many times in my previous videos so if you see this table this is a simple map method nothing else and this is a very simple and straightforward use effect and this is a simple post api okay so this is our article list and now if i go to this news management so for this news management we will use two apis one to insert data another one is to get data all right so let's go to vs code again and now we need to create a new complex so let's create a new file news.js paste save so now if you see on this page let's create a route first and then we'll see on the browser news you save go to browser so you see we have two fields one for a title one for content now go to vs code in the news component if you see from the beginning we are having two states one for title one for content and this is for to retrieving the list from web api so again this is simple use effect on page note we are hitting this api and we are getting data and setting in this variable same as regis registration list and article list and if you see handle save this is when you click on the save so whatever text you will put for title and content that will go with this api and will store in the database all right this is again very simple both are post calls if you see here sorry this one is get to get the news list and this is for post so here we are passing three properties title content and email this email will be useful when you will try to filter data which user has created the news all right same now come to the html part so this add news this this is the html form if you see here this is the heading and this input is for title this input is for content and this is a save button so very simple html code and on this um click event handler we are calling handle save which will responsible to hit a post api and save data in the database all right and below that we are having the same table as we have in article list and registration list and based on our data we are mapping our properties and displaying on the browser so very simple so this is about news now for the staff again first off we will create a staff member from admin panel and will show a list all right so let's create a new component for staff so right click new file staff dot js so this is our staff code this is very much similar with the news same thing in the news we are sending two properties title and content to the database through web api here we are sending three properties so that is almost same as news if you see here we in this form we have three fields name email and password and below that we are having two buttons one is for save one is for reset and below that form we are having a table to display the data all right let's save everything and go to router page let's create a new route for this so from here let's create a route staff and change the component as staff save go to google chrome so you see on the staff we are having some form so let's try to add a staff here just staff added click on ok so we have a new stop over here and if i go to sql and if i go to sql and select star from registration so we'll have a new user with staff all right so our staff is working so from admin and we are done so let's try to log out and create a new registration and let's say dinesh karthik and thenesh gmail.com one two three four five one two three four five six seven eight nine zero submit form so registration successful if i see here so we have a new user but that is approved is zero if i try to login with this user so it will say your approval is pending so let's try to log in so you see registration is pending for approval okay so let's open another browser so we'll see both the roles parallely so here let's open the same url as local host 3000 so let's try to login with admin and if i go to registration management so you see dennis karthik and for this dinesh we are having that button enabled as mark approved let me click on so it says approved if i click on okay see already approved now go back to sql and refresh this as of now it is is approved 0. so if we select the data again so is approved one now if i again go back to google chrome and if i try to log in with the same credentials so now it will allow me to login so that login approval functionality is working as expected now in for the user will create ad article and news ad form all right so for add article so we'll create a new component so go to vs code and here we'll create a component so right click on component and create a component with the name user article.js and close other tabs so this is my article page code same we are having a state data to return all the articles these are form states title content file name and this is to upload a file this is to get the list that is same to same as registration list and article list and staff list for admin nothing is changed except this api endpoint this is for upload image and once we get the image then it will again hit the add article api to store the article all right so let's open the router page and create a new route for this so let's save and give it a name user article and here user article save let's go to user header and see what is the link name here okay user article let's copy and paste it here small a so save go back to chrome so you see for add article we are having a form and we are having a table so let's try to add any article so test article and let's choose a image okay go to pictures okay desktop okay let's choose this image and test title details save article details save click on ok so you see we have a single article here created by dinesh not approved all right now let us go to sql server and execute this command select star from article so we are having article from dinesh so i am logged in as dinesh so i am only able to see my articles so if you see these two articles these are created by this user so we also have a user email id based based kind of filter now we need to get it approved so go to admin panel and click on article management so you see total we are having three articles but two are already approved so we see already approved and this is the recent article which we just created so let's click on mark approve so it is approved now again go back to your profile and if you refresh it so you see approved perfect all right now for news for news the code is same to same as admin so all users can view news feed posted by individual users so for news we don't need any kind of approval all right so go to vs code and create a new component and give a name mynews.js save so this is the same code as admin news all right so let's save go to google chrome and refresh we need to create a route otherwise we'll not able to see any content so go to router page and let's copy this route paste and here we need to change the component as my news and go to user header and copy the path and give it same path save go to google chrome so now you see user can add a news also he or she can view news the same part if i go to admin panel so let me create a new news let's say cricket news paste you see we have a new news here and if i again go back to your user panel and if i refresh so you see so news are independent if i create news from here so user news save so you see user news and if i go back to admin again and refresh this so i'll get the user news also so these are independent entity so anybody can see the usernews so that's it about this project so from this project what we have learned we have learned how to create a web api if you see here we are having so many things in the api project and this is a dot net core api and from the react and we have learned how to create routing how to create different components how to use that axios external api for using our web api and react.js project also how to create post api how to create gut api and how to use bootstrap in your react.js application one part is missing that is for your kind of homework so for staff you need to create a login and similar to this user you need to display a registration link over here so that is for your duty see the requirements so staff can view user profile so you need to create a user dashboard here sorry staff dashboard staff header and inside that user staff dashboard you need to create a registration link here and you need to display our users data means this data everything i have done so far you just need to think and copy paste the logic that's it nothing else you don't need to write a single word from your own you will get each and everything for staff module from these pages all right so this is about today's this full stack development project which is called social network actually i got this requirement from one of my student and i delivered this project so i thought i should be created a video for you people so that you can see and learn so many things from this project so this is about this entire video again if you are working on your final year project or if you are doing an internship and you are facing any kind of difficulty problem issues then you can contact me on my instagram instagram and is open programmer and you can also email me you can find my contact details in my channel description all right so i'll see in the next one thanks for watching take care bye

Channel: Manoj Kumar

Views: 21,699

Keywords: react js, .net core, react js and .net core api, crud app, crud app with react js and .net core api, rest api, api, web api, asp.net, asp.net core, ASP.NET core web api, rest api .net core, rest api Asp.Net Core, rest api demo, rest api crud operations, crud operations in asp.net core, full stack development course, full stack development, full stack developer, asp.net core crash course, react js crash course, crud application in react js, Asp.net core web api with React js

Id: ljhfoWV4h9k

Length: 127min 25sec (7645 seconds)

Published: Fri Sep 16 2022