Full-Stack app with Angular 12, Python Django & PostgreSQL

Install Python from the official website, add to PATH, verify the installation from the command prompt, and confirm the installation was successful.

Install Visual Studio Code, a popular lightweight code editor from Microsoft, to support front end web development in this full-stack course.

Install postmen and use postmen to test our redBus within a full-stack app built with angular 12, python django and postgresql.

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

Install Narges and verify the installation by checking the version. Use this hands-on step to set up a core tool for full-stack development with Angular 12, Python Django, and PostgreSQL.

Install Django and required modules, create a project and app with manage.py, register the app in settings, and run the server to view the Django template, then configure allowed hosts.

Create two Django models for europe: state department details and employee records, and connect to a PostgreSQL database, run migrations, and seed initial data.

Create serializers to convert model instances into native data types for rendering as json, xml, or other content types. Perform serialization to convert parsed data back into complex types.

Build department API methods in Django using serializers and models to handle get, post, put, and delete requests, convert data to JSON, and test via the running server.

Implement an upload file API to save the uploaded profile picture, create a dedicated folder, and use the default storage module to store the image and verify the API works.

Install the Angular CLI globally, create an Angular project with routing, explore the root component and index, add Bootstrap, and run the app to see changes in the browser.

Define routing for a three-page app by creating home, department, and employee components, wiring them via a model file with http client and forms module, and configuring navigation paths.

Set up a bootstrap table to display department data, fetch via the get department API, and refresh in a lifecycle method, with department and department name columns and edit/delete buttons.

Create a reusable modal popup to add or edit departments, with a title bound to a variable and a text input for department name, plus confirm delete and update actions.

Build an employee details screen by reusing the department page, add an employees array, enable profile pictures with Bootstrap flex, and include a department dropdown and date of joining.

Add an image upload button, retrieve the first selected file, and append it to form data. Save and update the displayed file name to verify image upload and data updates.

Develop sorting and filtering for two departments by defining filter inputs, a backup data array, a filter function with includes, and a text box that triggers ascending or descending results.