🛒 Checkout Page

A single-page responsive checkout form.

🎨 Main features

• Pixel-perfect implementation of Figma design with responsive layout
• Form validation with real-time feedback
• Credit card input formatting
• Dynamic country/state selection
• Order data persistence in localStorage

🔧 Technologies used

• JavaScript library: React
• TypeScript support: TypeScript
• Form validation: React Hook Form with Yup
• Testing: Jest / React Testing Library / Jest-DOM / User Event
• Styling: CSS Modules with SASS
• Code linting: ESLint
• Code formatter: Prettier
• Style linting: Stylelint
• Pre-commit hook for formatting and linting: Husky and lint-staged
• Build tool: Vite
• Package manager: pnpm

🚀 Getting started

🎈 Start the project

# Install dependencies
pnpm i

# Run in the development mode
pnpm dev

# To make the development server accessible on a different device, run
pnpm start

🔼 Back To Top