Implement Complete Project Submission Flow with Multi-Step Form & Stepper Component

[onlydustapp]

Overview

This feature implements the entire project submission journey, from filling out a multi-step form to receiving a success confirmation. It integrates a reusable stepper component with the BoundlessSheet and communicates with the backend API for form submissions. 🚀
Please Ensure your read the issue before applying I have provided the figma file link here as well

Feature Breakdown

1. Reusable Stepper Component (@/stepper)

• Location: components/stepper/Stepper.tsx
• Features:
  • Vertical layout with numbered circles (1, 2, 3) connected by dotted lines
  • Three states: pending (grey), active (bright green), and completed (green with white checkmark)
  • Display step titles and descriptions
  • Steps Configurations:
    • Step 1: Initialize - "Submit your project idea to kickstart your campaign journey."
    • Step 2: Validate - "Get admin approval and gather public support through voting."
    • Step 3: Launch Campaign - "Set milestones, activate escrow, and start receiving funds."
  • Ensure a responsive design across mobile, tablet, and desktop

2. Project Submission Form

• Container: Use @boundless-sheet.tsx to wrap the entire flow
• Title and Fields:
  • Form title: "Submit your project information"
  • Fields include:
    • Project Title (with box/package icon and placeholder)
    • Project Tagline (with appropriate placeholder)
    • Project Description (textarea with placeholder and a character counter displaying "0/400")
    • Project Category (dropdown select with placeholder and folder/document icon)
    • Fund Amount (text input with "$" icon and placeholder)
    • File Uploads:
      • Whitepaper (formats: PDF, Docs • Max. 20MB with cloud-upload icon and a green "Upload" button)
      • Project Thumbnail (formats: JPEG, JPG, PNG • Max. 5MB with similar design)
    • Add Tags (Optional, with tag icon and placeholder)
  • Submit Button: Grey "Submit for Review" button

3. Success Confirmation Screen

• Display after successful submission:
  • Title: "Project Submitted!"
  • Large circular green checkmark icon
  • Confirmation message: "Your project has been submitted and is now under admin review. You'll receive an update within 72 hours. Once approved, your project will proceed to public validation."
  • Clickable "Projects page" link
  • Green "Continue" button
  • Update the stepper to show the "Initialize" step as completed

4. API Integration

• Endpoint: POST https://www.api.boundlessfi.xyz/api-docs/#/Project%20Ideas/post_api_projects
• Functionality:
  • Send form data to the API upon submission
  • Handle loading states during API calls
  • Display success/error messages using sonner toasts
  • Transition from the form to the success confirmation screen on success

5. State Management & Flow Control

• Manage form fields, validation, and file uploads
• Control stepper state (active, pending, completed)
• Handle transitions and error states gracefully

Technical Considerations

• Styling: Utilize shadcn/ui components and Tailwind CSS for consistency
• Responsiveness: Ensure the entire flow is responsive on mobile, tablet, and desktop
• Validation: Implement client-side validations for required fields and file constraints
• Accessibility: Include proper ARIA labels and keyboard navigation
• Performance: Optimize file uploads and overall form rendering

Acceptance Criteria

• ✅ The reusable stepper component is created and exported from @/stepper
• ✅ The project submission form is fully implemented within the BoundlessSheet component
• ✅ All form fields function with proper validations
• ✅ File upload components enforce specified format and size constraints
• ✅ Success confirmation screen displays correctly and updates the stepper state
• ✅ API integration successfully submits data to the specified endpoint
• ✅ Loading states and error handling are implemented and user-friendly
• ✅ The entire flow remains fully responsive across all devices

Files to Create/Modify

• components/stepper/Stepper.tsx (New reusable stepper component)
• components/project/ProjectSubmissionForm.tsx (New submission form component)
• components/project/ProjectSubmissionSuccess.tsx (New success confirmation component)
• components/project/ProjectSubmissionFlow.tsx (Main flow component integrating form, stepper, and confirmation)
• Update components/stepper/index.ts to export the new stepper component

Let's ensure this aligns with our design documents in Figma:

• Figma: Stepper Component Design 1
• Figma: Stepper Component Design 2
• Figma: Submission Form & Success Screen
• Figma: Mobile & Desktop Responsiveness

Please ensure all components adhere to the Boundless project coding standards as outlined in the README. 😃

[Oluwatos94]

My name is Tosin, I'm a full-stack developer, having gone through the detailed description and the referenced figma designs, I am fully confident to execute this task in 24hrs.

Looking towards to be assigned and commence implementation immediately.

[Marvelousmicheal]

Hello my name is melly and I am a Frontend developer and currently part of the OD fellows, I think this issue would be a very good learning experience for me
Can I work on this

[0xdevcollins]

Hope you’re doing well. @Marvelousmicheal, any update on this issue? It’s blocking other steps is the ui, so please keep us posted.

[Marvelousmicheal]

Hope you’re doing well. @Marvelousmicheal, any update on this issue? It’s blocking other steps is the ui, so please keep us posted.

sorry for the delay, i will start working on it , had a little light issue