ShopFlow is a world-class, premium e-commerce platform designed to provide a fluid, high-performance shopping experience. Built with a focus on minimalist aesthetics and intelligent features, ShopFlow leverages Google Gemini AI for smart product discovery and Framer Motion for cinematic UI transitions.
- Real-time Synchronization: Instant updates across the UI without page reloads.
- Hover Preview: Peek into your cart at any time via the header with a smooth, interactive dropdown.
- Persistence: Your shopping journey is saved automatically using local storage.
- Bulk Management: Multi-select items in the cart for rapid removal, optimizing the management of large orders.
- Unique Item Counting: The cart badge reflects the number of unique product types, keeping your interface clean and informative.
- AI Recommendations: Dynamic "You May Also Like" sections generated by analyzing cart contents using the Gemini API.
- Intelligent Search: Real-time search suggestions that understand user intent and catalog relationships.
- Framer Motion Orchestration: Staggered entry animations, word-by-word text reveals, and spring-based interactions.
- Skeleton Systems: Sophisticated loading states for product grids and detail pages to eliminate layout shift and improve perceived performance.
- Lazy Loading: Native image lazy loading combined with motion-based fade-ins for a "pop-free" visual experience.
- Responsive Layouts: Fully optimized for mobile, tablet, and desktop with custom drawer navigation for smaller screens.
- Our Story: Immersive mission statement documenting the journey to conscious commerce.
- Careers: Modern job board featuring company culture and open roles.
- Help Center: Interactive FAQ system with accordion-style navigation.
- Policies: Comprehensive legal and logistical documentation (Return Policy, Terms, Privacy).
- Frontend: React 18
- Styling: Tailwind CSS (with Forms & Aspect-Ratio plugins)
- Animations: Framer Motion 10
- AI Integration: @google/genai (Google Gemini API)
- Routing: React Router DOM 6
- Icons: Google Material Symbols
To enable the intelligent features (Search & Recommendations), you must have a valid Google Gemini API Key.
The application expects the following environment variable to be available:
process.env.API_KEY: Your Google Gemini API Key.
Since this project uses modern ES6 modules via an import map in index.html, no heavy build step is required for development.
- Clone the repository.
- Ensure your local environment provides the
API_KEY. - Open
index.htmlvia a local development server (e.g., VS Code Live Server).
/components: Atomic UI elements (Buttons, Badges) and complex layout sections./pages: Full-page views including Home, Shop, Product Details, and legal pages./utils: Helper functions, specifically thegemini.tsintegration for AI features./data: Mock data generation for a robust 90-item product catalog.App.tsx: Central application logic, context provider, and routing.index.html: Main entry point with Tailwind configuration and ESM import maps.
ShopFlow adheres to Minimalist Functionalism. We believe that e-commerce should be invisible—getting the user from discovery to checkout with zero friction and maximum delight. This is achieved through high-contrast typography (Inter font), spacious layouts, and a "Night & Day" color palette optimized for all lighting conditions.
© 2026 ShopFlow Global Ltd. All rights reserved.