React JS and .NET Core Web API Full Stack Master Course

Build a full stack app with MongoDB for the database, .NET Core backend, and React frontend; implement API endpoints, routing, Bootstrap tables with sorting and filtering, and image uploads.

Install Visual Studio community edition, free for education; select workloads like HP, dot net and web development, dot net desktop development, and dot net cross platform development, then click install.

Install MongoDB Compass, a graphical user interface used to connect to a server and create and manage database objects.

Install the Mungindi B Driver to work with Magleby, then create a models folder with department and employee models (department idy/name; employee name; date of joining and file name).

Install the routing npm package, create three components (home, department details, employment), and configure routes for /department and /employee. Import components and models, then verify routing works.

Create an api endpoint file and import it into the department component, fetch department data to populate apartments, and display it in a bootstrap table with edit and delete icons.

Copy and adapt the department component to build the employee details screen, with form fields for employee name, date of joining, department, and profile photos from variables.

Implement sorting and filtering for the data grid by creating filter inputs and a backup data array, using includes for filtering, and a sorting function with ascending/descending options and icons.

Create a dot net core web api project in visual studio and review dependencies, controllers, and startup. Configure services with dependency injection and understand the program entry and request pipeline.

Implement and test employee details API methods by creating an empty API controller, reusing the department controller logic, and validating get, post, and delete operations.

build a file upload api that saves photos to a designated folder using dependency injection, returns the file name on success, and returns a default anonymous picture name on error.

Implement a bootstrap modal popup to add or edit departments, with a dynamic title and textbox, using post requests to create, update, and delete departments with confirmation.

Implement the image upload: add a button to choose the file and attach the first selected file, updating the photo filename variable.