feat: implement user onboarding process [ Pull Request #37 ]

README.md

@@ -222,40 +222,180 @@ This project is licensed under the [MIT License](🎯).
 
 
 
-(feature/user-profile-image-firebase)
-
-Create New User Image Component with Firebase Integration
-Enhance User Experience with Custom Profile Images
-Description
-This ticket aims to enhance the user experience by allowing users to personalize their profiles with custom images. It involves integrating Firebase for image storage, ensuring error-free functionality, and updating UI elements. Focusing on testing, documentation, and delivering a polished feature.
-
-Tasks
-Firebase Backend and Storage Setup:
-
- Configure Firebase to handle image uploads and storage.
- Implement secure authentication and access rules.
-User Context Update:
-
- Integrate the user image component with existing user context data.
- Ensure seamless synchronization between user data and profile images.
-Image Selection Options:
-Design and implement a component where users can:
-
- Upload their own photos.
- Choose from predefined default images.
-Error Handling:
-Implement robust error handling mechanisms.
-
- Handle scenarios such as failed uploads, network issues, and invalid image formats.
-UI Elements Update:
-Update relevant UI elements across the app to display user images:
-
- Navigation bar icon.
- User dropdown menu.
- Dashboard.
- Onboarding.
-Testing Considerations:
-Plan and execute unit testing for the new component. Ensure seamless integration with existing features.
-
-Documentation
-Document the component’s functionality, usage, and configuration.
+# Ticket Handling Strategy
+
+### Branch Plan Overview
+
+I've devised a structured approach to handle next tickets. Here's the breakdown of my plan:
+
+### Ticket Segmentation
+
+1. **Feature: User Onboarding Implementation**
+   - **Branch Name:** `feature/user-onboarding-implementation`
+   - **Objective:** Adding a new feature for guiding new users during registration and determining their initial platform level.
+   - **Reasoning:** This feature enhances our app by collecting additional user information and establishing a smooth onboarding process.
+
+2. **Refactor/Enhance: Authentication Pages**
+   - **Branch Name:** `refactor/enhance-authentication-pages`
+   - **Objective:** Improving the structure, error handling, and validation in the Login and Register pages.
+   - **Reasoning:** This task focuses on refining our existing authentication processes, ensuring robustness and reliability.
+
+### Sequential Approach
+
+**Order of Implementation:**
+   - **Priority 1:** Start with the `feature/user-onboarding-implementation` branch to introduce the onboarding feature.
+   - **Priority 2:** Following the completion of the onboarding implementation, move to the `refactor/enhance-authentication-pages` branch. This will serve as a cleanup and optimization phase for entire authentication processes - thus setting up for cleaner testing phase .
+
+### Interdependency Consideration
+
+While the authentication pages are already integrated, prioritizing the onboarding feature might be for the best. It allows me to build upon existing functionality and then refine authentication process comprehensively.
+
+
+
+
+
+# CURRENT TICKET :  Implement User Onboarding Process  #20
+
+https://github.com/DevonGifford/ZtmReady--PortfolioProject/issues/20
+
+### Summary:
+
+This ticket outlines the process of establishing an onboarding process for new users during registration. The tasks involved include defining onboarding questions, integrating the questionnaire with the registration flow, developing mechanisms for data collection and storage, defining the logic for level determination, and providing user feedback.
+
+In layman’s terms, this implementation “Helps our app guide new users during registration. It sets up a process to collect additional information about users and determine their initial level.”
+
+As always, we prioritize thorough testing and validation of functionalities for robustness and reliability, along with comprehensive documentation for clarity and future reference.
+
+<br/>
+
+---
+
+### Research Onboarding & Define Questions
+- [ ] **Create Targeted Questions:** Gather user information for determining their initial platform level.
+- [ ] **Research Best Practices:** Explore potential examples or libraries with smooth user interaction and flashy UI.
+
+### Integration with Registration and FireStore DB
+- [ ] **Incorporate Questionnaire:** Integrate the onboarding questionnaire smoothly within the registration flow to gather additional user information.
+- [ ] **Secure Data Collection:** Develop secure mechanisms to collect and store user responses securely in the Firestore Database.
+- [ ] **Implement Robust Validation:** Ensure thorough error handling and validation processes to maintain accurate data for level determination.
+
+### Post Onboarding Logic
+- [ ] **Provide User Feedback:** Offer clear and informative feedback to users based on their onboarding responses, ensuring a better understanding of the initial level determination.
+- [ ] **Define Level Algorithm:** Establish the algorithm or logic to derive the user’s initial platform level based on collected data.
+- [ ] **Final Submission Functionality:** Create a function for updating the Firebase database upon onboarding completion, followed by user redirection to the login page.
+- [ ] **Post-Login Data Retrieval:** Develop a process to fetch data from Firebase during login, store it in session storage, and update the user context.
+
+### Testing Considerations
+- [ ] **Comprehensive Testing:** Conduct exhaustive end-to-end (E2E), integration, and unit tests to ensure the robust functionality of the onboarding process across diverse scenarios and inputs.
+
+
+<br/>
+
+---
+
+### Additional Considerations
+
+- Collaborate with UX/UI teams to ensure the seamless integration of the forms with the application’s design and user experience.
+- Prioritize security measures to safeguard user data and prevent unauthorized access during CRUD operations.
+
+**Consider Documenting** the following:
+
+- **Onboarding Questions**: Detail the questions asked during the onboarding process.
+- **Data Storage Methods**: Document the methods used for data collection and storage.
+- **Level Determination Logic**: Describe the logic or algorithm used to determine the user’s initial level.
+
+
+# My Notes During dev: 
+
+
+---
+
+### Onboarding Components
+**Files:**  `app\(auth)\_components`
+
+1. **`welcome-onboarding.tsx`**:
+   - **Purpose:** Create a welcoming experience for new users, collecting:
+     - Username
+     - Dream title
+
+2. **`data-onboarding.tsx`**:
+   - **Purpose:** Collect basic user data including:
+     - Current career level
+     - Years of experience
+     - Input fields for user information
+
+3. **`image-onboarding.tsx`**:
+   - **Purpose:** Manage user profile pictures:
+     - Provide default options
+     - Enable user uploads or selections for profile visuals
+
+**Note Data Utilization:**
+Collected data will personalize the user’s app experience, updating user context and setting initial SR (secret rating).
+
+---
+
+### Handling Routing and State
+**File:** `app\(auth)\(routes)\onboarding\page.tsx`
+
+Implemented conditional rendering and state storage within the UI to manage routing efficiently.
+
+Snippet Example:
+```tsx
+// Render 'go back to previous form' button or render first form
+{router.query.type ? (
+    <button onClick={() => router.back()}>
+        <ArrowLeftIcon /> Go Back
+    </button>
+) : (
+    <Intro key="intro" />
+)}
+
+// Conditional rendering based on router query
+{router.query.type === "data-onboarding" && <DataOnboardingPage />}
+{router.query.type === "image-onboarding" && <ImageOnboardingPage />}
+{router.query.type === "welcome-onbaording" && <WelcomeOnboardingPage />}
+```
+
+---
+
+### Logic for User State Handling
+
+Outlined steps to manage user state during the onboarding process:
+
+1. **Create Basic Onboarding Pages**:
+    - Develop necessary onboarding pages.
+    - Store entered information (e.g., username, dream title) in local state using `useState`.
+    - Create placeholder functions for form submissions.
+
+2. **Navigating to Data Collection Page**:
+    - Conditionally render the appropriate onboarding page based on user interaction.
+    - Update URL to include collected data on user interaction (e.g., `/onboarding/data?username=John&dreamTitle=Adventure`).
+
+3. **Retrieving Data on Data Collection Page**:
+    - Retrieve parameters from URL on `DataOnboardingPage` using `router.query`.
+    - Extract necessary data (username, dream title, etc.) for personalizing the user’s experience.
+
+4. **Handling Form Submissions (Data Collection Page)**:
+    - Update local state for user inputs (e.g., career level, years of experience) on form interaction.
+    - Update URL with new data on form submission (e.g., `/onboarding/image?username=John&careerLevel=Intermediate`).
+
+5. **Persisting Data (DB and Global State)**:
+    - Save data permanently (Firestore database).
+    - Update userContext with new data.
+
+---
+
+### Additional Changes and Updates
+
+- **Creating Constants for Onboarding Process**:  
+  `constants\onboarding-index.ts`
+
+- **Updating Register to Route to Onboarding**:  
+  Implemented logic to direct users to the onboarding process.
+
+- **Incorporating Framer Motion for Smooth Animations**:
+  *provide additional details later.*
+
+
+
+

app/(auth)/(routes)/onboarding/page.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { useRouter, useSearchParams } from "next/navigation";
+import { ArrowLeftIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+import { AnimatePresence, motion } from "framer-motion";
+import UserOnboardingCareer from "../../_components/userCareer-onboarding";
+import UserOnboardingImage from "../../_components/userImage-onboarding";
+import UserOnboardingWelcome from "../../_components/userWelcome-onboarding";
+import { EXIT_NORMAL_ALL } from "@/constants/onboarding-index";
+
+export default function OnboardingFormHandler() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const pageId = searchParams.get("pageId");
+  return (
+    <>
+      <div className="flex h-screen flex-col items-center justify-center max-w-3xl mx-auto overflow-x-hidden">
+        <div
+          className="absolute inset-x-0 top-10 -z-10 flex transform-gpu justify-center overflow-hidden blur-3xl"
+          aria-hidden="true"
+        >
+          <div
+            className="aspect-[1108/632] w-[69.25rem] flex-none bg-gradient-to-r from-[#80caff] to-[#4f46e5] opacity-20"
+            style={{
+              clipPath:
+                "polygon(73.6% 51.7%, 91.7% 11.8%, 100% 46.4%, 97.4% 82.2%, 92.5% 84.9%, 75.7% 64%, 55.3% 47.5%, 46.5% 49.4%, 45% 62.9%, 50.3% 87.2%, 21.3% 64.1%, 0.1% 100%, 5.4% 51.1%, 21.4% 63.9%, 58.9% 0.2%, 73.6% 51.7%)",
+            }}
+          />
+        </div>
+        <AnimatePresence mode="wait">
+          {/* Conditional rendering based on router query */}
+          {pageId === "data-onboarding" && (
+            <UserOnboardingCareer key="data-onboarding" />
+          )}
+          {pageId === "image-onboarding" && (
+            <UserOnboardingImage key="image-onboarding" />
+          )}
+
+          {/* Render 'go back to previous form' button or render first form */}
+          {pageId ? (
+            <motion.div
+              initial={{ opacity: 0, scale: 0.5 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 0.5, delay: 1.5 }}
+              exit={EXIT_NORMAL_ALL.exit}
+            >
+              <Button
+                className="text-xs font-bold translate-y-1/2"
+                variant={"outline"}
+                size={"sm"}
+                onClick={() => {
+                  router.back();
+                }}
+              >
+                <ArrowLeftIcon size={16} /> Go Back
+              </Button>
+            </motion.div>
+          ) : (
+            <UserOnboardingWelcome key="intro" />
+            // <UserOnboardingCareer key="data-onboarding" />  //👉 for development use
+            // <UserOnboardingImage key="image-onboarding" />  //👉 for development use
+          )}
+        </AnimatePresence>
+      </div>
+    </>
+  );
+}

app/(auth)/(routes)/register/page.tsx

@@ -35,11 +35,11 @@ function Page(): JSX.Element {
       result
     );
     toast.success(
-      "Successfully registered and logged in."
+      "Successfully registered."
     );
 
     //- Redirect to the home page
-    router.push("/dashboard");
+    router.push("/onboarding");
   };
 
   return (
@@ -49,7 +49,7 @@ function Page(): JSX.Element {
         <h1 className="text-3xl text-devready-green font-bold">
           Create a new account
         </h1>
-        <p className="pt-3">
+        <p className="pt-3 text-sm">
           <em>
             If it be not to come, it will be now. If it be not now, yet it will
             come – the readiness is all 🧠