Social Bookmark Site


The Daily Slate | Social Bookmark Site
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


1. 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,

2. 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.

3. 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.

4. 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.

5. 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.

6. 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.

7. 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.

8. 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.

9. 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.

10. 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.

11. 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.

Purchase

$25.00

Purchase this tutorial for $25 and receive all videos, code samples and access to the forum where people post questions and answers.

Purchase, $25

Membership

Premium

$19.99/month

Join as a premium member for $19.99 each month and receive unlimited access to all tutorials, code samples, and forums on the site.

  • Downloadable Code Samples
  • Downloadable Videos
  • Q & A Forum Access
  • Discounts on Live Courses
Join

Basic

Free

Join as a basic member to gain access to the free tutorials, get notifications when new tutorials and courses are published, and participate in the Q&A forums.



Join