Setting Up Member Dashboards and Displaying Completed Episodes in Webflow

Welcome to lesson number six of our Webflow tutorial series. In this lesson, we will be focusing on setting up member dashboards and displaying all the episodes that have been marked as complete by the members.

Setting Up Member Dashboards

First, we need to ensure that our MemberStack functionality is fully set up. Once that is complete, we can proceed to set up our member dashboards. To do this, we will utilize the power-ups feature in MemberStack.

Member-Specific Pages in MemberStack

1. Access the MemberStack dashboard and navigate to the power-ups section.
2. Under the security options, locate the "Member Specific Pages" feature and turn it on.
3. Define the folder to be hidden for non-authenticated users, typically the members collection, and set a redirect to the login page.
4. Set each member's unique link by using the member's unique ID, which we can obtain from the MemberStack page.
5. Customize the member page by adding the member ID field as a slug.

After setting this up, each member will have their unique member page, which can be accessed using a specific URL scheme.

Testing the Member Dashboards

To confirm that the member dashboard setup works, perform a test login using a test account. Upon successful login, the member should be directed to their unique member dashboard. At this point, we can also customize the dashboard page to display a personalized welcome message using the member's first name.

Displaying Completed Episodes on the Dashboard

In the current state, the dashboard only shows a predefined series and recently watched items. The objective now is to modify this to display only the episodes that a member has marked as complete.

To achieve this, we will need to utilize the multi-reference field of the member's completed videos. Webflow allows for the creation of a collection list that can link to this multi-reference field. By leveraging this capability, we can dynamically display the completed episodes for each member on their dashboard.

Updating the Dashboard to Display Completed Episodes

1. Access the Webflow dashboard and navigate to the specific dashboard page.
2. Locate the section or element that displays the recently watched episodes.
3. Add a new collection list and link it to the member's multi-reference field for completed videos.
4. Customize the collection list to visually display the completed episodes, ensuring the proper styling is applied for a visually appealing user experience.

After implementing these changes, the member dashboard should now accurately reflect the episodes that the member has marked as complete.

Refining the User Experience

As we test the functionality, we may encounter minor issues such as the dashboard link not functioning as expected. Addressing such issues may involve updating the member-specific pages settings in MemberStack and ensuring that the member page links are correctly configured.

Once these adjustments are made, test the dashboard functionality again to verify that members are directed to their unique dashboards upon login.

Conclusion

In this lesson, we successfully set up member dashboards and implemented a dynamic display of completed episodes for each member. We also addressed minor issues related to user experience refinement. This marks an important step in creating a more personalized and interactive user experience within the Webflow platform.

In the upcoming lesson, we will focus on further refining the user interface by cleaning up the display and functionality of the "mark as watched" button and addressing the visibility of completed episodes. Stay tuned for more enhancements to our Webflow project!