Frontend: Implement Global UserContext for Onboarding Data Collection

[onlydustapp]

📚 Overview

This feature requires designing and implementing the logic to capture and persist user data from Onboarding Page 1 through Page 11 into the UserContext. This will ensure a centralized store of user information, which is crucial for a consistent onboarding experience and later backend usage.

🔍 Context

• The onboarding process spans 11 pages and collects various pieces of user information including profile and preference details.
• Centralizing this data in UserContext ensures that the user profile is easily accessible and manageable across the application.
• This update will help with smooth transitions between steps, allowing for backward navigation with previously entered data.

🎯 Implementation Tasks

1. Review Onboarding Pages:

   • Identify and document key data fields from Onboarding Pages 1 to 11.

2. Update UserContext:

   • Modify UserContext.tsx to include new fields required for the onboarding process.
   • Add appropriate types for the multi-step form data to maintain type safety.

3. Create Setter Functions:

   • Implement setter functions (e.g., setUsername, setAge, setPreference, etc.) to update the context state.

4. Integrate Context with Onboarding Pages:

   • Update each onboarding page component to read from and write to the UserContext.
   • Ensure that form inputs are controlled and initialized with current context data (supporting backward navigation).

5. Validation and Error Handling:

   • Validate inputs on each page before allowing navigation to the next step.

📌 Contributor Reminders

✅ Check the Contribution Guidelines: 🔗 CONTRIBUTING.md
✅ Sync with the latest changes from the LogiQuest repository before working on this issue.
📸 Attach a screenshot of the working onboarding pages and context updates in your PR.

✅ Acceptance Criteria

• All data fields from onboarding pages 1–11 are properly captured and stored in UserContext.
• Each input field is a controlled component that properly reads from and writes to the context.
• Data persists correctly across onboarding steps, including when navigating backwards.
• Code is clean, modular, and aligns with existing project patterns and conventions.

💡 Technical Considerations

• Use TypeScript effectively for maintaining type safety, particularly for multi-step forms.
• Ensure that the context update process does not introduce performance overhead.
• Test edge cases such as missing or invalid input values.

📝 Additional Resources

• CONTRIBUTING Guidelines
• For project overview, check out the README.

🚀 Let's ensure users have a smooth and consistent onboarding experience by centralizing and managing their data effectively!

[Cedarich]

Hi,
I'm a frontend developer with experience in managing user data and implementing multi-step forms. I'm excited to apply for the task of designing and implementing the logic to capture and persist user data from Onboarding Page 1 through Page 11 into the UserContext. Here's my approach to completing this task:
Implementation:
Review Onboarding Pages:
Identify Data Fields: Identify and document key data fields from Onboarding Pages 1 to 11.
Update UserContext: Modify UserContext.tsx to include new fields required for the onboarding process.
Add Types: Add appropriate types for the multi-step form data to maintain type safety.
Create Setter Functions:
Implement Setters: Implement setter functions (e.g., setUsername, setAge, setPreference, etc.) to update the context state.
Integrate Context with Onboarding Pages:
Update Components: Update each onboarding page component to read from and write to the UserContext.
Controlled Inputs: Ensure that form inputs are controlled and initialized with current context data (supporting backward navigation).
Validation and Error Handling:
Input Validation: Validate inputs on each page before allowing navigation to the next step.
Technical Considerations:
TypeScript: Use TypeScript effectively for maintaining type safety, particularly for multi-step forms.
Performance: Ensure that the context update process does not introduce performance overhead.
Edge Cases: Test edge cases such as missing or invalid input values.
Testing:
Data Persistence: Verify that data persists correctly across onboarding steps, including when navigating backwards.
Controlled Components: Ensure each input field is a controlled component that properly reads from and writes to the context.
Validation: Test input validation on each page.
Documentation:
Clear Documentation: Document the implementation, including how the context is updated and how to test it.
Code Quality: Write clean, modular code that aligns with existing project patterns and conventions.
Communication:
Prompt Communication: Reach out promptly if any questions arise during implementation.
Contribution Guidelines: Follow the Contribution Guidelines and sync with the latest changes from the LogiQuest repository before starting work.
PR Screenshot: Attach a screenshot of the working onboarding pages and context updates in the PR.
ETA:
Estimated Time: 24 hours.
Detailed Approach:
Review Pages: Identify and document key data fields from Onboarding Pages 1 to 11.
Update UserContext: Modify UserContext.tsx to include new fields and add appropriate types.
Implement Setters: Create setter functions to update the context state.
Integrate Context: Update each onboarding page component to read from and write to the UserContext.
Controlled Inputs: Ensure form inputs are controlled and initialized with current context data.
Validation: Implement input validation on each page.
Testing: Test data persistence, controlled components, and input validation.
Documentation: Document the implementation and provide clear instructions for testing.
Review: Review the code and documentation for clarity and completeness.
This approach ensures a smooth and consistent onboarding experience by centralizing and managing user data effectively. Let me know if you’d like me to proceed!

[soyaya]

Below is a view of what can be done

Implement Global UserContext for Onboarding

Create a centralized UserContext to manage onboarding data across 11 steps.

High-Level POC Implementation
Context Definition (UserContext.tsx)tsx
import { createContext, useContext, useState } from 'react';

type OnboardingData = {
username: string;
age: number;
preferences: string[];
// ...other fields from all 11 steps
};

type UserContextType = {
onboardingData: OnboardingData;
setOnboardingData: (data: Partial) => void;
};

const UserContext = createContext<UserContextType | undefined>(undefined);

export const UserProvider = ({ children }) => {
const [data, setData] = useState(initialData);

const updateData = (newData: Partial) => {
setData(prev => ({ ...prev, ...newData }));
};

return (
<UserContext.Provider value={{ onboardingData: data, setOnboardingData: updateData }}>
{children}
</UserContext.Provider>
);
};

export const useUserContext = () => {
const context = useContext(UserContext);
if (!context) throw new Error('Used outside UserProvider');
return context;
};

Onboarding Step Integration (StepX.tsx)tsximport { useUserContext } from '@/contexts/UserContext';

const OnboardingStep = () => {
const { onboardingData, setOnboardingData } = useUserContext();

return (
<input
value={onboardingData.username}
onChange={(e) => setOnboardingData({ username: e.target.value })}
/>
// Other form controls...
);
};
Key Features
Centralized State: Manages all 11-step data in one context
Type Safety: Full TypeScript support for onboarding schema
Partial Updates: Merges new data with existing state
Back Navigation: Preserves data when moving backward

I will like to be assigned to this issue

[EbukaMoses]

Hey, the ReadMe file returns 404, but don't be worried as i have gone through overview of the issue and i can assure you that with my coding experience i can deliver within 48 hours if given the opportunity to handle the task. Looking forward to working on the task

[devJaja]

I’d like to help with this.