Remix of Spot’s Style Showcase

Live Demos:

• Vercel Deployment
• Lovable App

An interactive product showcase for Spot’s dog-inspired apparel brand, built with Vite, React, TypeScript, Tailwind CSS, and shadcn-ui.
The app focuses on smooth animations, performant scrolling, and a premium “style lookbook” experience for browsing products, saving favorites, and exploring different styles.

Language Composition:

• TypeScript: 96.1%
• CSS: 3.1%
• Other: 0.8%

---

Project page: gitguy268.github.io/BlackLabSpotsShop

Run it locally, step by step

1. Install Node.js 22 or newer.

2. Get the code:

   git clone https://github.com/Gitguy268/BlackLabSpotsShop.git
   cd BlackLabSpotsShop

3. Install the dependencies:

   npm install

4. Start it:

   npm run dev

5. Open http://localhost:8080/ in your browser. Press Ctrl+C in the terminal to stop.

Features

• Product cards & quick view
  Browse products with rich cards, then open a Quick View modal for more details, sizing, and styling info.

• Wishlist
  Add/remove items from a wishlist and see how many favourites you’ve saved. Uses a dedicated Wishlist context and memoized logic to keep the UI snappy.

• Rating display
  Shared RatingDisplay component for consistent star ratings and review counts across product cards and quick view.

• Smart badges
  Centralized badge logic (e.g. “New”) so visual variants stay consistent across the app.

• Scroll-driven UI

  • Scroll progress bar
  • Back‑to‑top button
  • Floating “Shop” button
    All powered by shared scroll hooks with throttling and passive listeners for smooth performance.

• Minecraft mode
  A playful “Minecraft mode” toggle that changes the visual style/theme via its own context.

• Animated particle background
  A Three.js‑style particle background (in ParticleBackground) optimized to reduce CPU usage by sorting less frequently.

• Performance‑focused refactor

  • ~135 lines of duplicated code removed
  • Context values and heavy components memoized
  • Scroll handlers throttled and made passive
  • Animation constants centralized for easier tuning

---

Tech Stack

• Frontend: React, TypeScript, Vite
• Styling: Tailwind CSS, custom CSS, shadcn-ui
• State & Context: React Context API with memoized providers
• Utilities & Hooks:
  • useScrollUtils (scroll progress & visibility)
  • useLocalStorage (reusable localStorage state)
  • badgeUtils & animationConfig for UI consistency
• Backend / Data: Supabase (project scaffolding present in /supabase)

---

Project Structure

Key directories and files:

• src/

  • assets/ — Images and static assets
  • components/
    • ProductCard.tsx — Main product tile component
    • ProductQuickView.tsx — Modal for detailed product view
    • WishlistButton.tsx — “Add to wishlist” / toggle button
    • RatingDisplay.tsx — Shared rating UI
    • ScrollProgress.tsx, BackToTop.tsx, FloatingShopButton.tsx — Scroll‑based UI elements
    • ParticleBackground.tsx — Animated background
  • contexts/
    • CurrencyContext.tsx — Currency & price formatting
    • WishlistContext.tsx — Wishlist state and actions
    • MinecraftModeContext.tsx — Minecraft mode toggle
  • hooks/
    • useScrollUtils.ts — useScrollProgress & useScrollVisibility
    • useLocalStorage.ts — Generic localStorage hook
  • lib/
    • animationConfig.ts — Durations, easings, and transition presets
  • types/
    • product.ts — Shared Product and WishlistProduct types
  • utils/
    • badgeUtils.ts — getBadgeVariant helper for badges
  • pages/ — Top‑level page components
  • main.tsx, App.tsx — App entry and root layout

• supabase/ — Supabase configuration & SQL (if used)

• SUMMARY.md — High‑level summary of the refactoring work

• REFACTORING_REPORT.md — Detailed technical report of all refactors and optimizations

---

Getting Started

1. Prerequisites

• Node.js installed (Node 18+ recommended)
• Bun installed (the project uses a bun.lockb file) or npm.

2. Clone the repository

git clone <YOUR_GIT_URL>
cd remix-of-spot-s-style-showcase

3. Install dependencies

bun install
# or if using npm:
npm install

4. Run the development server

bun run dev
# or:
npm run dev

Then open the URL shown in your terminal (typically http://localhost:5173) in your browser.

---

Available Scripts

In the project directory, you can run:

• bun run dev (or npm run dev)
  Start the Vite dev server with hot reload.

• bun run build (or npm run build)
  Create a production build.

• bun run preview (or npm run preview)
  Preview the production build locally.

• bun run lint (or npm run lint)
  Run ESLint over the codebase (if configured in package.json).

Exact scripts may vary slightly depending on package.json.

---

Editing the Project

You can work with the project in several ways:

• Lovable UI
  Open the project in Lovable and use AI‑powered prompts to modify the app. Changes are automatically committed back to this repo.

• Local IDE (VS Code, WebStorm, etc.)
  Edit the code locally after cloning. Push commits, and Lovable will pick them up.

• GitHub web editor / Codespaces

  • Edit files directly via the GitHub web editor, or
  • Open a Codespace for a full cloud dev environment.

---

Performance & Architecture Notes

This repo includes a dedicated refactor focused on:

• Removing duplicated scroll logic via useScrollProgress and useScrollVisibility
• Centralising product types in src/types/product.ts
• Sharing rating UI with RatingDisplay
• Memoising:
  • Currency, wishlist, and Minecraft mode context values
  • Wishlist actions and computed helpers
  • WishlistButton via React.memo
• Reducing scroll events from ~60/sec to ~7/sec using throttling and passive listeners
• Cutting ParticleBackground sorting frequency by ~90% to reduce CPU usage

For the full breakdown, see:

• SUMMARY.md — Executive summary
• REFACTORING_REPORT.md — Detailed before/after code examples and measurements

---

Future Improvements

Some recommended next steps (also listed in the refactor docs):

• Use useLocalStorage inside Currency/Wishlist/Minecraft contexts for persistent state
• Add a useScrollFadeIn hook wired to animationConfig for reusable scroll animations
• Code‑split heavy visual components (like the particle background and any 3D/Three.js code)
• Optimise large images and use responsive formats (e.g. WebP + srcset)

---

License

[MIT]