Full Stack Web Development- Angluar Js, Node Js, React Js

  • Home
  • /
  • full stack web development- angluar js, node js, react js

Full Stack Web Development- Angluar Js, Node Js, React Js

Fees in INR: 11,500/-
Fees in $: 161.04/-

Overview

  • Basics overview of Frontend Development
  • Basics overview of Backend Development
  • Basics overview of Database
  • Layers of the MERN stack


NPM

  • Package managers and basic operations via the command line
  • NPM, node, and NVM
  • node shell and NPM

Node.js and Express


Setup

  • Node.js Installation and Setup
  • Setup Babel, the JavaScript transpiler
  • Setup Express
  • Use of environment variables for runtime configuration
  • Configure a basic web server

Operations and API

  • CRUD and REST
  • DDM with a user class

Request and Response

  • Request and Response objects in Node
  • Setup GET, POST, PUT, and DELETE Requests

Express middleware

  • Basic overview of express middleware
  • Importance of middleware ordering
  • Setup and use the bodyParser, cookie parser middleware
  • Implementation of other middlewares in project

Session Manager

  • Basic overview of node session manager
  • Implementation of node session manager in project

Tests with Jest

  • Install and configure Jest
  • Write a couple of unit tests
  • Write more complex tests with mocking

Postman

  • Setup Postman on your machine
  • Learn to create collections and requests
  • Manage variables in Postman

MongoDB


Introduction to MongoDB and NoSQL Databases

  • Explore MongoDB’s features
  • Compare collection with SQL tables
  • Practice how to create and organize a schema

New Project Structure and MongoDB Setup via Docker

  • Configure the file structure to support our project’s growth
  • Setup MongoDB with Docker and write automation scripts
  • Explore alternative options for running MongoDB

Connecting MongoDB to Our Node/Express Backend

  • Install and configure mongoose and connect to our database
  • Create a seed script to insert data to MongoDB
  • Review our code and verify everything with Robot 3T

Reading Real Data from Our API

  • Make a seed script to insert larger records
  • Return a list of all users from the database
  • Use findById to return a single user from the database

Creating, Updating, and Deleting Data

  • Create a POST request that’s used to create data
  • Create a PUT request that’s used to update data
  • Create a DELETE request that’s used to delete data

Filtering Data with MongoDB

  • Setup a filter that supports product categories
  • Test our endpoint’s filter logic with Postman
  • Explore MongoDB’s query language via Robot 3T

Refactoring and Improving Our Code

  • Extract hardcoded values into environment variables
  • Extract routes into their own files
  • Implement basic permission checks on all sensitive routes

React Js:


A Gentle Primer to the World of React

  • Extract hardcoded values into environment variables
  • Follow-along with 3 examples to get familiar
  • global_paypal_ipn

Hit the Ground Running with Create React App

  • Bootstrap the frontend with create React app
  • Explore the “magic” behind the CRA
  • GLOBAL_IPN_URL

Creating Your First UI Components with JSX

  • Write your first UI components with JSX
  • Pass to components data via props
  • Create and manage dynamic data with setState

Data Flow with State and Props

  • Learn how to “lift” state up the component tree
  • Work with dynamic callbacks and anonymous functions
  • Review the final component and how the data flows

Creating a Reusable Component for Our Web Store

  • Review the task and design specifications
  • Setup the base component skeleton and data schema
  • Integrate styles and implement dynamic image changing

Dynamic List Components

  • Render a dynamic list of elements using “map”
  • Learn about the “key” property
  • Extract all of our code into a reusable ProductList component

Creating and Controlling Input Fields

  • Create a generic “BaseInput” component as a skeleton for all inputs
  • Learn to create Controlled Inputs
  • Learn about Synthetic Events and how to work with them

Controlling Buttons and Forms

  • Ensure our inputs, buttons, and forms are accessible
  • Handle data flow and control
  • Enable form submission

Routing with React Router

  • Examine our routing strategy
  • Setup React router and some basic routes
  • Learn about dynamic parameters in React

Configuring CORS in Express

  • Learn about the same origin policy
  • Setup the CORS middleware
  • Learn how to enable CORS in production

Requesting Data from Our API

  • Setup and configure axios
  • Learn about React’s lifecycle methods
  • Make requests and render data from the server

Creating the Category and Product View

  • Work with dynamic parameters to make filtered requests
  • Create a loading indicator
  • Request a single product and display a unique page

Building a Persistent Shopping Cart

  • Learn about localStorage and how to use store2
  • Implement an addToCard method
  • Ensure the shopping cart data is in sync across tabs

Protected Client-Side Admin User Routes

  • Setup admin-only routes
  • Learn about evaluating third-party dependencies
  • Learn how to wrap and use third-party code

For free demo classes please register