appleWatch.mp4
This project is a clone of the Apple Watch Studio experience, focusing on recreating the seamless customization process demonstrated on Apple Watch Studio. It allows users to personalize their Apple Watch by selecting different cases, sizes, and bands, with real-time preview updates.
- Dynamic carousels for size, case, and band selection
- Real-time preview updates with front and side views
- Smooth animations and transitions between selections
- Responsive design for various screen sizes
- Redux state management for complex watch configurations
- URL-based sharing of watch configurations
- Collection switching (Series 10, Hermès, SE)
- Next.js - React framework for server-side rendering and static site generation
- React - JavaScript library for building user interfaces
- Redux Toolkit - State management
- TypeScript - Typed superset of JavaScript
- Tailwind CSS - Utility-first CSS framework
- Framer Motion - Animation library for React
- Lucide React - Icon library
- Start on the landing page and click "Get started" to begin customization.
- Select your preferred watch size.
- Choose a case material and color.
- Pick a band type and color.
- Use the "Front view" and "Side view" buttons to see different angles of your customized watch.
- The total price updates in real-time based on your selections.
- Use the "Save" button to generate a shareable link for your configuration.