🍬 Sugarpop Studio

A beautifully crafted, kawaii-themed web application showcasing hand-crafted 2D/3D digital assets and gaming piloting services. Built using TanStack Start and Tailwind CSS for a premium, responsive, and delightful user experience.

---

🎨 Features

• Kawaii Asset Shop (/):
  • Dynamic filtering of 2D assets, 3D assets, low-poly models, Vtuber-ready, game-ready files, and more.
  • Live search and sorting options (featured items, price ascending/descending).
  • Premium interactive dialogs for detailed asset inspection (includes, file formats, and promotional bundles).
• Piloting Deals Portfolio (/piloting):
  • Safe, cozy, and professional gaming piloting services and active deals.
  • Easy setup for custom service image showcases.
  • Direct social contact integration (Twitter/Discord).
• Responsive & Playful Design:
  • Curated, sweet pastel color palettes.
  • Soft animations, wiggle effects, custom backgrounds, and smooth transitions.
  • Fully responsive grid layouts.

---

🛠️ Tech Stack

• Framework: TanStack Start (Modern full-stack React framework with file-based routing and Nitro engine)
• Styling: Tailwind CSS v4 & shadcn/ui components
• Icons: Lucide React
• State Management & Routing: TanStack Router & TanStack Query
• Runtime & Tooling: Vite, TypeScript, Bun (or npm/yarn/pnpm)

---

🚀 Getting Started

Prerequisites

You can use Bun (recommended) or npm / yarn / pnpm to manage dependencies.

Installation

1. Clone the repository:

   git clone <your-repository-url>
   cd shop

2. Install dependencies:

   bun install
   # or
   npm install

Running Locally

To start the development server with hot-reloading:

bun dev
# or
npm run dev

Open http://localhost:3000 (or the port specified in the terminal) in your browser.

Building for Production

To build the application for deployment:

bun run build
# or
npm run build

To preview the built production bundle locally:

bun run preview
# or
npm run preview

---

📁 Project Structure

├── .lovable/              # Lovable-specific configurations and integrations
├── src/
│   ├── assets/            # Static assets (product images, background patterns)
│   ├── components/
│   │   └── ui/            # Reusable shadcn UI components (button, dialog, select, badges, etc.)
│   ├── hooks/             # Custom React hooks
│   ├── lib/               # Utility functions (Tailwind merging, formatting)
│   ├── routes/            # File-based routes (pages)
│   │   ├── __root.tsx     # App shell & layout wrapper
│   │   ├── index.tsx      # Main Shop landing page
│   │   └── piloting.tsx   # Gaming Piloting deals page
│   ├── router.tsx         # TanStack Router configuration
│   ├── server.ts          # Server-entry for TanStack Start
│   ├── start.ts           # Client-entry for TanStack Start
│   └── styles.css         # Main stylesheet including design system tokens
├── bun.lock               # Bun lockfile
├── package.json           # Scripts & dependency definitions
├── tsconfig.json          # TypeScript configurations
└── vite.config.ts         # Vite bundler configurations

---

⚙️ Configuration & Customization

Updating Social Links

To set up your Twitter and Discord handles, configure the contact links inside the routing files:

• Shop page: src/routes/index.tsx (TWITTER_URL, DISCORD_URL)
• Piloting page: src/routes/piloting.tsx (TWITTER_URL, DISCORD_URL)

Adding Piloting Deals

To add active piloting deals to your page:

1. Place the promotional deal images in the src/assets/ directory (or a custom subfolder).
2. Import the image in src/routes/piloting.tsx.
3. Append an object { image: importedImage, name: "Deal Name" } to the deals array.

---

Note

This project is connected to Lovable. Avoid rewriting published Git history (force pushing, squashing, or rebasing commits already pushed to the remote branch) to preserve project history in the Lovable editor.