Build Full fledged NPO Registration page

[AyabongaQwabi]

GitHub Project Task Ticket: Build NPO Registration Page

Title:
Develop a Full-Featured NPO Registration Page

Description:
Design and implement a comprehensive registration page for NPOs. The page should capture all essential details about each NPO organization, including its name, description, contact information, and theming details (primary, secondary, and tertiary colors). Ensure robust field validation, API integration for registration requests, and user-friendly error handling. The registration page should be visually appealing, responsive, and accessible to a wide audience.

---

Checklists

1. Page Design and Layout

• Create a visually appealing layout for the registration page.
• Include input fields for essential NPO details:
  • Organization Name (required, max 100 characters).
  • Description (required, min/max character limits).
  • Contact Email (required, valid email format).
  • Contact Phone (optional, validate for valid number format).
  • Physical Address (optional).
  • Website or Social Media Links (optional, validate URLs).
  • Primary, Secondary, and Tertiary Colors (color pickers).
• Add a logo upload field (with image size and format validation).

2. Field Validation

• Validate required fields (e.g., organization name, description, contact email).
• Ensure color pickers accept valid HEX or RGB values.
• Validate the phone number and email for correct formats.
• Limit character counts for long text fields like description.
• Provide inline error messages for invalid inputs.

3. API Integration

• Set up API endpoints for:
  • Creating a new NPO registration.
  • Validating NPO details (e.g., email uniqueness).
• Handle API errors gracefully with clear, actionable error messages.

4. Theming and Personalization

• Store theming details (primary, secondary, and tertiary colors) as part of the NPO profile.
• Apply theming details to preview components to show how they affect the organization’s branding.

5. File Uploads

• Implement a file upload handler for the logo (supporting common formats like PNG, JPG, and SVG).
• Provide preview functionality for uploaded logos.
• Limit file size (e.g., max 2MB).

6. User Feedback

• Show a success message upon successful registration.
• Redirect users to the dashboard or a confirmation page after successful registration.

7. Error Handling and Validation

• Display inline error messages for validation issues.
• Handle API errors (e.g., network issues, server errors) with user-friendly messages.

8. Testing and Quality Assurance

• Write unit tests for form validation logic.
• Test API request handling with mock endpoints.
• Ensure the page is responsive across all devices.
• Verify accessibility compliance (e.g., keyboard navigation, screen reader support).

9. Documentation

• Document API endpoints and payload requirements.
• Provide instructions for testing the registration process.

Update to Task: Build NPO Registration Page

To help fast-track the development of the NPO Registration Page, developers can leverage the Vercel V0 AI Agent available at [v0.dev](https://v0.dev). This tool can generate high-quality, production-ready React components, Next.js integrations, and API logic tailored to your requirements.

---

Example Prompt for Vercel V0 AI Agent

Here’s an example prompt you can provide to the V0 AI Agent to bootstrap the NPO Registration Page:

Create a Next.js registration page for an NPO (non-profit organization) with the following features:  
1. Input fields for:  
   - Organization Name (required, max 100 characters).  
   - Description (required, 200–500 characters).  
   - Contact Email (required, valid email format).  
   - Contact Phone (optional, validate for international formats).  
   - Physical Address (optional).  
   - Website or Social Media Links (optional, validate URLs).  
   - Primary, Secondary, and Tertiary Colors (color pickers).  
   - Logo upload (validate file size up to 2MB and formats PNG, JPG, SVG).  
2. Add field validation with real-time feedback for invalid inputs.  
3. Integrate an API for registration requests and include error handling for:  
   - Duplicate email entries.  
   - Network or server errors.  
4. The page should be responsive, accessible, and styled using Tailwind CSS.  
5. Include a preview section that reflects the theming (primary, secondary, and tertiary colors) dynamically as the user selects them.  
6. Provide a success page or message upon successful registration and redirect to the NPO dashboard.  

---

Instructions for Using the Generated Code

1. Paste the generated code into the appropriate files in your project.
2. Review the API integration points and update them with your backend URLs and logic.
3. Test the validation logic and the API request flow using mock data.
4. Customize the styles to match the Inaethe branding (pink-700 and navy theme).

Using this method can significantly reduce the time needed to build the page while maintaining a high level of quality.

Update to Task: Build NPO Registration Page

Bonus Requirement: Create Configurable NPO Registration Form

As a bonus, the developer should implement an NPO registration form that can be included in the page configuration files. This will allow seamless inclusion of the registration form across different pages within the platform by simply referencing it in the configuration file.

---

Key Features of the Configurable Form

1. Reusable Component:

   • The NPO registration form must be built as a standalone React component.
   • It should accept props for customization, such as API endpoint URLs, additional validation rules, or specific theme overrides.

2. Page Configuration Integration:

   • The form should be referenced in the page configuration files as a component with a unique id.
   • Example page configuration structure:

     {
       "id": "benefits-our-inaethe",
       "components": [
         {
           "id": "hero",
           "content": { "title": "Welcome to Inaethe", "subtitle": "Support NPOs today!" }
         },
         {
           "id": "paragraph",
           "content": { "text": "Together, we make a difference by supporting causes that matter." }
         },
         {
           "id": "npo-registrant-form",
           "props": { "apiUrl": "/api/npo/register", "theme": { "primary": "#ff0077" } }
         }
       ]
     }

3. Dynamic Rendering Logic:

   • Extend the page renderer to dynamically render components based on the id specified in the configuration.
   • For the NPO form, render it when the id matches "npo-registrant-form".

4. Form Features:

   • Include all input fields and validation as described in the main task.
   • Allow passing custom validation rules or theming options via props.
   • Include a callback prop (onSuccess) to handle post-registration actions, e.g., redirecting to another page.

---

Example Vercel V0 AI Prompt

To generate the configurable form component, the developer can use the following prompt in V0 AI:

Create a reusable and configurable React component for an NPO registration form. Features should include:  
1. Props to customize the form, including:  
   - `apiUrl` for API requests.  
   - `theme` for overriding primary, secondary, and tertiary colors.  
   - `onSuccess` for a callback after a successful registration.  
2. Input fields for:  
   - Organization Name (required, max 100 characters).  
   - Description (required, 200–500 characters).  
   - Contact Email (required, valid email format).  
   - Contact Phone (optional, validate for international formats).  
   - Primary, Secondary, and Tertiary Colors (color pickers).  
   - Logo upload (validate file size up to 2MB and formats PNG, JPG, SVG).  
3. Real-time field validation and error feedback.  
4. Error handling for API requests, including duplicate entries and network errors.  
5. Responsive design using Tailwind CSS with a dark-first theme.  
6. Dynamic preview section for theming changes based on the user’s input.  

This component should be easily imported into other pages and accept configurations through a JSON structure. Example configuration:  
```json
{
  "id": "npo-registrant-form",
  "props": { "apiUrl": "/api/npo/register", "theme": { "primary": "#ff0077" } }
}