Full Stack Web Development using the MERN stack and DEVOPS

Learn to design a user model in a MERN stack app using Mongoose, with name, email, password, role, and created date, then export the model.

Apply express-validator to validate user input, checking name, email, and password in a post route, handle validation results via middleware, and return 400 errors when needed.

Create and validate a user in a MERN app by handling request body, validating email, checking for existing users, and saving to Mongo DB; the next video covers hashing passwords.

Hash user passwords with bcrypt in a MERN stack app, generate salt, hash the password before saving, and replace plain text storage; prepare for JSON Web Tokens authentication next.

This lecture demonstrates using jsonwebtoken to issue signed tokens for front-end authentication, including payload creation, secret management, token expiration, and verification.

Build a middleware for authorization in a MERN app that extracts and verifies a JWT from request headers, attaches the decoded user to the request, and protects routes.

Describe a user login authorization flow: validate input and securely check user existence. Compare passwords with decrypts and issue a token payload on success.

Define the products model in a MERN app by linking to a user and capturing name, description, category, price, brand, and quantity with a mongoose schema for private routes.

Create the product API in a MERN app by validating request body, enforcing authentication, and saving a new product to the database with robust error handling.

Implement the get all products and get a specific product endpoints in the MERN stack, querying the product collection in the database and handling not-found errors for the front end.

Test a MERN stack products api with postman: log in to obtain a token, set headers and json content type, and create, list, and retrieve products.

Create a React application in a client folder using npm to initialize with Create React App, then customize the interface and run the dev server on port 3000.

Master state management in a MERN app by building a Redux store, combining reducers, and wiring actions and middleware for a predictable data flow.

Combine reducers to form a scalable redux store for a mern stack app. Wire actions and types to update user authentication and product data from the store payload.

Learn to register a user in a MERN app by defining register success and failure types, posting with axios, and storing the token in local storage while updating authentication state.

Set authentication by persisting the user token in local storage, attaching it to Axios headers, and fetching the current user to update state across development and production environments.

Set up a static React navbar, organize assets and components folders, and integrate Font Awesome icons while adjusting links and class names for future router use.

Implement BrowserRouter and Route to load a landing background on the home path, while integrating a Redux store with Provider to make state available app-wide.

Develop a reusable input component with type, name, placeholder, value, and onChange props, and define prop types for robustness within a general component used for login and registration.

Build registration and login components as class-based React modules, wire inputs and onChange handlers, manage state for name, email, and passwords, and link between register and login routes.

Learn to connect a front end to a back end by wiring form inputs to state, binding onChange, and calling the register action to create a user via the backend.

Learn to use componentWillReceiveProps to process server feedback, show validation arrows with a message component, handle successful signup, and route users based on the rule parameter.

Implement login actions in the MERN app by sending the user role in the login request body, aligning client and server logic, and preparing authentication dispatch types.

Explore building login actions in a MERN stack app, including sending role in the request body, wiring login and register flows, and auto-authenticating users with tokens on app startup.

Learn to wire the login component to the authentication flow by dispatching a login action, deriving isAuthenticated from state, and loading the current user after a successful login.

Customize the navbar to distinguish guests from authenticated users, showing login or logout options, implement error messaging via redux for login, and adapt the nav for mobile with icons.

Recap how we built a front-end app, created a store with universal state, wrapped it with a provider, and used reducers, actions, and types to interact with server and database.

Build a merchant dashboard in the MERN stack course using a free Bootstrap template to let merchants create products and publish them to customers.

Implement a get products action and reducer to populate the app with products, define action types and initial state, handle payload data and errors, and connect to the api.

Redesign the landing page by composing it from background and products components, fetch and display products via redux, map them to cards, and plan product detail integration.

Enforce authentication on the dashboard and product creation with a protected route that redirects unauthenticated users to login, and ensures only merchants can create products.

Explore refactoring the dashboard to use a left navigation with active routes, replacing anchors with links, creating home and add product components, and implementing a dynamic active state across routes.

Learn to pass child props to dashboard routes, render nested components, and wire dynamic navigation in a mern-based front end.

Customize the dashboard to show the user’s name and a sign out option, connected to the Redux store. Map state to props and render an avatar with user initials.

Master debugging in a MERN stack app by analyzing authentication flow, protected routes, and login redirects, using console checks, redux state, and local storage to ensure reliable dashboards.

Create a product form in a MERN app, wiring inputs for name, description, price, category, brand, and quantity while enforcing required server fields and submitting.

Style reusable input components with a style prop, wire changes to state, prepare a new product object for backend actions, and route to the products view.

Create a new product action with Redux and axios post to the backend, then use history to route to the dashboard products page, with validation checks.

Design a reusable product component to render product cards on the landing page and dashboard, using props, a card design, and add-to-cart interactions for a merchant storefront.

Populate the merchant dashboard with all products belonging to a specific merchant by fetching products from state, filtering by user id, and rendering product components.

Decode the user from a JWT to obtain the user ID, then fetch products for a specific merchant via an API, avoiding loading all products and slowing down web app.

Create a route that fetches all products for a specific instructor using the user ID, and verify it with Postman. Enable protection and add Morgan logging to trace requests.

Create a profile model in mongoose, defining user id, website, address, bio, and social media links, with a created date and export the profile schema for API development.

Set up the profile routes and API, and export the router. Fetch a profile using the user id, handle errors with proper responses, and distinguish private versus open routes.

Create and update a user profile through a protected route, validating address and bio, assembling profile and social links, and upserting the profile in one api endpoint.

Test post and get http APIs using Postman by creating profiles, logging in for a token, and sending application/json requests to fetch and delete profiles.

Delete a user's data by removing their products, profile, and account from the database using mongoose queries. Test with postman and confirm a user details deleted message.

Fetch an instructor's products by adding a dedicated route, implementing a get instructor's products action, and updating reducers and the products component to display the results.

Learn to set up a profile action and reducer in a mern stack app, including axios requests to the profile api, dispatching success and error states, and updating the reducer.

Create and manage user profiles in a MERN app by adding profile and add-profile components, routing, and conditional rendering that shows an existing profile or prompts to create one.

Create profile components by building a profile creation form with stateful inputs and onChange handlers, display a no-profile prompt, and connect to a backend action.

Create the profile by sending the state to the back end, dispatching the create profile action, and navigating to the dashboard/profile on success, with validation for address and bio.

Learn to display user profile information on the profile page by fetching the profile on mount, using props and state to render the profile and its social media links.

Enable merchants to edit their profiles via a reusable modal that mirrors the ad profile flow; manage form state and submit updates to refresh the profile.

Practice deleting a profile by testing front-end and back-end flows, creating a dummy profile, confirming deletion with a pop-up, removing local storage token, and returning to the homepage.

Set up a product details page that loads on card click, shows product information, enables add to cart purchase, and uses protected routes with dynamic routes by product id.

Destructure the product from state and render a two-column product detail view with image left, info right, including price, quantity, add to cart, rating, and features.

Develop a product details component by mapping a features array to display five features with inline styling and a fragment, while planning navigation, footer, and models for rating and payment.

Learn to design cart and payment models in a mern app, using an array of product ids, user association, and paid and fulfilled flags with timestamps and planned stripe integration.

Develop the get cart API by creating a protected route that uses the user id to fetch carts, handle empty results, and assemble product details for unfulfilled carts.

Learn to retrieve a user's unfulfilled cart, map products to details like name and price, and update or remove items through secured API endpoints in a MERN stack e-commerce flow.

Implement cart updates by using an api to add products, fetch user carts, manage unfulfilled carts, remove duplicates, merge new products, and retrieve price and product details for display.

Test cart APIs using Postman to add, fetch, and remove items, validate authorization, and ensure cart contains product details, not just IDs, while iterating fixes and backend logic.

Develop a cart reducer for a MERN app, defining the initial state, handling get and error actions, and dispatching payloads to fetch cart data from the backend.

Learn to implement cart actions in a MERN app by sending data to the back end with proper headers, dispatching actions, handling responses, and removing items from the cart.

Develop the add-to-cart modal on the product details page, connect the modal to an add-to-cart action, implement user feedback with alerts, and add a go-to-cart link for seamless navigation.

Implement adding a product to the cart using local storage when unsigned, and send cart data to the server when signed in, using a products array and user id.

Syncs locally stored cart items to the backend when users sign in. Dispatches add-to-cart actions and clears local storage to preserve cart continuity.

Learn to use query params to manage cart routes in a MERN stack app, preserving redirect state across login and register flows via protected routes and location.search.

Master dynamic routing to the cart in a full stack course by managing redirects via query parameters, validating authentication, and syncing local storage products to the server.

Learn to build a cart component in a MERN stack app using Redux to fetch cart data, map state to props, and render empty cart with a keep shopping link.

Explore building a shopping cart UI in a MERN stack app, displaying products with undesigned lists and skeleton avatars, calculating the cart total, and implementing add-to-cart and keep shopping flows.

Implement remove from cart by wiring a remove function to items using context and product props, refresh the cart, and update navigation with a cart link, Stripe prep.

Explore how to integrate Stripe for online payments in a MERN stack app, from creating an account and obtaining API keys to using Stripe React components and test cards.

Learn to set up stripe payments in a MERN stack app using react-stripe-checkout, switch from test to live keys, and pass amount, email, and shipping and billing addresses.

Connect the payment flow to the api using axios, sending the total, token, and address from the frontend to the backend, and test the payment endpoint.

Develop a Stripe payment api by configuring test secret keys, installing Stripe, creating a charge with amount, currency, and shipping address, handling errors, and saving authorization to the payment model.

Finalize the payment functionality by building and testing the payment api, creating payment records, updating carts and product quantities, and coordinating front-end and back-end flows.

Explore how devops enables worldwide app access by shifting from traditional hardware deployment to cloud containerization, emphasizing virtualization, containers, portability, and rapid deployment.

Explore YAML files, a readable data serialization language used for containers, GitHub actions, and CI/CD workflows. Learn to define keys, values, arrays, objects, comments, and validation in practical examples.

Demonstrate creating a dockerfile and docker compose for a React-based MERN app, using a minimal Alpine base, a working directory, copying package.json, and npm install.

Learn how to build a production-ready docker image for a MERN stack app by creating a dockerfile, setting up directories, configuring env vars, installing dependencies, and running the production build.

Learn to build and run a development docker container for a MERN app. Use the -f flag to specify the Dockerfile at the root, and install dependencies with npm install.

Learn to define and run multi-container apps with docker-compose for the client, including creating a YAML file, setting build context, volumes, and ports, and building the client image.

Master securing a MERN app with dotenv by loading environment variables from a root .env file, including the MongoDB connection string.

Explain a bug fix by removing differences and outdated model files from the local repository, then run git commit and push, while noting not to commit prematurely.

Configure a Dockerfile for the server using an Alpine node image, install dependencies with npm install, and run the app with npm start in a production-ready container.

Create and configure a docker-compose YAML for a MERN server, including build context, volumes, and environment variables, expose port 5000, and prepare server–client deployment with MongoDB.

Explore how images become containers by building images, running containers, and customizing the working directory; examine filesystem layouts, command overrides, and container contexts with diagrams.

Produce a production grade dockerfile and docker compose setup for the server, fix script typos, expose ports, install dependencies, and run the app to verify containers and routes.

Configure a docker-compose setup for multiple images with server and client services, environment variables, and depends_on to ensure startup order, preparing cloud deployment to Docker Hub and Google Cloud.

Learn to configure Travis CI to pull code from GitHub, build and test a Docker container, and deploy to cloud platforms like Google Cloud or AWS using a dot travis.yml.

Learn to create a simple Mocha test with nyc coverage, organize tests in a test folder, and configure Travis, Heroku, and Docker deployment for a Node app.

Build and organize test cases using the Moka documentation example, structure tests in a config folder, and run them inside a docker image via travis integration for coverage.

Address a deprecation warning, push the application, and trigger a Travis build by following the outlined steps. Update the versioning, rebuild the image, and push changes via git for Travis.

Configure Travis to build the production Docker image from the production Dockerfile after tests pass, authenticate to Docker Hub with encrypted Travis env vars, and push the image.

Push a local docker image to docker hub, verify successful build and push in your repository, and manage environment variables and gitignore so the app can connect to the database.

Encrypt environment variables with openssl and decrypt at runtime to securely manage secrets, using aes-256, while integrating GitHub secrets and runtime decryption.

Generate a strong password, store it as a secret key in travis ci, encrypt the .env file, decrypt in ci, then commit and push to github to trigger travis builds.

Set up a React test file, render the app into a test container, run the test suite to verify components without crashes, and guard against memory leaks while configuring Travis.

Learn how to configure a Travis YAML file for a React application, set environment variables for the client, build a production image, run tests, and deploy to Google Cloud.

Verify task success with test runs, push client and server images to Doca, and prep Google Cloud App Engine deployment in the next video.

Create and set up a Google Cloud account with billing and the free tier. Download and initialize the Google Cloud SDK to manage projects from the terminal.

Learn to create a Google cloud project with App Engine, generate and securely store a service account key, then paste its content into your project for secure runtime access.

Create an app in app engine by selecting a region and a flexible environment, then complete the app creation, with region setup explained later in the course.

Learn to install and initialize the Google Cloud SDK from the terminal, troubleshoot IPv6 connection issues, and prepare for ci/cd deployment of a full stack app to Google Cloud.

Install and configure the Google Cloud SDK in a non-interactive travis ci workflow, decrypting the service account via environment variables and automating deployment to google cloud.

Configure Google Cloud environment by running a setup script, authorize with a service account, set the project and zone, and prepare for automated deployment.

Create a deploy script to manage Google Cloud deployments, list all apps, and delete previous versions before deploying a new one. Configure using an App Engine YAML file.

Learn to configure the GCP app.yaml for deployment, choose appropriate production or flexible environment settings, ensure scripts and defaults are correct, and deploy via Git push and CI tools.

During first-time deployment, grant Google Cloud permissions shown in the link, then restart the deployment to resolve authorization issues for the eShop project.

Demonstrates a production-grade server deployment pipeline, finalizing deployment, checking logs, and validating a travis ci workflow that triggers client-server integration for development and production environments.

Configure production deployment for the client by building a production build, serving static files, and enabling client–server communication in production versus development environments on Google Cloud.

Build a production-grade script for a React app that uses express to route requests to the production index.html and deploy via npm scripts.

Debug and fix a MERN stack deployment by validating the front-end and back-end connection, correcting the API slash issue, and ensuring Travis configuration aligns with the project.

Validate the production deployment on Google Cloud, confirm the app runs as expected, and review the continuous pipeline; preview upgrading the app and connecting to Google storage.

Upload a file from the browser to a server or cloud storage, process the file buffer, and store a reference in the database, enabling product image uploads.

Learn to handle file uploads with multer in a Node backend, using memory or disk storage and form data post requests. Prepare to connect to Google Cloud Storage next.

Connect uploaded files to Google Cloud Storage by configuring project ID and bucket, initialize storage, and create blob streams. Organize files into user and product folders for scalable access.

Explore uploading and organizing files in GCP storage by user ID and product ID folders, log errors, and update product records with thumbnails while managing public access.

Learn complete image upload workflows in a MERN stack project, including server updates, sending a success message, and front-end notifications with thumbnails for product cards.

Perform a user interface cleanup by adjusting containers to flex, conditionally showing buttons based on user roles, and planning to implement multi-image product galleries to improve responsiveness and usability.

Learn to implement a multi-image upload in a component, using a file list, props, and a submit button to upload images sequentially, with preview and delete capabilities.

Learn to upload multiple images to products by updating a single api route, store image URLs in a product images array linked to cloud storage, and refresh the ui state.

Create a product image carousel by merging the thumbnail with all images into one array, then render them in a Bootstrap carousel on the details page using props and state.

Fetch the seller profile using the product user ID, guard against infinite loops with a gotProfile state, and display the profile in a bootstrap card with address.

Design and display the seller profile by organizing the contact and bio sections, adding social media icons, validating and prefixing links with http/https, and handling external links safely.