Feature/react joyride integration

[rhuang4F2023]

Hello Team,

I've implemented an interactive user tutorial feature utilizing React Joyride in our application. Post-login, users can initiate the tutorial by clicking on the question mark icon. Upon activation, the interactive navigation/tutorial overlay becomes visible, guiding users through various features of our platform.

Users are required to click "Next" to proceed through the series of informational steps. The tutorial concludes once users navigate through all the outlined steps, or they can choose to end the tutorial prematurely by selecting "Skip" or "Close" at any point.

Here's a brief overview of the user flow:

1. User logs in.
2. User clicks on the question mark icon to start the tutorial.
3. The interactive tutorial overlay appears, and users can navigate through different steps by clicking "Next".
4. Users have the option to end the tutorial earlier by clicking "Skip" or "Close".
5. The tutorial concludes once the user finishes the last step.

I have also documented this feature, providing insights and implementation details on our project wiki. Please review the documentation here: Wiki

Looking forward to your constructive feedback and suggestions. And then I'll merge it and proceed with deploying this feature to AWS.

[render[bot]]

Your Render PR Server URL is https://gamification-client-pr-7.onrender.com.

Follow its progress at https://dashboard.render.com/static/srv-ck8ild5drqvc73comg40.

[rhuang4F2023]

I've updated the tutorial content to include an explanation of the gamification element and delete some obvious elements. Additionally, a new feature has been introduced to enhance the experience for users logging in for the first time. Screenshots are attached for a closer look at the modified content and the new feature.

For related modifications on the server side, please refer to the PR on the server repository: https://github.com/gamification-survey-platform/server/pull/53

Let me know if I should still make changes to the tutorial content or any other components. If there are no more modifications needed, I'll go ahead and merge this, followed by the necessary configurations on AWS.

[rhuang4F2023]

Hello, I added the Joyride step to guide users to the "Assignments submit" of first course. We could do it in two options (see screenshots). However, I've noticed a potential issue. Currently, the step of assignment will be shown only when the user navigates to the certain page (courses/assignment) and user clicks start tutorial icon here. If a user just opens the application on their first login, by default they land on the dashboard, and the guide won't immediately display. And if there is no course/assignment, it wouldn’t be shown either.