핵심 요구사항
- 기존 상품·가격 API를 연동하는 반응형 장바구니 페이지 구현
- 폼 검증과 에러 처리를 갖춘 멀티스텝 체크아웃 컴포넌트 개발
- 소계·세금·할인·배송비 실시간 계산 렌더링
- Stripe Elements 프론트엔드 훅 및 에러 상태 처리
- Figma 브랜드 토큰에 맞춘 모바일 반응형 스타일링
- Cypress 스모크 테스트 통과
Required stack
필요 기술
JavaScriptReactVueCSSHTMLStripeCypress
Project brief
프로젝트 내용
I’m building an e-commerce website and I need an extra pair of hands to finalise the shopping-cart and checkout flow on the frontend. The catalogue pages and backend endpoints are already in place, so the focus is purely on the user interface: adding items to the cart, updating quantities, showing real-time totals, then guiding the shopper through address, shipping, payment and confirmation screens.
You may work in plain JavaScript, React, Vue or another modern framework—whichever lets you move fastest while keeping the final bundle lean and mobile-responsive. Stripe elements are ready on the backend, so the payment step only needs the correct hooks and error states on the UI side.
Deliverables
• Responsive cart page that consumes my existing product and pricing APIs
• Multi-step checkout component with form validation and graceful error handling
• Sub-total, tax, discount and shipping calculations rendered live
• Polished styling that matches our current brand tokens (Figma file supplied)
• Build/run instructions and a brief hand-off walkthrough
I’ll provide the API docs, staging keys and a short Loom video of the current flow. Once the components slot in cleanly and pass my Cypress smoke tests, the job is done.
You may work in plain JavaScript, React, Vue or another modern framework—whichever lets you move fastest while keeping the final bundle lean and mobile-responsive. Stripe elements are ready on the backend, so the payment step only needs the correct hooks and error states on the UI side.
Deliverables
• Responsive cart page that consumes my existing product and pricing APIs
• Multi-step checkout component with form validation and graceful error handling
• Sub-total, tax, discount and shipping calculations rendered live
• Polished styling that matches our current brand tokens (Figma file supplied)
• Build/run instructions and a brief hand-off walkthrough
I’ll provide the API docs, staging keys and a short Loom video of the current flow. Once the components slot in cleanly and pass my Cypress smoke tests, the job is done.
지원 기회 분석
지원 전에 볼 것
예상 산출물
- API를 소비하는 반응형 장바구니 페이지
- 폼 검증 포함 멀티스텝 체크아웃 컴포넌트
- 실시간 가격 계산(소계/세금/할인/배송) UI
- Figma 기반 브랜드 스타일링
- 빌드/실행 문서 및 핸드오프 워크스루
매력 포인트
- 명확한 스펙과 산출물 정의
- Figma·API 문서·Loom·Cypress 테스트 등 자료 완비
- 백엔드/카탈로그 완성되어 범위 한정적
확인할 점
- 예산 통화 표기 불일치($와 INR 혼용)로 실제 예산 규모 불명확
- 기간 미명시
Client signal
클라이언트 정보
플랫폼에서 상세 정보를 확인하세요.