Projects | Shiva Augusta UI/UX Portfolio

Intro

👋 Welcome to E-Comshoes App

E-ComShoes reimagines online sneaker shopping as a visual playground rather than just a transactional experience. As a sneaker enthusiast myself, I built this prototype to solve the frustration of cluttered e-commerce sites - where great designs get lost in endless grids. The app puts products front-and-center with cinematic sliding animations, instant color/size switching, and transparent policies (free shipping! easy returns!) that build trust upfront. While the cart functionality is coming in the next update, this MVP already proves how thoughtful motion design and clean layouts can make browsing feel like discovering gems at a boutique shop.

👋 Welcome to E-Comshoes App

Features

Key Features

Seamless Browsing: Horizontal scroll with momentum effects and Category filters in navbar
Product Customization: Live color switcher and size selector with inventory indicators
Trust Badges: Free shipping banner, 30-day return guarantee, and coupon system
Direct Purchase Flow: Single-product checkout without cart complexity
Responsive: Adapts to mobile/desktop viewports

Key Features

Seamless Browsing: Horizontal scroll with momentum effects and Category filters in navbar
Product Customization: Live color switcher and size selector with inventory indicators
Trust Badges: Free shipping banner, 30-day return guarantee, and coupon system
Direct Purchase Flow: Single-product checkout without cart complexity
Responsive: Adapts to mobile/desktop viewports

Key Features

Seamless Browsing: Horizontal scroll with momentum effects and Category filters in navbar
Product Customization: Live color switcher and size selector with inventory indicators
Trust Badges: Free shipping banner, 30-day return guarantee, and coupon system
Direct Purchase Flow: Single-product checkout without cart complexity
Responsive: Adapts to mobile/desktop viewports

Order Modal Implementation

A focused checkout experience for immediate purchases

// Modal Component Structure
const OrderModal = ({ product }) => {
  const [size, setSize] = useState('M');
  const [color, setColor] = useState('Black');

  return (
    <div className="fixed inset-0 bg-black/50 z-50">
      <div className="modal-content">
        <ProductPreview color={color} />
        <SizeSelector selected={size} onChange={setSize} />
        <ColorSwatches selected={color} onChange={setColor} />
        <PaymentForm onSubmit={handleOrder} />
      </div>
    </div>
  );
};

Order Modal Implementation

A focused checkout experience for immediate purchases

// Modal Component Structure
const OrderModal = ({ product }) => {
  const [size, setSize] = useState('M');
  const [color, setColor] = useState('Black');

  return (
    <div className="fixed inset-0 bg-black/50 z-50">
      <div className="modal-content">
        <ProductPreview color={color} />
        <SizeSelector selected={size} onChange={setSize} />
        <ColorSwatches selected={color} onChange={setColor} />
        <PaymentForm onSubmit={handleOrder} />
      </div>
    </div>
  );
};

Order Modal Implementation

A focused checkout experience for immediate purchases

// Modal Component Structure
const OrderModal = ({ product }) => {
  const [size, setSize] = useState('M');
  const [color, setColor] = useState('Black');

  return (
    <div className="fixed inset-0 bg-black/50 z-50">
      <div className="modal-content">
        <ProductPreview color={color} />
        <SizeSelector selected={size} onChange={setSize} />
        <ColorSwatches selected={color} onChange={setColor} />
        <PaymentForm onSubmit={handleOrder} />
      </div>
    </div>
  );
};

Tools

Conclusion

Laying the Foundation

E-ComShoes nails the fun part of sneaker shopping browsing. Smooth slides, quick size/color picks, and no-hassle policies (free shipping! 30-day returns!) make exploring products a breeze. Cart and checkout features are coming soon, but this prototype proves I can make e-commerce look good and feel effortless.

Laying the Foundation

Future Work

Integrate Redux for shared state with future cart
Add PayPal/GPay payment options
Implement order confirmation emails

Future Work

Integrate Redux for shared state with future cart
Add PayPal/GPay payment options
Implement order confirmation emails

Future Work

Integrate Redux for shared state with future cart
Add PayPal/GPay payment options
Implement order confirmation emails