Mocci & Co. Handwork is a fictional e-commerce site specializing in handmade plush toys. Developed as a portfolio project to demonstrate advanced frontend development skills, it focuses on:
- Scalable software architecture
- Componentization and code reuse
- User experience (UX) and modern interface
- Mobile-first responsive design
- Performance and optimization
This project showcases real-world e-commerce functionality including product browsing, filtering, shopping cart management, and a complete checkout flow.
👉 Access the website by clicking here!
- Smart Filtering System: Multi-criteria filtering by category, color, price range, and text search
- Dynamic Sorting: Sort products by price (ascending/descending), name (A-Z/Z-A), and best-selling
- Responsive Design: Optimized sidebar filters for mobile and desktop layouts
- Real-time Updates: Instant filtering and sorting without page reloads
- Interactive Image Gallery: Multiple product images with smooth transitions
- Mobile-Optimized Carousel: Touch-friendly image navigation for mobile devices
- Lightbox Integration: Full-screen image viewing with
yet-another-react-lightbox - Product Actions: Add to cart, add to wishlist, share functionality
- Persistent Cart State: Shopping cart maintained across sessions using React Context
- Multi-step Checkout: Guided checkout process with shipping and payment steps
- Form Validation: Real-time form validation with TypeScript type safety
- Loading States: Comprehensive loading feedback throughout the purchase flow
- Toast Notifications: Custom notifications using
react-hot-toast - Micro-interactions: Smooth animations powered by Framer Motion
- Wishlist Persistence: Favorites saved to localStorage with state management
- Error Boundaries: Graceful error handling with custom error pages
| Category | Technology |
|---|---|
| Frontend | 🔹 React 19 (Main library) |
| 🔹 TypeScript (Static typing & safety) | |
| Styling | 🔹 Tailwind CSS (Utility-first CSS framework) |
| Animations | 🔹 Framer Motion (Animation library) |
| Tools | 🔹 Vite (Dev environment & build tool) |
| Deployment | 🔹 Vercel (Hosting & CI/CD deployment) |
| Routing | 🔹 React Router DOM (Client-side routing) |
| UI/UX | 🔹 React Hot Toast (Notifications system) |
| 🔹 React Icons (Icon library) | |
| 🔹 Yet Another React Lightbox (Image gallery) | |
| Code Quality | 🔹 ESLint (Code linting & formatting) |
| 🔹 Jest & Testing Library (Unit testing) |
The project follows a Component-Based Architecture with strong emphasis on separation of concerns. State logic and business rules are encapsulated in custom hooks, keeping UI components clean and reusable.
src/
├── assets/ # Static assets
├── components/ # Reusable components
│ ├── common/ # Generic components
│ ├── features/ # Feature-specific components
│ ├── layout/ # Layout components
│ └── sections/ # Page sections
├── constants/ # Global constants
├── context/ # Global state management
├── data/ # Mock data (products, filters)
├── hooks/ # Custom hooks
├── models/ # Data models & TypeScript interfaces
├── pages/ # Main application pages
├── styles/ # Global styles & Tailwind config
├── types/ # Type definitions
└── utils/ # Utility functions & helpers
- Mobile-First: Optimized touch interactions and mobile navigation
- Tablet-Friendly: Adapted layouts for medium screen sizes
- Desktop Enhanced: Full-featured experience with expanded layouts
- Mock Data: Currently uses static data instead of real API
- Payment Processing: Simulated payment flow (no real transactions)
- User Authentication: Not implemented (planned for future versions)
- Inventory Management: Static stock levels (no real-time updates)
© 2025 Mocci & Co. All rights reserved.
This is a personal portfolio project. The design, code, and concept must not be copied, modified, or distributed without permission.