Angular, Ionic & Node: Build A Real Web & Mobile Chat App

Install the Angular CLI globally, verify Node version, and use ng new and ng serve to build and run an Angular project with components, pipes, and directives.

Install mongodb community edition by downloading from mongodb.com, create a data/db directory on your chosen drive, and start the mongod server from the command prompt.

Discover Angular CLI basics: ng new, ng serve, ng generate, and ng test, plus dry-run and force options to scaffold and preview components efficiently.

Explore the Angular folders by looking inside the app folder, assets, environments, and configuration files, and see how TypeScript, styles, linting, and dependencies organize a real chat app project.

Install prettier to automatically format typescript and javascript code, create a .prettierrc with 120 print width and formatting rules, and install the editor extension to enable format on save.

Install the Materialize CSS and JS package via npm, then configure and import it into your project to use its components inside your Angular, Ionic, or Node app's component classes.

Create sign-up and login components, add encryption to those components, and apply material classes for the form fields in this section.

Create two modules: an authentication module with sign-in and sign-up components, and an auth routing module wired into app routing with a default route.

Learn how to modify the authentication tabs for login and sign up by adjusting responsive grid classes, simplifying top tab components, and updating related css and titles to reflect changes.

Change tabs color in a real web app by modifying the active tab class and applying global CSS styles to update the background color and ensure consistent tab appearance.

Create a NodeJS folder for the backend and add it to a single workspace with the frontend. Manage front-end and back-end code together to streamline building the chat app.

Install cookie-parser and morgan as dependencies, require them in the Express app, and configure them for development to enable cookie parsing and request logging as groundwork for authentication.

Add express body-parser middleware to parse signup and login data, test endpoints with Postman, set data size limits, validate inputs, and plan password encryption.

Learn how to implement jwt authentication in a web app by signing tokens with a secret, detailing header, payload, and signature, setting expiration, and protecting routes.

Display and differentiate error messages for user input in the chat app, handling both backend validation errors and frontend validation to show specific messages.

Create and integrate a token service using NGX cookie service in an Angular, Ionic app; install, import, and provide the cookie service, then set, get, and destroy tokens.

Display the user image and name on the streams page using responsive image tags, placeholders, and CSS classes for a functional toolbar navigation in an Angular, Ionic, and Node app.

On the streams page, build side-by-side post form and post display components within a responsive grid, enabling real-time posting, likes, and comments.

Implement jwt token verification as middleware for protected routes, handling cookies and authorization headers, decoding and validating tokens, and returning clear errors for expired or missing tokens.

Update user post array shows how to update a user's posts when a new post is created by pushing it into the posts array via async/await.

Decode the token payload by splitting the token on dots, base64 decoding the payload, and extracting user data like email, username, and expiration for display and validation.

Learn to emit a socket.io event named refresh to trigger post list updates across all connected clients, and listen for that event in the posts component to refresh posts.

Learn to test socket.io real-time events by emitting new post updates to rooms and listening on the client to update the feed instantly without page refresh.

Implement a like post feature by handling user clicks to increment likes and sending post data to the backend, updating the post array and total likes via routes.

Implement a like feature by adding a dedicated route and controller for liking posts, incrementing the post's like count by one and returning a confirmation message.

Learn how to create a route to fetch a single post by id, use find by id and populate with user and comments, and handle not found errors.

Display comments for posts using services and observables, render post data with comments, images, usernames, and times in a structured ul collection.

Check if a user has commented on a post by reusing the like-check class on the post page, then update the UI to reflect comment status across the stream page.

Style the side components by adding stars, changing icon colors, and highlighting the active link via a router link active class, with fonts and weights adjusted for readability.

Explore building real-time streams features by displaying top streams based on likes, enabling follow actions, and in-app notifications with live updates and controls.

create a new service to fetch all users via the /users route, populate their posts, and handle responses to display synchronized user data in the chat app.

Implement the follow user method by validating the follower and the followed, checking whether a follow entry already exists, and pushing a follow request into the following collection.

Learn to fetch a single user in a web and mobile chat app by id or username, via routes for get by id or by name, with related fields populated.

Learn to implement a single user service method to fetch data by id or by name, connect it to the user component, and validate results in the browser console.

Learn how to determine if the logged-in user follows another user by searching a collection with find, handling true/false results, and updating the follow button state accordingly.

Learn to implement an unfollow user service method in a real web and mobile chat app, removing the user ID from the following list and exposing backend routes.

refresh the followers component to automatically update the following list after follow/unfollow actions, ensuring real-time display of updates. demonstrate the changes through user interface tests with updated follow status.

Update and send push notifications when a user follows someone, configure default values, and display notifications in the app's component to enhance real-time engagement.

Explore building a notifications component in HTML, styling list items with avatars, messages, and timestamps, including read/unread states and material icons.

Select and implement a notification button using icons, mark notifications as read, delete individual notifications, and pass data for mobile interactions using notification IDs.

Learn to display top streams by filtering posts with a minimum total likes, increment likes on interaction, and reuse post components to render top posts.

Display user data in the side components, showing posts, following, and followers; fetch data via a user data object and service, and render conditionally based on available posts.

Create two components—a parent charts component and a child message component—and wire them into the streams module and routing, configuring a charts/:username route.

Hide nav content on chat component by toggling the display of top elements after the view initializes, updating the chat and toolbar components to hide user info.

Build the message header with a card layout, avatar image, user name, and online status, while handling responsive line wrapping and background styling.

Build a real web and mobile chat app using angular, ionic, and node. Learn to display message content, structure chat UI, and implement a send-message flow with a database backend.

Create and wire the message routes and a send message endpoint in the backend, handling sender and receiver IDs to enable chat functionality in the real web and mobile app.

add a chat list array to the user schema that stores recipient user id and message id, referencing the user and message collections to track conversations by sender and receiver.

Learn how to retrieve route parameters, such as a username, using activated routes in Angular. Subscribe to the parent route's param map and read the parameter value.

Prevent empty messages by wrapping input checks in conditional statements to block sending when the message is empty, then test by clicking send to verify no message is sent.

Create a new conversation by adding sender and receiver IDs and pushing participants. Save the conversation, then create and attach the first message to it.

Continue building the chat feature by composing a send and receive workflow, constructing the message body and conversation id, saving the conversation, then sending new messages or handling subsequent messages.

Update the chat list array by pushing sender and receiver message IDs, using the push operator and the each operator to place IDs at position 0.

Update message documents by locating them with the conversation ID, pushing new messages into the message array, and ensuring the send succeeds before displaying the updated chat.

Implement the get all messages method to fetch chat messages between a sender and receiver using their IDs, and test the service in the console.

Demonstrate implementing a typing indicator by toggling a typing flag (default false), showing 'receiver is typing' for active users, and stopping it when typing ends across clients.

Provide a message dropdown link that navigates to the corresponding chat page for a selected message and marks it as read when opened.

Update the chat list method to move new messages to the top of the dropdown by deleting the entry and reinserting it at index 0 using the update operator.

Remove unnecessary comments and tidy the server file for the real-time chat app. Move required statements to the top and correctly place routes and NDB config for cleaner, functioning code.

Install and integrate the ng2 emoji picker in your Angular project, import the module into your streams module, and address backward compatibility by installing rxjs-compat for Angular 6+.

Learn to add emoji content to a real web and mobile chat app by displaying selected emojis in messages and wiring updates to energy-related components.

Select and display emoji icons in chat, automatically sending them as message content and saving icons in the database for reuse, with updates to the content view.

Configure message routes with get and post methods to map, retrieve, and pass values to the database using the gate method, while reading sender and receiver from the request body.

Learn the message aggregate method (part 2) for a real web and mobile chat app, implementing per-user message updates, read status toggling, and test flows with refresh events.

Add user class part two removes a user by socket id, updates the global user array, and retrieves the remaining connected user names for the room.

Explore how to use the ng changes method to detect and display changes in a component, leveraging the on changes lifecycle and the SimpleChanges parameter.

Add an online status icon to the people component by implementing an isOnline check and rendering the icon when a user is online.

Learn to implement image upload from frontend to cloud storage, display and set default images, attach images to posts, handle password changes, and notify users when profiles are viewed.

Learn to implement image uploads in an Angular Ionic app by installing a file upload module, importing it, using a directive with file selects, and handling onFileSelected for the backend.

Learn to use Cloudinary for image and video uploads, sign up for a free account, access the dashboard, get API key and secret, and integrate with Angular, Ionic, and Node.

Demonstrates uploading an image to Cloudinary, validating the response, and retrieving and displaying the uploaded image using its object data (public key, signature, format, size) in a web/mobile chat app.

Display user images by fetching and subscribing to the user's image data, and render them in the image components. Support uploading new images via sockets and allow setting default image.

Click the set default image button to replace the profile image by passing the image id and image version to the backend service, updating the display across the app.

Display user information across tabbed views by configuring top elements, avatars, and conditional content in the view components to show and hide content as users navigate.

Retrieve a user's data by name using activated routes, subscribe to route parameters, and fetch and display the user's posts in an angular, ionic & node chat app.

Display tab followers renders a list of followed users from the following array, showing each user’s name and profile image or placeholder, with links to view posts and profiles.

Explore how the logged in user posts tabs navigate to the user view via router links, displaying the login user’s information, posts, and following data from the user data set.

Creates a change password component and wires it into the routing module with an icons/password path, enabling users to access and update their password via the link.

Explore the html change password component, including a form for current and new password, paste-ready css classes, and client-side validation that updates the page and changes the password when valid.

Test sending images with messages by attaching a random image to a post, verify cloud storage upload and image id, and compare posts with and without images.

Get the user location using an IP geolocation API, extract city and country names, update the user documents in the back end, and display these details in posts and profiles.

Install Ionic and Cordova globally, set up Node and npm, and create a new project folder to add the Ionic project into the workspace.

Create the home page for a real web and mobile chat app by applying lazy loading and proper module configuration in an Angular/Ionic project.

Learn how to use the nav controller push method to navigate from the login page to the register page, pushing pages onto the navigation stack and returning with back button.

Copy the login page setup to the register page, adding link, username, email, and password fields with styles, and adjust navigation with a back button and header borders.

Explore Ionic storage in a real web and mobile chat app by installing the storage module, creating a storage provider, and using set and get operations with remove.

Implement a loader in an Angular, Ionic & Node chat app by importing the controller, creating a loading indicator, showing it during registration, and dismissing on success or error.

Create an Angular http interceptor to attach the authorization token from storage to every request header, register the interceptor, and implement the intercept method.

Create a comments page and navigate with push, passing the post object as a parameter, retrieve it on the comments page, display comments, and submit new ones to the backend.

Add comments to posts by wiring a comments method with post id, implement two-way binding for input, and display recent comments first via the provider, updating the view after submission.

Check if the current user has liked a post or comment using a user object and a check method, and use the energy class directive to reflect the status.

Learn to upload a post image by handling empty fields and image presence, then send posts with or without images to the backend and test on a cell phone browser.

Hide the top tab bar on the login page by detecting the top elements with querySelectorAll and setting their display to none, also applying to the register page.