Lovelace

Provide a short tagline for the project. You can change this later.

Comment

DarkShop - A Dark Gothic E-Commerce Experience

Inspiration

The inspiration for DarkShop came from the desire to create an e-commerce platform that breaks away from the traditional, sterile shopping experience. We wanted to merge the functionality of platforms like Amazon with a dark, gothic, Halloween-inspired aesthetic that would appeal to alternative culture enthusiasts and horror fans.

The concept was born from the question: "What if shopping online felt like entering a haunted mansion?" We envisioned a platform where every interaction—from browsing products to tracking orders—would be immersed in a carefully crafted atmosphere of mystery and darkness.

What it does

DarkShop is a fully functional e-commerce platform with a dark gothic theme that includes:

Core Features

  • Product Browsing: Browse through categories like Electronics, Fashion, Gaming, and more
  • Advanced Search: Real-time product search with filtering capabilities
  • Shopping Cart: Full cart management with add, remove, and quantity controls
  • User Authentication: Secure login/register system with role-based access (Customer/Seller)
  • Order Management: Complete order tracking with detailed status updates
  • Seller Dashboard: Dedicated interface for sellers to manage their products
  • Returns System: Full returns and refunds management

Unique Dark Theme Elements

  • Animated Background: Particle system with blood-red connections creating a matrix-like effect
  • Horror Decorations: Floating eyes that follow the cursor, screaming faces, skulls, and other gothic imagery
  • Halloween Effects: Flying bats, floating ghosts, spider webs, pumpkins, and blood drips
  • ASCII Text Animation: Product titles rendered with animated ASCII characters
  • Custom Cursor: Pentagram cursor that changes on hover
  • Creepster Font: Gothic horror typography throughout the entire interface

How we built it

Technology Stack

Frontend:

  • React 18: Component-based architecture for modular development
  • Vite: Lightning-fast build tool and development server
  • Tailwind CSS: Utility-first CSS framework for rapid styling
  • Lucide React: Icon library for consistent UI elements

State Management:

  • Context API: For global state (Auth, Cart)
  • React Hooks: useState, useEffect, useContext for local state

Backend Integration:

  • REST API: Connected to backend at https://kiroback.onrender.com
  • Axios: HTTP client for API requests

Architecture

src/
├── components/          # Reusable UI components
│   ├── Header.jsx      # Navigation and search
│   ├── HeroSection.jsx # Landing page hero
│   ├── ProductGrid.jsx # Product display
│   ├── CartModal.jsx   # Shopping cart
│   ├── OrdersReturns.jsx # Order management
│   ├── TrackOrder.jsx  # Order tracking
│   ├── UserProfile.jsx # User account
│   ├── SellerDashboard.jsx # Seller interface
│   ├── AnimatedBackground.jsx # Particle system
│   ├── HorrorDecorations.jsx # Gothic imagery
│   ├── HalloweenEffects.jsx # Animated elements
│   └── AsciiText.jsx   # ASCII animation
├── context/            # Global state management
│   ├── AuthContext.jsx # Authentication state
│   └── CartContext.jsx # Shopping cart state
├── services/           # API integration
│   └── api.js         # API calls
└── config/            # Configuration
    └── api.config.js  # API endpoints

Key Technical Implementations

  1. Canvas-based Animations: Used HTML5 Canvas API for particle systems and ASCII text effects
  2. CSS Animations: Custom keyframe animations for bats, ghosts, and blood drips
  3. Responsive Design: Mobile-first approach with Tailwind breakpoints
  4. Performance Optimization: Lazy loading, memoization, and efficient re-renders
  5. Custom Hooks: Reusable logic for authentication and cart management

Challenges we ran into

1. Performance with Multiple Animations

Challenge: Running particle systems, flying bats, floating ghosts, and ASCII animations simultaneously caused performance issues.

Solution:

  • Implemented requestAnimationFrame for smooth 60fps animations
  • Used CSS transforms instead of position changes for better GPU acceleration
  • Limited particle count based on screen size
  • Added visibility checks to pause animations when elements are off-screen

2. ASCII Text Rendering

Challenge: Converting text to animated ASCII characters while maintaining readability and performance.

Solution:

  • Created a custom Canvas-based component that samples text pixels
  • Implemented particle system where each character moves to form the text
  • Used monospace font and optimized character set for better visual effect
  • Added fade-in/fade-out transitions for smooth appearance

3. Cursor Following Eyes

Challenge: Making the horror images' eyes follow the mouse cursor realistically.

Solution:

const handleMouseMove = (e) => {
  const x = (e.clientX / window.innerWidth) * 100;
  const y = (e.clientY / window.innerHeight) * 100;
  setEyesPosition({ x, y });
};

Applied transform with easing for smooth, creepy movement.

4. Theme Consistency

Challenge: Maintaining a cohesive dark gothic aesthetic across all components while keeping the interface usable.

Solution:

  • Created a custom Tailwind color palette with blood-red (#dc143c) as primary
  • Used consistent opacity levels (5%, 20%, 40%) for layered effects
  • Implemented hover states that enhance visibility without breaking theme
  • Added subtle glows and shadows for depth

5. Mobile Responsiveness

Challenge: Horror decorations and animations cluttered the mobile experience.

Solution:

  • Used Tailwind's responsive classes (hidden lg:block) to hide decorations on small screens
  • Simplified animations for mobile devices
  • Created collapsible mobile menu
  • Optimized touch targets for better mobile UX

Accomplishments that we're proud of

  1. Unique Visual Identity: Created a truly distinctive e-commerce experience that stands out from traditional platforms

  2. Full Feature Set: Implemented complete e-commerce functionality including cart, checkout, order tracking, and seller dashboard

  3. Performance: Maintained smooth 60fps animations even with multiple effects running simultaneously

  4. Attention to Detail:

    • Eyes that follow cursor
    • Blood drips with realistic timing
    • Bats with random flight patterns
    • Ghosts with ethereal floating motion
    • Custom pentagram cursor

  5. Responsive Design: Seamless experience from mobile to desktop

  6. Code Quality: Clean, modular component architecture with reusable logic

What we learned

Technical Skills

  • Canvas API Mastery: Deep understanding of 2D rendering, pixel manipulation, and animation loops
  • Performance Optimization: Learned to profile and optimize React applications for smooth animations
  • CSS Animations: Advanced keyframe animations and GPU-accelerated transforms
  • State Management: Effective use of Context API for global state without Redux

Design Principles

  • Atmospheric Design: How to create mood and atmosphere through visual elements
  • Balance: Finding the sweet spot between aesthetic and usability
  • Accessibility: Ensuring dark themes remain accessible and readable
  • Progressive Enhancement: Starting with core functionality, then adding visual flair

Problem Solving

  • Creative Solutions: Using mathematical formulas for particle movements and eye tracking
  • Debugging Animations: Tools and techniques for debugging performance issues
  • Cross-browser Compatibility: Handling differences in Canvas rendering and CSS support

What's next for DarkShop

Short-term Goals

  1. Sound Effects: Add ambient horror sounds and interaction feedback
  2. More Animations: Implement page transition effects with blood splatter
  3. Product Customization: Allow users to customize product displays with different horror themes
  4. Wishlist Feature: Complete the heart icon functionality for saving favorite items
  5. Reviews System: Add product reviews with gothic-styled rating system

Long-term Vision

  1. AI-Powered Recommendations: Machine learning for personalized product suggestions
  2. AR Try-On: Augmented reality for fashion items with horror filters
  3. Social Features: Community for horror enthusiasts to share collections
  4. Seasonal Themes: Different horror themes (Vampire, Zombie, Witch, etc.)
  5. Gamification: Unlock special effects and themes through purchases
  6. Live Shopping Events: Horror-themed live streaming shopping events
  7. NFT Integration: Exclusive digital collectibles for loyal customers

Technical Improvements

  1. PWA: Convert to Progressive Web App for offline functionality
  2. WebGL: Upgrade to 3D effects using Three.js
  3. Server-Side Rendering: Implement Next.js for better SEO
  4. Real-time Features: WebSocket integration for live inventory updates
  5. Payment Integration: Stripe/PayPal with custom gothic checkout flow

Mathematical Concepts Used

Particle Movement

The particle system uses vector mathematics for smooth movement:

$$\vec{v} = (\vec{target} - \vec{current}) \times speed$$

Where particles move toward their target position with easing: $$x_{new} = x_{current} + (x_{target} - x_{current}) \times 0.05$$

Eye Tracking

The eyes follow the cursor using normalized screen coordinates: $$x_{normalized} = \frac{x_{mouse}}{width_{screen}} \times 100$$ $$y_{normalized} = \frac{y_{mouse}}{height_{screen}} \times 100$$

Bat Flight Path

Bats follow a sinusoidal path for realistic flight: $$y(t) = y_0 + A \sin(\omega t + \phi)$$

Where:

  • $A$ = amplitude (height variation)
  • $\omega$ = angular frequency (speed)
  • $\phi$ = phase shift (randomization)

DarkShop represents the fusion of e-commerce functionality with immersive horror aesthetics, proving that online shopping can be both practical and entertaining. The project demonstrates that with creativity and technical skill, even traditional platforms can be reimagined into unique, memorable experiences.

"Shop in the shadows, where every purchase is a dark delight." 🦇💀🕷️

Built With

Share this project:

Updates