Angular 12, .NET Core Web API & PostgreSQL full-stack app

Install Visual Studio using the community version, free for education, run the installer, and select dot net and web development, dot net desktop development, or dot net cross platform development.

Install Visual Studio Code, a popular lightweight code editor from Microsoft, and use it for front-end web development.

Install Postman and prepare to test the redBus api using Postman as part of the Angular 12, .NET core web api and PostgreSQL full-stack app workflow.

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

Install Narges as part of setting up the full-stack app and verify the installation by checking the version.

Create database objects on Azure's Postgres server, establish department and employee tables with auto-increment id, names, department, date of joining, and photo filename, then insert and verify records.

Create a dot net project in Visual Studio, review dependencies and packages, and explore controllers for API methods, program, startup, and dependency injection that configures services and request processing pipeline.

Enable cors by default and set json serializer as default, importing the required namespace and installing a package if needed. Run the project to verify the sample controller output.

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

Develop department APIs for an angular 12, .NET Core Web API & PostgreSQL app by creating a department controller and implementing get, post, put, and delete methods.

implement and test employee detail application programming interface methods by creating an empty controller, cloning and adapting from the department controller, and validating get, post, put, and delete operations.

Create a post method to upload photos, save them to a configured photos folder via dependency injection, and return the saved file name, with a default anonymous picture on error.

Install Angular CLI globally, create a new Angular project with routing and default styles, scaffold components, integrate bootstrap, and run the app to auto-compile and refresh in the browser.

Enable routing for a three-page angular app by creating home, department, and employee components, wiring them into a navigation menu, and configuring routes to reflect /home, /department, and /employee.

Display department data in a bootstrap table by calling the get department API, refresh data during the component lifecycle, and render edit and delete actions with bootstrap icons.

Open a modal popup to add, edit, or delete departments using a single shared model, binding the department name and title to variables with deletion confirmation.

Complete employee screen by reusing department page, add employees array with name, department, date of joining, and a profile picture path from environment file; display image with bootstrap flex.

Learn to upload an image with a button, append the first selected file to form data, save, and update the file name to display on screen.

Implement sorting and filtering for a two-department dataset, define filter inputs and a backup array, and create a filter function using includes and a text box for asc/desc sorting.