Build Messenger App and Charge Client for Each Message

Install Node.js and Visual Studio Code, then use the terminal to install Node modules and run the server to start building the messenger application.

Initialize the messenger project by creating a messenger folder, running npm init, and opening it in Visual Studio Code; then install dependencies and set up an express-based server.

Build the server back-end with express by loading the express module, creating port 3000, defining a home route, and starting the server with a console log.

Configure Express to serve a home page using a template engine with Express Handlebars, creating views, layouts, and Handlebars templates to render messages.

Get about route: learn to create an about page with handlebar template in express, using the get method and render to display content and restart the server.

Use the nodemon module to automatically restart the express server during development. Install it as a development dependency and set up a contact page with routes and templates.

Learn to style your messenger app with Materialize CSS, a responsive mobile-friendly framework, using the CDN and Handlebars partials to build header, logo, and navigation.

Build a contact page with materialize css featuring name, email, and message fields plus a submit button, and link the messenger logo to home and to about and contact pages.

Learn to handle forum submissions with express by creating a post route for /contact-us, parsing the request body with body-parser, and saving user name and email data into a database.

Install the Mongoose module, define a schema with name, email, and message fields, create a collection via a Mongoose model, and export it to use in the server.

Set up a mongo db for the messenger app by creating a cluster and configuring access. Load credentials from a keys file and connect with mongoose, logging success or errors.

Learn to save contact form data to a MongoDB database using mongoose, creating a new contact document from request body data (name, email, message) via the /contact route.

Fetch data from MongoDB by querying the contact collection to display all messages in the inbox, render each contact's name, message, and date using handlebars templates, and handle empty results.

Set up an express static folder to serve client-side assets like css and javascript by creating a public folder and linking styles and scripts to the dom.

Create a user model with a Mongoose schema that includes name fields, full name, profile image, and a wallet defaulting to zero, enabling Facebook-based sign-in for the messenger app.

Enable Facebook authentication with the passport module, installing and loading it for logins. Retrieve the Facebook app id and secret from the developers page and configure localhost:3000 for development.

Set up passport middleware in an express-based server to authenticate Facebook users. Install and configure cookie-parser, express-session, and passport.initialize with session handling.

Learn to implement Facebook authentication in a messenger app using passport-facebook, configure the strategy, serialize user, and save profile data (name, email, image) to the database.

Configure the Facebook login flow using passport, request email, display name, and photos, and handle success or failure redirects to profile or home.

Authenticate Facebook users and save their profile data to MongoDB by creating or updating a user document with Facebook ID, full name, image, and email.

Fetch user data from MongoDB and display it on the profile page after authentication via Facebook, rendering the profile template with the user’s image and full name.

Set up global variables with the Express module to create a global user object accessible across files, enabling login with Facebook and planning access control for login state.

Implement access control by creating a global user object and conditionally rendering navigation and panels (home, inbox, contact) based on whether the user is logged in.

Improve the messenger app by implementing access control, a chat inbox, and a wallet-based model that grants two default messages and charges for further chats.

Learn to implement a fixed navbar on top that stays visible while scrolling, and test the contact form submission within the messenger app project.

Introduce Google authentication for the messenger app, add a Google login button beside Facebook, and configure the Google client ID and secret in the Google Developers Console.

Configure a Google developers project, enable the Google Plus API, and generate a web app client ID and secret, including OAuth consent and localhost:3000 redirect.

Install the passport-google-oauth20 module, configure the Google strategy with the client ID and secret, load keys, and serialize Google users into the local user model.

Implement a Google strategy to fetch a profile object and store the user’s Google id, full name, and image in the database, creating a new user if needed.

Display user data by fixing profile picture sizes from Google and Facebook logins, using substring and indexOf to strip the size parameter from the image URL.

Display all users by replacing the home icon with a group icon using materialize icon, and prepare the UI to render the user list in the next lecture.

Fetch all users from the MongoDB collection, then render them in the users template, displaying each user's full name and image.

Apply UI style to the messenger app by refining the profile page, adjusting image sizes, and building responsive forms while enforcing access control and login for user data.

Fix access control by enabling guest contact without login, tightening login requirements for profile and home pages, and passing current user data to templates to render correct icons.

Define a mongoose message model with sender and receiver references to the user collection, a read flag, and a chats array to store message entries. Export the message collection to enable chat functionality.

Import the message model to load and store messages in a collection, using an id-based reference and a default false read flag to track when a message is viewed.

Start the chat process by selecting a user, finding or creating a one-to-one conversation, and sending the first message while updating read status and routing to the chat room.

Learn to implement a private chat route by starting a chat, routing requests via IP-based conversation lookup, and populating sender and receiver data to render messages.

Render the chat room template and set up the /chat/message route to display messages by sender and receiver, with a forum-like input to submit in real time.

Style the chat room with css, targeting the conversation div by id and enabling vertical scrolling, while wiring handlebars templates and Google login to access chats.

Pass the user object with messages to the chat room, fetch the current user by ID, and render the chat template, then test by logging in and viewing chats.

Post a private message by submitting a form, retrieve the message input, update the message date, and append it to chats for dynamic chat rendering.

Display messages in the chat room by binding message objects to the user interface, showing sender names and timestamps, and preparing to render full user names in the next lecture.

Practice displaying the sender’s name and avatar in chats by wiring message IDs to sender and receiver, populating the receiver name, updating messages, and validating the user interface across logins.

Display the receiver’s name, image, and date with each message, while managing the message collection by deleting old entries before updates and refining the chat UI with spacing elements.

Test the chat room by logging in with different accounts, sending messages, and verifying that previous conversations load correctly after clearing and resetting the database.

Learn to implement the Materialize CSS media class to display chat messages and avatar images in a messenger app, adjust markup, and prepare the user interface for future enhancements.

Activate and verify the chat process by passing the user id, toggling recipient read status, posting messages in the chat room, and validating message flow across routes.

Fix the chat process by revising post requests, handling routes, and updating sender and receiver states to ensure messages flow correctly in the messenger app.

Inspect the image source in the browser’s developer console to ensure the receiver image displays in the message, and map posting requests to the message data.

Debug a chat flow to fix message loading issues and ensure immediate display of messages and pictures by properly populating sender and receiver fields and updating the messages collection.

Adjust the chat UI styling to enlarge the chat area, fix sender and receiver message rendering, and apply consistent padding and layout using the conversation id to model content.

Apply an auto scroll feature to the messenger interface using a jQuery approach, selecting the conversation element by its id and scrolling to the top at a defined speed.

Implement wallet checks to gate message sending in the messenger app, default new users to two messages, and render a payment template when funds are needed.

Build a Stripe checkout flow by configuring publishable and secret keys, installing the Stripe module, and wiring a payment form to charge a set price for sending messages.

Build a payment form with options and defined charges, using an express post flow and stripe-like tokens. Process customer email and card details to complete charges of $5 and $10.

Charge customers to unlock messages using Stripe integration, creating a customer, processing a $5 charge, saving a card for future payments, sending receipts, and displaying success.

Implement a Stripe payment flow that charges $10 for 50 messages by creating a customer with email and token, processing the charge, and crediting the user’s wallet on success.

Create environment variables and separate development and production files to deploy the messenger app live. Use an environment check to switch between development and production configurations and keys.

Configure production and development environment variables and port settings. Define engines and npm version, create a .ignore file, and deploy via the Heroku CLI.

Deploy your messenger app to Heroku by initializing the project, linking the dashboard, adding source files, committing changes, and verifying a live production deployment.

Deploy production with a separate MongoDB database and production credentials, configure Facebook and Google OAuth, update environment variables on Heroku, and push changes for a live messenger app.

Register a production Facebook callback by creating and configuring a Facebook app, updating the callback URL, and testing login to ensure production readiness for the messenger app.

Configure Heroku config vars for production by creating Google OAuth credentials, setting redirect URLs and authorized domains, then push changes and switch from test to live Stripe keys.