Kai/Marvel AI Onboarding Expedition

[ademiltonnunes]

Description

This PR focuses on enhancing the onboarding process for Marvel AI by implementing a persistent progress bar and a real-time updating checklist. This was implemented by the squad 404 gladiator. This feature will guide users through key steps such as the:

• Welcome Screen
• Profile Setup
• System Configuration
• Final Steps
• Result Page

Implementation:

To provide a clearer understanding of the implementation and guide you through all the relevant files, I will summarize the most important modifications made to this feature.

1. Database: To accommodate the new onboarding feature, the existing "Users" collection has been modified. We added fields to track the progress of onboarding steps. Database Diagram A user document now looks like this:

{
 "users": {
   "123": {
     "fullName": "John Doe",
     "email": "john.doe@example.com",
     "uid": "123",
     "onboarding": {
       "1": true,
       "2": true,
       "3": false,
       "4": false,
       "5": false
     },
     "occupation": "Software Developer",
     "socialLinks": {
       "facebook": "https://facebook.com/johndoe",
       "linkedin": "https://linkedin.com/in/johndoe",
       "twitter": "https://twitter.com/johndoe"
     },
     "profilePhotoUrl": "https://example.com/photos/johndoe.jpg",
     "bio": "Passionate developer with 5 years of experience",
     "systemConfig": {
       "email": true,
       "push": false,
       "reminders": true,
       "theme": false
     }
   }
 }
}

2. Modified signUpUser Function: The backend function signUpUser was modified to save default onboarding values when a user signs up, incorporating the new onboarding data structure.

   • Firebase function modified: function/userControllers

3. HOC for Onboarding Screens: A Higher-Order Component (HOC) was created to redirect users to the appropriate onboarding screens based on their current steps in the process. The HOC checks the user’s onboarding status and redirects accordingly during sign-up or sign-in.

   • HOC Created: frontend/hoc/onboarding/withLayoutRedirect
   • File Modified to accommodate the HOC: frontend/pages/index.js

4. Firebase Listener for Real-Time Updates: A Firebase listener was added to update the Redux state and redirect users to the homepage upon completion of all onboarding steps.

   • File Modified: frontend/providers/GlobalProvider.jsx

5. Onboarding Layout: A general onboarding layout was created to standardize all the onboarding screens. The layout includes a persistent progress menu to track onboarding steps.

   • Layout Created: frontend/layouts/OnboardingLayout
   • Icons Created:
     • frontend/assets/svg/IconProcessDoing
     • frontend/assets/svg/IconProcessDone
     • frontend/assets/svg/IconProcessUndo
   • New Component Created to Show Icons: frontend/component/CustomeCheckCircle

6. Welcome Screen: The first screen of the onboarding process.

   • Screen Folders:
     • frontend/pages/welcome-screen
     • frontend/template/WelcomeScreen

7. Profile Setup: A form to capture most of the onboarding fields and save them to the database. This included creating components for uploading profile images and handling social links.

   • Screen Folders Created:
     • frontend/pages/profile-setup
     • frontend/template/ProfileSetup/ProfileSetupForm
     • New component for handling social links: frontend/template/ProfileSetup/SocialLinkInput
   • New component for image uploading: frontend/components/ImageUpload
   • Hook to upload image to Firebase Storage: frontend/hook/useUploadFile
   • Utility function to crop profile photo: frontend/utils/getCroppedImg.js
   • Modified Firebase storage rules: storage.rules
   • New Firebase function to save form data to the database:
     • File Created: function/controllers/onboardingController.js
     • Function: setupUserProfile
   • Service to call the function: frontend/services/onboarding/setupUserProfile.js

8. System Configuration: A screen to set up system preferences for users, such as email notifications and theme settings. Also modified how to theme in the whole system.

   • Screen Folders:
     • frontend/pages/system-config
     • frontend/template/SystemConfig
   • Modified project theme: Split theme.js into three files for better modularity:
     • frontend/theme/pallete.jsx
     • frontend/theme/componentsTheme.jsx
     • frontend/theme/theme.jsx
   • File Modified: _app.js to incorporate the theme across the project
   • Modified Redux slice to get theme info from the database: frontend/redux/slices/userSlice.js
   • Created a hook to sync user system configuration: frontend/hook/useThemeSync.jsx
   • Firebase function to save system configuration:
     • File Created: function/controllers/onboardingController.js
     • Function: setupUserSystemConfig
   • Service to call the function: frontend/services/onboarding/setupUserSystemConfig.js

9. Final Steps: The final screen before completing onboarding.

   • Screen Folders:
     • frontend/pages/final-steps
     • frontend/templates/FinalSteps

10. Result Page: The last screen confirms onboarding completion.

    • Screen Folders:
      • frontend/pages/result-page
      • frontend/templates/ResultPage
    • Firebase function to update onboarding status:
      • File Created: function/controllers/onboardingController.js
      • Function: advanceOnboardingStatus
    • Service to call the function: frontend/services/onboarding/advanceOnboardingStatus.js

Type of change

• [x] New feature (non-breaking change which adds functionality)
• [x] Breaking change (fix or feature that would cause existing functionality to not work as expected)

How Has This Been Tested?

The following tests were conducted to verify the functionality:

• [x] Test A: Verified that the progress bar updates correctly as the user advances through the onboarding steps.
• [x] Test B: Tested the Firebase listener to ensure it updates the Redux state and redirects the user to the homepage upon completing onboarding.
• [x] Test C: Confirmed that the onboarding screens are displayed in the correct sequence based on the onboarding status stored in the database.
• [x] Test D: Verified the database integrity by inspecting user documents and ensuring that onboarding fields are properly updated as the user progresses through the onboarding steps.
• [x] Test E: Tested edge cases, such as not entering required fields during profile setup, and confirmed that proper validation messages and error handling are triggered.
• [x] Test F: Verified that the system functions correctly in both light and dark themes, ensuring consistent UI/UX and proper loading of user theme preferences.
• [x] Test G: Tested the image upload functionality by uploading profile photos of varying sizes, and confirmed that cropping and resizing work as expected, with the correct URLs being saved in Firebase Storage and reflected in the database.
• [x] Test H: Simulated network interruptions during the onboarding process and confirmed that the system properly resumes and synchronizes progress with the database after reconnection.

[ademiltonnunes]

PR closed after Billy's review in dev session.