Project Brief: React Components for Custom Domain Purchase Flow (OpenSRS Integration)
Budget: £250 – £750 GBP
Project Brief: React Components for Custom Domain Purchase Flow (OpenSRS Integration)
Overview
We are seeking a development partner to build a set of reusable React components and example pages that implement a complete user flow for searching and purchasing a custom domain name. These components will be integrated into an existing React (Next.js-compatible) project.
The functionality should mirror the domain search and checkout experience found on platforms like GoDaddy, Namecheap, or Google Domains.
Key Deliverables
React Components
1. Domain Search Component
Search input for users to enter a desired domain name.
Real-time availability lookup using the OpenSRS API.
Support for multiple TLDs (.com, .net, .org, etc.).
Display alternative domain suggestions if the desired domain is unavailable.
2. Domain Selection Component
Let users select from the search results.
Show domain pricing and availability.
3. Checkout Component
Collect required domain registration information (e.g., WHOIS data).
Include a stubbed-out payment form (Stripe integration will be handled separately).
Display a summary/confirmation step prior to purchase.
4. Confirmation Component
Display a success message and registered domain information.
Provide any relevant next steps.
Handle and display error states gracefully.
Example Pages
Provide full-page examples demonstrating a typical user journey through the components.
Pages should be functional and styled with a clean, minimal design.
OpenSRS API Integration
All components must connect to the OpenSRS (Tucows) API for domain search, validation, and registration.
API calls should be handled through a separate, modular service layer.
API credentials should be injected via environment variables or configuration files.
Technical Requirements
React (TypeScript preferred).
Components should be modular, composable, and reusable.
Easy to integrate into an existing Next.js or standard React SPA.
Use of React hooks or context for state management.
Clean, responsive UI (TailwindCSS preferred but not required).
Well-documented code.
Deliverables
Source code delivered via GitHub repository or ZIP file.
README file with setup instructions and component integration examples.
.env.example file for required environment variables.
Overview
We are seeking a development partner to build a set of reusable React components and example pages that implement a complete user flow for searching and purchasing a custom domain name. These components will be integrated into an existing React (Next.js-compatible) project.
The functionality should mirror the domain search and checkout experience found on platforms like GoDaddy, Namecheap, or Google Domains.
Key Deliverables
React Components
1. Domain Search Component
Search input for users to enter a desired domain name.
Real-time availability lookup using the OpenSRS API.
Support for multiple TLDs (.com, .net, .org, etc.).
Display alternative domain suggestions if the desired domain is unavailable.
2. Domain Selection Component
Let users select from the search results.
Show domain pricing and availability.
3. Checkout Component
Collect required domain registration information (e.g., WHOIS data).
Include a stubbed-out payment form (Stripe integration will be handled separately).
Display a summary/confirmation step prior to purchase.
4. Confirmation Component
Display a success message and registered domain information.
Provide any relevant next steps.
Handle and display error states gracefully.
Example Pages
Provide full-page examples demonstrating a typical user journey through the components.
Pages should be functional and styled with a clean, minimal design.
OpenSRS API Integration
All components must connect to the OpenSRS (Tucows) API for domain search, validation, and registration.
API calls should be handled through a separate, modular service layer.
API credentials should be injected via environment variables or configuration files.
Technical Requirements
React (TypeScript preferred).
Components should be modular, composable, and reusable.
Easy to integrate into an existing Next.js or standard React SPA.
Use of React hooks or context for state management.
Clean, responsive UI (TailwindCSS preferred but not required).
Well-documented code.
Deliverables
Source code delivered via GitHub repository or ZIP file.
README file with setup instructions and component integration examples.
.env.example file for required environment variables.