Social Bookmark Site
- Mongo DB
- Web Scraping
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.
In this video, we hash passwords before storing users to the backend and we set up a simple logging-in route.
AuthenticationRegister or Log In to View
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 ReactRegister or Log In to View
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 & RegistrationRegister or Log In to View
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 ReduxRegister or Log In to View
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 ReducerRegister or Log In to View
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 BookmarksRegister or Log In to View
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 BookmarksRegister or Log In to View
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 ListsRegister or Log In to View
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.