Next.js / React / TypeScript Frontend for a Two-Sided Home Services Platform
Budget: $750 – $1,500 USD
PROJECT OVERVIEW
We need an experienced frontend developer or small team to build two connected web experiences:
1. Customer booking frontend
2. Service professional job-response and arrival frontend
This is FRONTEND DEVELOPMENT ONLY.
The finished product must be responsive, polished, API-ready, and built in a client-controlled Git repository. It must follow approved designs, use mock data, preserve user progress, and allow future production APIs to replace mock services without rebuilding the interface.
1. CUSTOMER BOOKING FRONTEND
Build the complete customer booking flow, including:
- Five service categories
- ASAP or scheduled booking
- Date and arrival-window selection
- ZIP-code availability check
- Duration selection
- Calculated pricing estimate
- Contact, address, property, access, parking, and instruction fields
- Demo payment screen using fictional data only
- Review and Edit actions
- Request submission
- Matching, delayed, no-match, cancellation, retry, and recovery states
- Mock professional profile with Approve and Decline actions
Pricing must use the selected service, timing, rate, minimum duration, fees, and total.
The customer must understand that submitting a request does not create a confirmed booking until the required matching and approval steps are complete.
2. PROFESSIONAL JOB FRONTEND
Build the professional-facing flow using mock job data, including:
- New job opportunity and job details
- Service, timing, location, duration, requirements, deadline, and compensation
- Available and unavailable responses
- Loading, error, retry, expired, withdrawn, and already-filled states
- Supply and equipment confirmations
- Transportation and parking selection
- Parking-fee warnings and acknowledgments
- Arrival-time commitment and confirmation
- Clearly different Selected and Not Selected outcomes
- Not Selected screen that clearly says DO NOT GO TO THE PROPERTY
- Removal of arrival and job-start actions when not selected
- Active job card and frontend countdown
- Preparing, en route, late, arrived, canceled, and reassigned states
- English and Spanish language switching across all professional screens
Translations must be managed through centralized translation files.
3. REQUIRED TECHNOLOGY
Use:
- Next.js
- React
- TypeScript with strict type checking
- Tailwind CSS or consistently structured CSS Modules
- Current supported production versions
4. REQUIRED ARCHITECTURE
The project must include:
- One client-controlled Git repository
- Separate customer and professional routes
- Shared components, types, utilities, and design tokens
- One typed customer booking object
- One typed professional job object
- Centralized services, pricing, durations, ZIP rules, arrival windows, wording, translations, and demo scenarios
- Separate mock service/API layer
- Local persistence for Back, Forward, refresh, and Edit actions
- Reset or discard-draft option
- Shared pricing calculation function
- Documented environment variables
- Linux-compatible build and deployment process
- No embedded secrets
The same underlying customer and professional data objects must control all summaries, prices, addresses, timing, and status displays.
Values must not be duplicated or independently hard-coded across screens.
5. DEVELOPMENT STANDARDS
The developer must:
- Accurately implement approved designs
- Build reusable, clearly named components
- Avoid oversized components and duplicated pages
- Pass TypeScript, lint, test, and production-build checks
- Avoid uncaught browser-console errors
- Use accessible HTML, labels, keyboard support, focus states, and touch-friendly controls
- Prevent horizontal scrolling, clipped text, overlap, and broken mobile layouts
- Use fictional or approved demo data only
- Maintain a clean folder structure and meaningful Git history
The frontend must work on mobile, tablet, laptop, and desktop.
6. EXPLICIT EXCLUSIONS
The quotation must exclude:
- Admin dashboard
- Dispatch dashboard
- Production backend or database
- Automated matching or dispatch
- Airtable, GoHighLevel, or CRM integrations
- Production SMS, email, push notifications, chat, or support tickets
- Customer or professional authentication
- Apple, Google, or OTP sign-in
- Stripe or real payment processing
- Charges, refunds, credits, tips, payroll, or payouts
- Background checks or identity verification
- Document storage or tax onboarding
- Live GPS, maps, routing, distance calculations, or location tracking
- Production analytics integration
- Any feature not stated here, shown in approved designs, or approved through a written change order
7. DELIVERABLES
Final handoff must include:
- Complete client-controlled Git repository and source code
- All customer and professional screens and states
- Responsive mobile and desktop layouts
- Shared component library and design system
- Centralized configuration and translation files
- Typed state, local persistence, pricing logic, mock services, and mock data
- Unit tests for critical calculations and state utilities
- Repeatable smoke tests for major user flows
- README and architecture overview
- Package files, lockfile, and .env.example
- Setup, test, build, deployment, and rollback instructions
- Dependency, license, and known-issues lists
- Approved design files and assets
- Deployment to a client-controlled environment
The solution must not depend on developer-owned hosting, private packages, inaccessible services, or undocumented processes.
8. MILESTONES
MILESTONE 1 - FOUNDATION
- Repository and technical setup
- Shared components and design tokens
- Customer service, timing, ZIP, and duration screens
- Typed state
- Centralized pricing and service configuration
- Mock services
- Local persistence
- Setup documentation
Changing one configured price must update every implemented display.
MILESTONE 2 - CUSTOMER FRONTEND
- Complete customer flow
- Navigation, Back, and Edit actions
- Validation and mock outcomes
- Matching and professional-review states
- Responsive behavior and QA
MILESTONE 3 - PROFESSIONAL FRONTEND
- Complete professional flow
- All selected and not-selected states
- English and Spanish switching
- Arrival planning and countdown
- Responsive behavior and QA
MILESTONE 4 - HANDOFF
- Completed mock-service layer
- Tests and passing production build
- Deployment
- Repository and asset transfer
- Final documentation
- Known-issues disclosure
- Acceptance testing
Pricing must be fixed by milestone. Work outside this scope requires written approval. Final payment will remain partially held until deployment, handoff, documentation, and acceptance testing are complete.
9. ACCEPTANCE REQUIREMENTS
The project must demonstrate that:
- Central configuration updates every relevant screen
- Pricing, minimums, fees, and totals calculate correctly
- Customer selections survive navigation, refresh, and editing
- Summaries always match the current booking data
- ZIP, waitlist, loading, retry, matching, no-match, and cancellation states work
- All professional screens use the same job object
- English and Spanish switching updates all professional copy
- Selected and Not Selected states cannot be confused
- Not-selected professionals cannot access arrival or job-start actions
- Buttons, validation, confirmations, and Edit actions work correctly
- Mobile and desktop flows have no clipping, overlap, or horizontal scrolling
- A clean checkout can be installed, tested, built, and deployed using the documentation
- No real personal data, payment information, secrets, or developer-owned dependencies are included
10. PROPOSAL REQUIREMENTS
Please provide:
- Confirmation that you accept the scope and exclusions
- Confirmation that admin and dispatch dashboards are excluded
- Proposed technical approach
- Relevant Next.js, React, and TypeScript experience
- Comparable project examples
- Fixed price and timeline for each milestone
- Assigned team members and roles
- Assumptions and optional recommendations
- Expected third-party libraries or paid assets
- Confirmation of complete source-code transfer
- Confirmation that the client will control the repository, hosting, and deployment
We need an experienced frontend developer or small team to build two connected web experiences:
1. Customer booking frontend
2. Service professional job-response and arrival frontend
This is FRONTEND DEVELOPMENT ONLY.
The finished product must be responsive, polished, API-ready, and built in a client-controlled Git repository. It must follow approved designs, use mock data, preserve user progress, and allow future production APIs to replace mock services without rebuilding the interface.
1. CUSTOMER BOOKING FRONTEND
Build the complete customer booking flow, including:
- Five service categories
- ASAP or scheduled booking
- Date and arrival-window selection
- ZIP-code availability check
- Duration selection
- Calculated pricing estimate
- Contact, address, property, access, parking, and instruction fields
- Demo payment screen using fictional data only
- Review and Edit actions
- Request submission
- Matching, delayed, no-match, cancellation, retry, and recovery states
- Mock professional profile with Approve and Decline actions
Pricing must use the selected service, timing, rate, minimum duration, fees, and total.
The customer must understand that submitting a request does not create a confirmed booking until the required matching and approval steps are complete.
2. PROFESSIONAL JOB FRONTEND
Build the professional-facing flow using mock job data, including:
- New job opportunity and job details
- Service, timing, location, duration, requirements, deadline, and compensation
- Available and unavailable responses
- Loading, error, retry, expired, withdrawn, and already-filled states
- Supply and equipment confirmations
- Transportation and parking selection
- Parking-fee warnings and acknowledgments
- Arrival-time commitment and confirmation
- Clearly different Selected and Not Selected outcomes
- Not Selected screen that clearly says DO NOT GO TO THE PROPERTY
- Removal of arrival and job-start actions when not selected
- Active job card and frontend countdown
- Preparing, en route, late, arrived, canceled, and reassigned states
- English and Spanish language switching across all professional screens
Translations must be managed through centralized translation files.
3. REQUIRED TECHNOLOGY
Use:
- Next.js
- React
- TypeScript with strict type checking
- Tailwind CSS or consistently structured CSS Modules
- Current supported production versions
4. REQUIRED ARCHITECTURE
The project must include:
- One client-controlled Git repository
- Separate customer and professional routes
- Shared components, types, utilities, and design tokens
- One typed customer booking object
- One typed professional job object
- Centralized services, pricing, durations, ZIP rules, arrival windows, wording, translations, and demo scenarios
- Separate mock service/API layer
- Local persistence for Back, Forward, refresh, and Edit actions
- Reset or discard-draft option
- Shared pricing calculation function
- Documented environment variables
- Linux-compatible build and deployment process
- No embedded secrets
The same underlying customer and professional data objects must control all summaries, prices, addresses, timing, and status displays.
Values must not be duplicated or independently hard-coded across screens.
5. DEVELOPMENT STANDARDS
The developer must:
- Accurately implement approved designs
- Build reusable, clearly named components
- Avoid oversized components and duplicated pages
- Pass TypeScript, lint, test, and production-build checks
- Avoid uncaught browser-console errors
- Use accessible HTML, labels, keyboard support, focus states, and touch-friendly controls
- Prevent horizontal scrolling, clipped text, overlap, and broken mobile layouts
- Use fictional or approved demo data only
- Maintain a clean folder structure and meaningful Git history
The frontend must work on mobile, tablet, laptop, and desktop.
6. EXPLICIT EXCLUSIONS
The quotation must exclude:
- Admin dashboard
- Dispatch dashboard
- Production backend or database
- Automated matching or dispatch
- Airtable, GoHighLevel, or CRM integrations
- Production SMS, email, push notifications, chat, or support tickets
- Customer or professional authentication
- Apple, Google, or OTP sign-in
- Stripe or real payment processing
- Charges, refunds, credits, tips, payroll, or payouts
- Background checks or identity verification
- Document storage or tax onboarding
- Live GPS, maps, routing, distance calculations, or location tracking
- Production analytics integration
- Any feature not stated here, shown in approved designs, or approved through a written change order
7. DELIVERABLES
Final handoff must include:
- Complete client-controlled Git repository and source code
- All customer and professional screens and states
- Responsive mobile and desktop layouts
- Shared component library and design system
- Centralized configuration and translation files
- Typed state, local persistence, pricing logic, mock services, and mock data
- Unit tests for critical calculations and state utilities
- Repeatable smoke tests for major user flows
- README and architecture overview
- Package files, lockfile, and .env.example
- Setup, test, build, deployment, and rollback instructions
- Dependency, license, and known-issues lists
- Approved design files and assets
- Deployment to a client-controlled environment
The solution must not depend on developer-owned hosting, private packages, inaccessible services, or undocumented processes.
8. MILESTONES
MILESTONE 1 - FOUNDATION
- Repository and technical setup
- Shared components and design tokens
- Customer service, timing, ZIP, and duration screens
- Typed state
- Centralized pricing and service configuration
- Mock services
- Local persistence
- Setup documentation
Changing one configured price must update every implemented display.
MILESTONE 2 - CUSTOMER FRONTEND
- Complete customer flow
- Navigation, Back, and Edit actions
- Validation and mock outcomes
- Matching and professional-review states
- Responsive behavior and QA
MILESTONE 3 - PROFESSIONAL FRONTEND
- Complete professional flow
- All selected and not-selected states
- English and Spanish switching
- Arrival planning and countdown
- Responsive behavior and QA
MILESTONE 4 - HANDOFF
- Completed mock-service layer
- Tests and passing production build
- Deployment
- Repository and asset transfer
- Final documentation
- Known-issues disclosure
- Acceptance testing
Pricing must be fixed by milestone. Work outside this scope requires written approval. Final payment will remain partially held until deployment, handoff, documentation, and acceptance testing are complete.
9. ACCEPTANCE REQUIREMENTS
The project must demonstrate that:
- Central configuration updates every relevant screen
- Pricing, minimums, fees, and totals calculate correctly
- Customer selections survive navigation, refresh, and editing
- Summaries always match the current booking data
- ZIP, waitlist, loading, retry, matching, no-match, and cancellation states work
- All professional screens use the same job object
- English and Spanish switching updates all professional copy
- Selected and Not Selected states cannot be confused
- Not-selected professionals cannot access arrival or job-start actions
- Buttons, validation, confirmations, and Edit actions work correctly
- Mobile and desktop flows have no clipping, overlap, or horizontal scrolling
- A clean checkout can be installed, tested, built, and deployed using the documentation
- No real personal data, payment information, secrets, or developer-owned dependencies are included
10. PROPOSAL REQUIREMENTS
Please provide:
- Confirmation that you accept the scope and exclusions
- Confirmation that admin and dispatch dashboards are excluded
- Proposed technical approach
- Relevant Next.js, React, and TypeScript experience
- Comparable project examples
- Fixed price and timeline for each milestone
- Assigned team members and roles
- Assumptions and optional recommendations
- Expected third-party libraries or paid assets
- Confirmation of complete source-code transfer
- Confirmation that the client will control the repository, hosting, and deployment