[Feat] [Level 3] Guide Seller to Upload First Product on Signup Using Multi-Step Form

[ShivanshPlays]

Description

📝 Issue Description

In the fresh revamp of the website to Next.js, I will be implementing a multi-step form to guide sellers in uploading their first product during the signup process. This form will enhance the seller onboarding experience and improve usability.

The multi-step form will feature:

• Global context management for maintaining form state across steps.
• Client-side validation to prevent form submission errors.

---

📋 Task Breakdown

1. Setup Multi-Step Form Structure

   • Design form steps (e.g., Product Details).
   • Implement Next.js pages or components for each step.

2. Global Context for State Management

   • Use React's Context API to manage form data across steps.
   • Ensure data persists on navigation between form steps.

3. Frontend Validation

   • Integrate form validation to handle required fields and input formats.
   • Provide user-friendly error messages.

---

🚀 Expected Outcome

• A seamless seller onboarding experience with guided product uploads.
• Error-free submissions through client-side validation.
• Smooth navigation between form steps, with persistent data via global state.

---

⚠️ Additional Notes

• The form will be integrated into the seller signup flow to reduce friction during onboarding.
• The project admin's feedback will be appreciated to ensure alignment with needs.

---

🛠️ Environment

• Framework: Next.js (version 14.x)
• UI Framework: Tailwind CSS / shadcn components
• State Management: React Context API

---

Please review this issue and provide any additional feedback if needed.

Screenshots

No response

Checklist

• I have checked the existing issues
• I have read the Contributing Guidelines
• I'm a GSSoC'24-Extd contributor
• I'm a Hacktoberfest'24 contributor
• I am willing to work on this issue (optional)