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:
Who This is For
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,
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.
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.
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.
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.
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.
Click the button below to subscribe to this tutorial.
Premium members can subscribe for free.
Can't make it to our live courses? Join our online membership for video tutorials, code samples and access to our Slack Channel.