React, Angular, Node In-Depth Guide: Beginner to Pro (2018)

Explore the basics of JavaScript and the features of iOS six to better understand the Riak and Angular sections.

Explore defining a class, using a constructor, and creating instances to model objects, while inspecting this context and displaying instance data.

Explore how const, let, and var define global and block scope, revealing how variables behave across blocks and functions with practical examples.

Explore asynchronous code by using callbacks with setTimeout to demonstrate delayed data retrieval, returning values after a two-second delay and updating secret documents via a callback function.

Discover how observables manage asynchronous data by subscribing to an observable and handling next, error, and complete with an observer.

Explore an easy, introductory section that explains basic concepts through the first component modules and services, outlining the basic layout and looking ahead to lectures.

Clone a repository to lock dependencies, install Angular CLI, configure Git remotes, initialize the project, install packages with npm, and run a local development server at localhost:4200.

Explore how Angular components combine HTML templates and TypeScript logic, use property binding and event binding, and define metadata such as selector and templateUrl as you build your first component.

Create a header component in Angular by defining metadata, selector, and template, import and declare it in the module, then run the server to render it in the app.

Explore how modules organize an Angular app by serving as the central point for importing and declaring components, with the app module bootstrapping the application.

Install bootstrap in your project with npm, locate the package in node_modules, and import the bootstrap stylesheet to apply its styles to your page.

Design an application layout with a header component featuring a search bar and a right-aligned menu and simple rental listings, using Bootstrap components.

Finish the header by creating a styles/ variables partial, importing it into components, and updating angular.json for style preprocessing and color variables (main color, light gray).

Explore routing by using the current URL to display rental listings and other views via a router outlet in a container component.

Create a modular rental module by adding a rental list and rental item components, wiring them as a container that renders listings, and test the app by running the server.

Learn to build a modular rental module in Angular by creating a dedicated rental module and item, declaring components, and rendering items with a for loop.

Learn how to pass rental data to a child rental item component using an input decorator, bind variables, and rename for clarity, then plan a central data service for reuse.

create a rental service as an injectable class, inject it into components via dependency injection, and provide a get rentals method to centralize retrieving rentals from a database.

learn how to implement observables in a rental service, subscribe to data streams, and handle next, error, and complete events to manage asynchronous calls.

Explore the concept of types in this optional lesson, learning how to declare variable types, specify function return types, control access with public and private modifiers, and enforce argument types.

Improve the rental view with a container component and nested routes for listing and detail. Redirect empty paths to rentals and render detail by id using the activated route.

Fetch rental data from a service by rental id using an observable and subscribe pattern. Render the rental detail component with data such as title, city, street, category, and description.

Perform a small code cleanup before pushing to GitHub, fix undefined rental data by adding checks and a new rental instance, adjust templates and styles for the listing page.

Push changes to the repository by deleting the temp component, updating imports, and committing a descriptive message; then push the branch and open a pull request.

Discover how to build a simple summary implementation using express as a database for our house in the Fresnel section, and join us for more in the upcoming lectures.

Learn to initialize a backend Express server, listen on a port, and use environment variables to configure the server, enabling data access for your browser-based app.

Learn to create a rental model with a rental schema in Mongoose, defining title, city, street, category, and price; save data to the database.

Create a fake db class to push rental data, iterate rentals, instantiate a rental model, and save each record to the database.

Organize your express app by separating routes into a dedicated rentals router, exporting and importing the router, and mounting it under api v1 rentals for clean endpoints.

Create a rental endpoint by wiring the rental model, defining routes for all rentals and by id, responding with json, and preparing error handling for empty results.

Learn to handle errors by returning descriptive JSON with status 422, structuring errors as title and detail, and formatting responses per JSON API standards for robust client feedback.

Learn essential git workflows with hands-on commands, including status, add, commit, push, and pull, while managing branches and opening a request; preview next section on Google API integration.

Explore the Google map feature and display the rental property's location on a map within the app. Review the section introduction to set expectations for upcoming lectures.

Learn how to fetch rentals from Node server using an Angular HTTP client by wiring a service, importing HTTP client module, and making a GET request to localhost:3001/api/v1/rentals, handling cross-origin.

Configure a development proxy to fix cross-origin requests by forwarding API calls from localhost:4200 to localhost:3001 using proxy.config.json, updating the start script, and validating with browser network.

Create and apply a custom uppercase pipe in Angular, implementing transform to convert strings in templates and wiring it into the rental detail component with module imports and declarations.

Learn to implement a google maps module in an angular project by displaying the rental property's location on a map, installing and configuring the maps package, and handling feature branches.

Create a map component and module to geocode rental locations with the Google Maps API and display the rental on a map in the rental detail view.

Learn how to display Google Maps in an Angular app by wiring a map component with a hardcoded location, setting height, and passing location data via an input property.

Create a map service that geocodes a rental address with the Google Maps API, returning latitude and longitude via an observable, and update the map on the map ready event.

Learn how caching stores expensive operation results in a temporary cache to avoid repeated geocoding via a Google API, using cache keys and stored coordinates (latitude and longitude) for locations.

Refactor the caching flow by extracting geocode into a private function and renaming the main function for clearer, observable-based behavior.

Display a rental property's area on the map as an anonymizing circle to protect privacy, configuring radius, color, and zoom with AGM Circle while handling undefined coordinates.

Learn to handle a not found location by showing an info window with an error message, switching between existing and non-existent locations, and centering the map on coordinates.

Fix an empty map on browser refresh by injecting updated latitude and longitude into the component constructor and importing the changes, so the map updates immediately rather than on click.

Push changes to a branch, commit with a clear message, and review the merge via a pull request. End of section signals merging and pulling updates from a remote.

Begin this section by guiding you through authentication and user restoration, outlining the challenges ahead and setting the stage for practical implementation.

Explore how JWTs secure client–server communication by encoding user data into a token, sending it in headers, and validating it on the server during login and registration.

Create a user model by adapting the rental model, adding user name, email, and password, and referencing rentals in a user schema with unique emails and an email validation regex.

Organize code by separating user controllers from routes, implement user registration with input validation and email checks, and encrypt passwords before saving to the database using Express and body-parser.

Learn to create a Mongoose normalize errors helper that formats validation errors into title and detail, and integrate it into controllers for neater client responses.

Explore the auth middleware introduction by handling login requests, validating email and password, verifying user existence, comparing passwords, and issuing a JWT token to authenticated users.

Update fake db by refactoring response handling into a separate function, create a test user, assign rentals to that user, and synchronize data with status codes dynamically for authorization.

Push code to GitHub, authenticate users with login tokens, test post requests to protected endpoints, verify authorization, commit and push changes, and prepare for frontend registration and login.

Explore the client site, learn to log in, and adjust pages. Understand the forms as they are explained in this section.

Create a container component hosting login and register components, wire routing to a login view, and update the module and navigation to expose an outlet for auth pages.

Learn Angular form validation by marking inputs as required, binding ngModel, and disabling the submit button when the form is invalid, while using a template reference for feedback.

Implement a user registration flow by building a register service wired to a form, posting data to API v1 users register, showing errors under the form, and redirecting on success.

Register users, redirect to the login page after success, and display server errors on the register form with an alert, using navigation and error details from the server.

Learn to build reactive login forms in Angular by migrating from template-driven forms, using a form builder and form group to manage email and password inputs.

Learn to implement login validation by adding required validators for email and password in the login component, and disable the submit button until the form is valid.

Implement login form error messages by validating email format and required fields, using reactive form controls and reusable validation helpers. Prepare to submit credentials to server and handle a token.

Implement a login flow that posts user credentials and handles the response. Save the returned token to local storage under bwl_ and navigate to rentals on success.

Display a register success message on the login page. Show images from the assets/images folder and render a bootstrap alert for the message.

Decode the authentication token from local storage to extract expiration, compare it with the current time, and update the app's authentication state to enable or disable content accordingly.

Implement authentication in this Angular app by using moment.js to check token expiration with a get-expiration function and is before, while storing the token in local storage for login and logout.

implement logout functionality by clearing tokens from local storage, resetting default values, and updating the header to display the username via a get username function.

Implement an auth guard to protect restricted pages and redirect unauthenticated users to login. Learn to check login state and wire guards into routes.

Learn how to implement an http interceptor to automatically attach a token from local storage to outgoing requests, enabling server-side authorization and secure access to protected endpoints.

Build and wire a booking component that displays price per night and date selection, install and import necessary dependencies, and connect rental data to a calendar-driven booking flow.

Push code with git by checking status, committing with a meaningful message, and pushing to origin on your branch, then test login, register, and the booking form in the browser.

Explore the booking section and identify endpoints to create a rental booking. Use these endpoints to complete a rental transaction within this introductory section.

Create a booking model linked to a user and rental, with start date, end date, and number of guests; update user and rental models to include bookings.

Learn to build a booking controller, implement a create booking function, and expose a /bookings post endpoint with token-based authorization, testing with Postman.

Implement the booking controller for rentals, incorporating ownership checks, booking validity by date, and updates to user and rental models.

Learn to validate bookings by comparing proposed dates against existing rental bookings, using a for loop and moment to ensure no overlaps, returning valid or error messages.

Enhance bookings by attaching them to a user and rental, update the user record, and populate rentals with selective user and booking details for clear displays.

Learn to git push changes to a remote repository while validating booking creation and rental data through API endpoints, managing authorization, and applying front-end and back-end updates.

Learn to work with third-party libraries to create a calendar and booking functionality for applications.

Create and export a booking model, update the rental model to include bookings, and derive a range of booked dates to disable calendar dates in the rental calendar.

Learn to generate a range of booking dates from start to end with a helper service, moment dates, and looping, then inject the service into the rental module and calendar.

Explore building a booking data flow by creating a date range, formatting dates, and calculating stay days with a helper service, preparing for the next lecture on three-day pricing.

Continuing the booking flow, import rental data, calculate total price from daily rate times booking days, and bind guests and price to the booking for a future confirmation modal.

Explore wiring a bootstrap modal in an Angular project using the MGB module, opening confirm and rental modals with start date, end date, price, and a booking message.

Learn to display and confirm rental bookings in a modal, validate a booking form with date and guest details, and surface daily rate and total price before server requests.

Create a booking service and shared booking module to send requests to endpoint apis and manage rental bookings data. Wire components to display and confirm bookings.

Pushes the new booked out date range to the calendar after a successful booking and disables taken dates, while showing a post-booking success message and handling errors with alerts.

Learn how to implement toast messages in Angular by installing a toast package, importing modules, injecting a toaster service, and showing a success notification when a booking is created.

Learn to reset a daterange picker using a view child to access a child component, set start and end dates, and update inputs to manage bookings.

Fine-tune the booking component by overriding styles and experimenting with Angular view encapsulation to achieve desired colors, then test bookings and prepare changes for push.

Celebrate completing the booking functionality as you move into the New England section and begin building a search feature to find a dreamhouse by city.

Refactor the fake db to a json data file and load rentals and users, then implement a rentals controller that filters by a city query parameter and returns matching rentals.

Create a city-based rentals search endpoint by normalizing the city to lowercase, filtering rentals by city, handling errors and empty results, and testing with Postman.

Refactor the rental search to filter by city and implement a new create rental endpoint. Learn to attach rentals to users, validate input, and handle errors using Postman and JWT.

Push server changes and verify rental endpoints with API requests, then commit and push to origin, switch branches, pull updates, and prepare the front-end Angular application with search functionality.

Create and integrate a rental search component that reads the city from the URL, fetches rentals via a service, and displays results, while updating the page title.

Fetch rentals by city from the server via a rental service, read the city from the url with activated route, and display results in the search component.

Implement a header search input that captures a city, prevents form refresh, and navigates to rentals for the city or Sacramento when empty, while handling enter submissions and resetting errors.

Create a rental form component and connect it to a rental model, bind inputs, and test in the browser, applying bootstrap styles and preparing for dynamic category rendering.

Create a rental form component that validates required inputs—city, street, category, image, bedrooms, description, and daily rate—and disables submit until valid. Navigate to the new rental after successful creation.

Show the rental owner's username and image in the detail view and disable booking for unauthenticated users, guiding login redirection.