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 Visual Studio Code, a popular lightweight code editor from Microsoft, and set it up for front-end web development.

Install Postman and prepare to test the redBus API, enabling hands-on API testing for the full stack course.

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

Install Node.js and verify the installation by checking the version. Confirm a successful setup by running a quick version check in your environment.

Connect to an atlas cluster with the connection string, create a database and two collections—department details and employee details—and insert data, including joining and profile picture file names.

Create a new .NET core project in Visual Studio, review the dependencies and controllers, and understand how the program, startup, and dependency injection configure the request pipeline.

Enable CORS by default, disable cross-domain request blocks, keep the decent serializer as default, install a new package, import the namespace, and run the project to validate controller output.

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).

Develop and test department screen APIs using EPA methods, dependency injection to read settings, and implement get, post, and update operations on the department collection.

Implement and test employee details screen APIs by creating an empty API controller, copying the department comptroller contents and making changes, and validating get, insert, update, and delete operations.

Implement a post file upload API that creates a photos folder, handles the first form-data file with dependency injection, returns a default anonymous image on error, and confirms successful upload.

Create a React JS project using the command prompt, inspect the default template and index file, observe the app component render at root, and install bootstrap to style the heading.

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.

Open a bootstrap modal window to add or edit departments, bind fields to variables, post new department data as JSON, and support update and delete actions with grid refresh.

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 image upload by adding a file chooser button, creating a form submission, and updating the photo filename; test by adding an employee and verifying the delete button works.

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.

Learn to build a full stack app from scratch using Postgres for the database, with a backend and React frontend, including routing, sorting and filtering with Bootstrap, and image upload.

Install Visual Studio using the free community version for education. On setup, select dotnet and web development, dotnet desktop development, or dotnet cross platform development, then click install.

Install Visual Studio Code, a popular lightweight code editor from Microsoft, ideal for front end web development.

Install Postman and learn how to use it to test our redBus application, aligning with the course's full stack approach.

Install Bjurman to connect to PostgreSQL and create the necessary database objects, and set a master password on first login.

Install Node.js and verify the installation by checking the version to ensure a successful setup for the React JS and .NET Core Web API full stack master course.

Create database objects by setting up department and employee tables, insert sample records, and verify data using sql to prepare the app's data layer.

Create a dot net project in visual studio, explore dependencies and packages, controllers for API methods, and the program and startup configure services and the request pipeline.

Enable cors by default and keep the decent serializer as the default. Import the namespace, possibly install a package, and run the project to verify cross-domain requests and controller output.

Create a models folder and define a department model with fields department, i.t., and department name, then add an employee model with fields employee name, department, and joining.

Create department screen apis by adding an empty controller, using dependency injection, and implementing get all, post insert, put update, and delete operations; test with postman.

Implement employee details api by creating an empty api controller, copying from department comptroller, and testing get, post, put, and delete methods.

Create a post API to upload photos, save the form file to a photos folder via dependency injection, and return a file name; on error, return a default anonymous picture.

Create a React JS project and set up the app with command prompt, inspect index.js as the root rendering component, and install Bootstrap with its stylesheet for a Bootstrap heading.

Set up routing with an npm routing package, create three components (homepage, department details, and employee), configure routes for department and employee, and verify the routing works.

Create an API endpoint file and import it into the department component. Define state via a constructor to display department data in a bootstrap table with edit and delete options.

Use a Bootstrap modal popup to add or edit departments, with a dynamic title and a name field, plus create, update, and delete actions refreshing the grid.

Build the employee details screen by reusing the department component, adding fields for name, department, date of joining, and a profile photo, with dynamic image paths and dropdowns.

Implement the photo upload method and add a file choose button to attach selected file, updating the photo filename. Test by adding an employee and verifying the delete button works.

Implement sorting and filtering on the data grid by creating filter inputs, a backup data array, and a sort function driven by property name and ascending or descending.

Learn to build a full stack application from scratch with a database, backend API endpoints, and a React frontend, including bootstrap table with sorting and filtering, routing, and image upload.

Install Visual Studio by running the installer, choose community version free for educational use, and select workloads such as .NET and web development, .NET desktop development, and .NET cross-platform development.

Install Visual Studio Code, a popular lightweight code editor from Microsoft, used for front end web development.

Install Postman and learn to use it for testing the RedBus API, preparing your workflow for the React JS and .NET Core web API full stack master course.

Install MySQL Workbench, connect to a medical database, and create the necessary database objects for data management.

Install Node.js and verify the setup by checking the installed version to ensure the environment is ready for full-stack development.

Create database objects by setting up a base schema with department and employee tables, defining fields, inserting records, and validating results via select queries on Azure Database Service.

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.

Enable cross-origin requests by default, configure the JSON serializer as the default, install the required package, import the namespace, and run the project to verify the sample controller result.

Create a models folder and add a department model with fields for department, it, and department name, followed by an employee model with fields for employee name, department, and joining.

Learn to build department screen APIs by configuring the database connection, creating a department controller, and implementing get, post, put, and delete endpoints using parameterized queries and dependency injection.

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.

Create a React JS project from the command prompt, run it to view the default template rendered in the root, then install Bootstrap and add its stylesheet and bundle script.

Set up routing with an npm package, create three pages (home, department details, employment), import components and models, configure routes for /department and /employee, and verify routing works.

Fetch department data from the API and render it in a bootstrap table with edit and delete options. Use map to display records and a refresh method triggered on mount.

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.

Copy the department component and modify it to build the employee details screen, rendering the profile photo and date of joining from variables, plus department dropdowns.

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

Implement sorting and filtering on the grid of department details by creating filter inputs, maintaining a backup data array, and enabling ascending or descending sort with icons.