Node, Express JS, Angular 12 & Mongo DB web app development

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

Install Postman to test the redBus service, enabling you to send requests and verify responses during development.

Install Mongo DB Compass to connect to a server using a graphical user interface, and learn to create and manage database objects.

Install node js and verify the installation by checking the version to ensure a ready development environment for node js projects.

Create a database and two collections in a free atlas cluster, connect via the connection string, and define department name and employee joining date and profile picture file name.

Set up a back-end project with Express and MongoDB by following three steps: initialize the project, install Express and body-parser, and run a basic GET endpoint on port 49146.

Install MongoDB, set up a connection string, and define the database name to connect your Node backend to MongoDB, then confirm a successful connection in the log.

Learn to implement api methods for the department and employee collections in a Node, Express, and MongoDB app, including get, post, put, and delete endpoints.

Implement a server side file upload for profile pictures using express-fileupload by creating a photos folder and saving uploaded files there, returning the filename to confirm the upload.

Enable CORS in express by installing the cors package, learn how it allows cross-domain requests, and follow best practice to whitelist domains in production.

Debug a message parsing issue in the front-end project by applying a quick fix that changes the response start for messages.

Install the Angular CLI globally, create an Angular project with routing and a default stylesheet, then add bootstrap and run to auto-compile and refresh in the browser.

Create three components for home, department, and employee pages, configure routing with /home, /department, and /employee, and implement a navigation menu to verify seamless navigation.

Bootstrapped bootstrap table displays department data by calling the get department API, storing results in a data array, and enabling edit and delete actions with bootstrap icons.

Use modal popup window to add or edit departments, reusing same model for adding and deleting, with the title sourced from a variable and the department name bound to input.

Create employee details screen by reusing department page, add an employees array with name, department, joining date, and profile picture; use departments dropdown and env photo path with bootstrap flex.

Add an image upload button, retrieve the first selected file, append it to form data, save updates, and display the new file name on the screen to confirm data updates.

Implement sorting and filtering for a two-department web app by defining a filter function that accepts a property name and a boolean for ascending or descending, using the includes method.