Implement Launch Campaign: Set Campaign Details
Overview
This task involves building the initial "Set Campaign Details" step of the "Launch Campaign" flow. Users will define the core information for their campaign, including title, description, funding goal, category, images, and duration. The system must adhere strictly to the provided Figma designs and API documentation, while reusing existing components to maintain consistency across the application.
This system must handle all loading, error, and empty states gracefully, and it should follow the defined color palette, typography, and spacing from the design system.
User Flow
Access Set Campaign Details UI
- Navigate to the "Launch Campaign" step within the project creation wizard.
- The "Set Campaign Details" form will be displayed.
Input Campaign Information
- Campaign Title: Enter a title for the campaign (e.g., "Boundless"). This field is required.
- Project Description: Provide a detailed description of the campaign using a rich text editor or Markdown. This field is required and has a character limit (e.g., 0/400).
- Funding Goal: Specify the target funding amount (e.g., "$123,000.00"). This field is required.
- Category: Select an optional category for the campaign (e.g., "Web3", "Crowdfunding").
- Upload Campaign Images: Upload multiple images for the campaign. This field is required.
- Campaign Duration: Select the duration of the campaign from a dropdown (e.g., "90 Days"). This field is required.
Review & Submit
- The "Review & Submit" button should be disabled if any required fields are empty or invalid.
- On clicking "Review & Submit", the system should validate the inputs and proceed to the next step of the "Launch Campaign" flow (Escrow Setup).
- An endpoint to save or update the campaign's basic details (title, description, funding goal, category, image URLs, duration).
- API for image uploads, returning URLs to be stored with campaign details.
For any missing endpoints, mock the expected behavior in the frontend until backend endpoints are available.
Ensure all API calls:
- Handle loading and error states.
- Use proper authentication and headers.
- Respect rate limits.
Design Requirements
Match Figma exactly:
Final Flow
- Reuse existing components – Before creating a new component, check if a similar one exists in the project and extend it instead of duplicating.
- Do not introduce new colors – All colors must come from the predefined theme.
- Ensure responsiveness – The UI must be functional and visually consistent on all device sizes.
- Accessibility – Follow accessibility best practices (proper aria labels, keyboard navigation, and contrast).
Development Guidelines
- Implement client-side validation for all input fields.
- Show clear loading indicators for image uploads or any asynchronous saving.
- Display helpful error messages when operations fail.
- Keep the code modular and reusable – Suggested structure:
SetCampaignDetailsForm – Main component for the form.ImageUploadComponent – Reusable component for image uploads.
- Follow the Contribution Guidelines for:
- Naming conventions.
- Commit messages.
- Pull request structure.
⚠️ Warning on AI-Generated UIs
We are not against AI-assisted design, but any AI-generated UI must be thoroughly tweaked to match the Figma designs exactly.
Do not rely on AI output without:
- Adjusting to match spacing, typography, and colors from the design system.
- Ensuring responsive and accessible layout.
- Checking for consistency with existing components.
Failure to follow these steps will result in your work being rejected.
Timeline
- Draft PR: Within 24h of assignment (include screenshots and development notes).
- Final PR: Within 48h of assignment.
Implement Launch Campaign: Set Campaign Details
Overview
This task involves building the initial "Set Campaign Details" step of the "Launch Campaign" flow. Users will define the core information for their campaign, including title, description, funding goal, category, images, and duration. The system must adhere strictly to the provided Figma designs and API documentation, while reusing existing components to maintain consistency across the application.
This system must handle all loading, error, and empty states gracefully, and it should follow the defined color palette, typography, and spacing from the design system.
User Flow
Access Set Campaign Details UI
Input Campaign Information
Review & Submit
API
For any missing endpoints, mock the expected behavior in the frontend until backend endpoints are available.
Ensure all API calls:
Design Requirements
Match Figma exactly:
Final Flow
Development Guidelines
SetCampaignDetailsForm– Main component for the form.ImageUploadComponent– Reusable component for image uploads.We are not against AI-assisted design, but any AI-generated UI must be thoroughly tweaked to match the Figma designs exactly.
Do not rely on AI output without:
Failure to follow these steps will result in your work being rejected.
Timeline