Overview

In this tutorial, we will build a simple site where users can save links. Saved links can then be viewed by other users on a profile page. We will use the following frameworks and libraries:

  • Node
  • Express
  • Mongo DB
  • React
  • Redux
  • Web Scraping

Who This is For

It is best if you have a background in Javascript and some knowledge in web programming. You should understand the general principles of a REST API as well as core React concepts such as life cycle methods and one way data flow.

Units

Setting Up

In this video, we set up the models (Profile, Bookmark), REST API and a simple page where we can create a Profile and Bookmark for testing,

Web Scraping

In this video, we create a web scraping tool in order to populate our bookmarks with content without requiring the user to manually enter the meta data.

Handling Passwords, Logging in

In this video, we hash passwords before storing users to the backend and we set up a simple logging-in route.

Authentication

In this video, we explore how to identify currently logged in users with JSON Web Tokens. We set up a route which verifies a logged-in user's identity as well as a route which enables users to log out.

Setting Up React

In this video, we begin the React portion of the project. We install the necessary libraries and set up a simple component which will eventually render the list of profiles and bookmarks for each profile.

User Interaction & Registration

In this video, we set up a registration component which handles user interaction from input fields. We then send the data to our backend via post requests and create new profiles for testing.

Setting Up Redux

Now that we are communicating with the backend, it is time to set up Redux. Redux efficiently connects our components to the global state for the entire application making it easy to maintain consistency. In this video, we set up the Redux environment.

Account Reducer

In this video we set up an account reducer to keep track of the user if logged in. When registering, we also log the user in.

Creating Bookmarks

In this video, we create new bookmarks now that users are registered. Each bookmark is associated with the logged in user and the scraper we set up earlier is used to populate the bookmark.

Rendering Bookmarks

We finally get to see the bookmarks show up on the main site by fetching them from the API. We also configure the reducers to specify which profile is selected which will allow us to fetch bookmarks for a specific profile.

Loading Specific Lists

It's time to load bookmarks specifically for selected profiles. In this video, we organize the bookmarks in the Redux store by profile ID and fetch only if necessary. Then we updated the store is the current user adds a new bookmark. This finalizes the core functionality of the site leaving only design left for the final segment.

Subscribe

Click the button below to subscribe to this tutorial.
Premium members can subscribe for free.

Online Membership

Can't make it to our live courses? Join our online membership for video tutorials, code samples and access to our Slack Channel.

Basic

Free
  • Access to Free Tutorials
  • Downloadable Code Samples
  • Downloadable Videos
  • Q & A Forum Access
Join

Premium

$14.99/mo
  • Access to ALL Tutorials
  • Downloadable Code Samples
  • Downloadable Videos
  • Q & A Forum Access
  • Discounts on Live Courses
  • Cross-Premium Membership to Turbo