A premium e-commerce web application for selling artistic map frames with worldwide designs and customizable options.
- Product Catalog: Browse and search through a curated collection of map frames
- Customization Options: Choose from various sizes, frame colors, and orientations
- Shopping Cart: Add, remove, and modify items with persistent localStorage storage
- Checkout Process: Complete order form with customer information and payment details
- Order Management: Order confirmation and tracking system
- Responsive Design: Mobile-first approach with seamless desktop experience
- Search & Filter: Advanced filtering by continent, style, and search functionality
- Global Search: Quick search modal accessible from header
- Product Showcase: Beautiful gallery showcasing all designs
- Static Pages: Terms & Conditions, Privacy Policy, and About pages
- React + Next.js: Built with modern React patterns and Next.js App Router
- TypeScript: Full type safety throughout the application
- Pure CSS: Custom styling without external frameworks (no Tailwind/Bootstrap)
- localStorage: Client-side data persistence for cart and orders
- Component Architecture: Modular, reusable components
``` app/ ├── about/ # About page ├── cart/ # Shopping cart page ├── checkout/ # Checkout process ├── order-confirmation/ # Order confirmation page ├── privacy/ # Privacy policy ├── product/[id]/ # Individual product pages ├── shop/ # Product catalog with filters ├── showcase/ # Product gallery showcase ├── terms/ # Terms & conditions ├── globals.css # Global styles and design tokens ├── layout.tsx # Root layout └── page.tsx # Homepage
components/ ├── ui/ # Reusable UI components ├── footer.tsx # Site footer ├── header.tsx # Navigation header ├── product-card.tsx # Product display component └── search-modal.tsx # Global search functionality
lib/ ├── cart.ts # Cart management functions └── products.ts # Product data and utilities
hooks/ └── use-cart.ts # Cart state management hook ```
- Node.js 18+
- npm or yarn
-
Clone the repository ```bash git clone cd mapframe-studio ```
-
Install dependencies ```bash npm install ```
-
Start the development server ```bash npm run dev ```
-
Open http://localhost:3000 in your browser
- Primary: Emerald (#059669) - Brand color for CTAs and accents
- Secondary: Light Emerald (#10b981) - Secondary actions and highlights
- Neutrals: White, light grays, and dark grays for text and backgrounds
- Accent: Emerald variants for interactive elements
- Headings: Geist Sans Bold - Clean, modern headings
- Body: Geist Sans Regular - Readable body text
- Monospace: Geist Mono - Code and technical content
- Mobile-first: Responsive design starting from mobile
- Flexbox: Primary layout method for most components
- CSS Grid: Used for complex 2D layouts (product grids)
- Semantic HTML: Proper HTML structure for accessibility
Each map frame offers:
- Size Options: 12"x16" to 24"x36" with pricing tiers
- Frame Colors: Black, White, Natural Wood, Dark Wood, Gold
- Orientations: Landscape and Portrait options
- Persistent Storage: Cart data saved in localStorage
- Real-time Updates: Live cart count in header
- Quantity Management: Increase/decrease item quantities
- Custom Configurations: Each customization treated as unique item
- Global Search: Modal search accessible from header
- Advanced Filters: Filter by continent, style, and price
- Sort Options: Name, price (low to high, high to low)
- Search Results: Highlighted search terms and result counts
- Form Validation: Complete checkout form with validation
- Order Simulation: Simulated payment processing
- Order Storage: Orders saved to localStorage
- Confirmation Page: Detailed order summary and next steps
Product data is stored in lib/products.ts with the following structure:
- Basic info (name, description, price, images)
- Categorization (continent, style, category)
- Customization options (sizes, colors, orientations)
- Featured status for homepage display
- Cart: Stored in localStorage as
mapframe-cart - Orders: Stored in localStorage as
mapframe-orders - Real-time Sync: Custom events for cross-component updates
- No External Frameworks: Custom CSS without Tailwind or Bootstrap
- Component-Scoped Styles: Each component has its own CSS file
- Design Tokens: CSS custom properties for consistent theming
- Responsive Design: Mobile-first media queries
- Semantic HTML: Proper heading hierarchy and landmarks
- ARIA Labels: Screen reader support for interactive elements
- Keyboard Navigation: Full keyboard accessibility
- Color Contrast: WCAG compliant color combinations
- Modern Browsers: Chrome, Firefox, Safari, Edge (latest versions)
- Mobile Browsers: iOS Safari, Chrome Mobile, Samsung Internet
- JavaScript Required: Application requires JavaScript for full functionality
- Image Optimization: Placeholder images with proper sizing
- Code Splitting: Next.js automatic code splitting
- Lazy Loading: Images loaded as needed
- Local Storage: Efficient client-side data management
- User Accounts: Registration and login system
- Wishlist: Save favorite products
- Reviews: Customer product reviews
- Real Backend: Database integration for products and orders
- Payment Integration: Stripe or PayPal integration
- Email Notifications: Order confirmations and shipping updates
- PWA Support: Progressive Web App capabilities
- Image CDN: Optimized image delivery
- Analytics: User behavior tracking
- SEO Optimization: Enhanced search engine optimization
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
For questions or support:
- Email: support@mapframestudio.com
- Website: mapframestudio.com
© 2025 MapFrame Studio. All Rights Reserved. All designs are copyright protected. Unauthorized use or reproduction may result in legal action.