Live Demo Prototype

SneakInd Interactive Demo

Experience a complete Indian artist sneaker marketplace built in 60 minutes using The AI PM Framework. Browse 30+ sneakers, add to cart, and complete the checkout flow.

← All Demo Projects

Interactive Prototype

Click and explore the full sneaker marketplace experience

8 Screens

30+ Products

60 Min Build

About SneakInd

A mobile-first marketplace connecting Indian youth with sneakers designed by local artists. Features authentic art styles including Madhubani, Warli, Mandala, and Street Art.

Key Features:

• 30+ unique sneakers across 7+ Indian art styles
• Artist profiles with inspiration stories
• Complete shopping cart and checkout flow
• Carbon offset sustainability features
• Order tracking and confirmation system
• Promo code system with discounts

Framework Usage

Built using The AI PM Framework's 60-minute workflow, demonstrating rapid prototyping for cultural e-commerce.

Build Process:

• Structured prompt creation (20 min)
• Initial multi-page build (15 min)
• Cultural design refinement (10 min)
• User flow testing (10 min)
• Final QE review (5 min)

Purpose:

Demonstrate cultural e-commerce concepts to investors and validate user interest in artist-designed products.

Ready to Build Your Own?

Use The AI PM Framework to create your own prototypes in 60 minutes or less. Start with the interactive prompt builder.

Start Building Now

SneakInd Source Code

Complete prototype built in 60 minutes

11 Files

~6,500 Lines

60 Min Build

HTML Structure (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SneakInd - Discover Your Soul's Sneaker</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <div class="container">
        <!-- Header -->
        <header class="header">
            <div class="logo">
                <h1>SneakInd</h1>
                <div class="paisley-accent"></div>
            </div>
            <div class="header-actions">
                <button class="cart-btn" onclick="goToCart()" aria-label="Shopping cart">
                    <i class="fas fa-shopping-cart" aria-hidden="true"></i>
                    <span class="cart-count" id="cartCount" aria-label="Cart items">0</span>
                </button>
                <button class="menu-btn" aria-label="User menu">
                    <i class="fas fa-user" aria-hidden="true"></i>
                </button>
            </div>
        </header>

        <!-- Search Section -->
        <section class="search-section">
            <div class="search-container">
                <div class="search-bar">
                    <i class="fas fa-search"></i>
                    <input type="text" placeholder="Discover sneakers that match your soul..." id="searchInput">
                </div>
                <button class="filter-btn">
                    <i class="fas fa-filter"></i>
                </button>
            </div>
        </section>

        <!-- Featured Categories -->
        <section class="categories-section">
            <h2>Explore Art Styles</h2>
            <div class="categories-grid">
                <div class="category-card" onclick="exploreCategory('madhubani')">
                    <div class="category-image madhubani-bg"></div>
                    <h3>Madhubani</h3>
                    <p>Traditional Bihar folk art</p>
                </div>
                <!-- More categories... -->
            </div>
        </section>

        <!-- Featured Sneakers -->
        <section class="featured-section">
            <div class="section-header">
                <h2>Featured Sneakers</h2>
                <button class="see-all-btn" onclick="window.location.href='products.html'">See All</button>
            </div>
            <div class="featured-grid" id="featuredSneakers">
                <!-- Featured sneakers will be loaded here -->
            </div>
        </section>

        <!-- Navigation -->
        <nav class="bottom-nav">
            <button class="nav-item active">
                <i class="fas fa-home"></i>
                <span>Home</span>
            </button>
            <button class="nav-item" onclick="window.location.href='products.html'">
                <i class="fas fa-search"></i>
                <span>Discover</span>
            </button>
            <button class="nav-item" onclick="window.location.href='cart.html'">
                <i class="fas fa-shopping-cart"></i>
                <span>Cart</span>
            </button>
        </nav>
    </div>

    <script src="mock-data.js"></script>
    <script src="script.js"></script>
</body>
</html>

CSS Styles (styles.css - Key Sections)

/* CSS Variables for Indian-inspired color scheme */
:root {
  --primary-pink: #8B3A62;
  --primary-purple: #5B2C6F;
  --primary-blue: #2E4A6B;
  --gradient-main: linear-gradient(135deg, #8B3A62 0%, #5B2C6F 50%, #2E4A6B 100%);
  --gradient-card: linear-gradient(135deg, rgba(139, 58, 98, 0.1) 0%, rgba(91, 44, 111, 0.1) 100%);
  --accent-gold: #D4AF37;
  --accent-orange: #FF7F50;
  
  --bg-primary: #1A1A1A;
  --bg-secondary: #2A2A2A;
  --bg-card: rgba(255, 255, 255, 0.05);
  --bg-card-hover: rgba(255, 255, 255, 0.1);
  
  --text-primary: #FFFFFF;
  --text-secondary: #B0B0B0;
  --text-accent: #D4AF37;
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
}

.container {
  max-width: 414px;
  margin: 0 auto;
  background: var(--bg-primary);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

.header {
  background: var(--gradient-main);
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
}

.logo h1 {
  font-size: 28px;
  font-weight: 700;
  background: linear-gradient(45deg, var(--accent-gold), #FFF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
}

.paisley-accent {
  width: 20px;
  height: 8px;
  background: var(--accent-gold);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  transform: rotate(45deg);
  margin-top: 4px;
}

/* Indian Art Style Backgrounds */
.madhubani-bg {
  background: linear-gradient(45deg, #D2691E, #FF7F50);
  background-image: 
    radial-gradient(circle at 25% 25%, rgba(255,255,255,0.2) 2px, transparent 2px),
    radial-gradient(circle at 75% 75%, rgba(255,255,255,0.1) 1px, transparent 1px);
}

.warli-bg {
  background: linear-gradient(45deg, #8B4513, #A0522D);
  background-image: 
    repeating-linear-gradient(45deg, rgba(255,255,255,0.1) 0px, rgba(255,255,255,0.1) 2px, transparent 2px, transparent 8px);
}

.mandala-bg {
  background: radial-gradient(circle, #8B3A62, #5B2C6F);
  background-image: 
    conic-gradient(from 0deg, rgba(255,255,255,0.1), transparent, rgba(255,255,255,0.1));
}

.street-bg {
  background: linear-gradient(135deg, #2E4A6B, #1A1A1A);
  background-image: 
    linear-gradient(45deg, rgba(255,255,255,0.1) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,0.1) 25%, transparent 25%);
}

JavaScript Logic (script.js - Key Functions)

// Main JavaScript for SneakInd App
// Global state management with error handling
let cart = [];
let favorites = [];

try {
  cart = JSON.parse(localStorage.getItem('sneakind-cart')) || [];
} catch (e) {
  console.warn('Error parsing cart data from localStorage:', e);
  localStorage.removeItem('sneakind-cart');
  cart = [];
}

// Utility Functions
function formatPrice(price) {
  return `₹${price.toLocaleString('en-IN')}`;
}

function saveToLocalStorage() {
  try {
    localStorage.setItem('sneakind-cart', JSON.stringify(cart));
    localStorage.setItem('sneakind-favorites', JSON.stringify(favorites));
  } catch (e) {
    console.error('Error saving to localStorage:', e);
    showNotification('Unable to save data. Please check your browser settings.', 'error');
  }
}

function updateCartCount() {
  const cartCountElements = document.querySelectorAll('#cartCount, .cart-count');
  const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0);
  cartCountElements.forEach(element => {
    if (element) element.textContent = totalItems;
  });
}

function showNotification(message, type = 'success') {
  const notification = document.createElement('div');
  notification.className = `notification ${type}`;
  notification.innerHTML = `
    <div class="notification-content">
      <i class="fas ${type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle'}"></i>
      <span>${message}</span>
    </div>
  `;
  
  document.body.appendChild(notification);
  
  setTimeout(() => {
    notification.classList.add('show');
  }, 100);
  
  setTimeout(() => {
    notification.classList.remove('show');
    setTimeout(() => {
      if (notification && notification.parentNode) {
        document.body.removeChild(notification);
      }
    }, 300);
  }, 3000);
}

// Cart Functions
function addToCart(sneakerId, size = null, quantity = 1) {
  const sneaker = sneakers.find(s => s.id === sneakerId);
  if (!sneaker) return;

  const existingItem = cart.find(item => 
    item.id === sneakerId && item.selectedSize === size
  );

  if (existingItem) {
    existingItem.quantity += quantity;
  } else {
    cart.push({
      ...sneaker,
      selectedSize: size,
      quantity: quantity,
      carbonOffsetEnabled: true,
      addedAt: new Date().toISOString()
    });
  }

  saveToLocalStorage();
  updateCartCount();
  showNotification(`${sneaker.name} added to cart!`);
}

// Featured Sneakers Loading
function loadFeaturedSneakers() {
  const featuredContainer = document.getElementById('featuredSneakers');
  if (!featuredContainer) return;

  const featured = sneakers.slice(0, 4);
  featuredContainer.innerHTML = featured.map(sneaker => `
    <div class="sneaker-card" onclick="viewSneakerDetail(${sneaker.id})">
      <div class="sneaker-image">
        <img src="${sneaker.images[0]}" alt="${sneaker.name}" loading="lazy">
        <button class="favorite-btn ${favorites.includes(sneaker.id) ? 'active' : ''}" 
                onclick="event.stopPropagation(); toggleFavorite(${sneaker.id})">
          <i class="fas fa-heart"></i>
        </button>
      </div>
      <div class="sneaker-info">
        <h3>${sneaker.name}</h3>
        <p class="artist-name">by ${sneaker.artist}</p>
        <p class="art-style">${sneaker.artStyle}</p>
        <div class="price-section">
          <span class="current-price">${formatPrice(sneaker.currentPrice)}</span>
          ${sneaker.originalPrice > sneaker.currentPrice ? 
            `<span class="original-price">${formatPrice(sneaker.originalPrice)}</span>` : ''
          }
        </div>
      </div>
    </div>
  `).join('');
}