Hugging Face's logo

Spaces:
Hanzo-Community
/
ecommerce
Runtime error

App Files Community
ecommerce
File size: 3,469 Bytes 
ddaec8b
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
 
# Ecommerce Storefront

Complete online store with cart and product management

Built with [@hanzo/ui](https://github.com/hanzoai/ui) components - a modern React component library based on Radix UI and Tailwind CSS.

## 🚀 Quick Start

### Deploy to Hanzo Cloud

[![Deploy to Hanzo Cloud](https://img.shields.io/badge/Deploy%20to-Hanzo%20Cloud-purple?style=for-the-badge&logo=rocket)](https://hanzo.app/deploy?template=https://github.com/hanzoai/template-ecommerce-storefront)

**Instant deployment** - Click to deploy this template to Hanzo Cloud. If you're not signed in, we'll create a public repo for you and you can start editing immediately!

### Edit on Hanzo

[![Edit on Hanzo](https://img.shields.io/badge/Edit%20on-Hanzo-blue?style=for-the-badge&logo=react)](https://hanzo.app/edit/github/hanzoai/template-ecommerce-storefront)

**Cloud IDE** - Click to open this template in Hanzo's cloud development environment. No local setup required!

### Local Development

```bash
# Clone this template
git clone https://github.com/hanzoai/template-ecommerce-storefront.git
cd ecommerce-storefront

# Install dependencies
npm install
# or
pnpm install

# Start development server
npm run dev
# or
pnpm dev

# Open http://localhost:3000
```

## 🚢 Deploy to Hugging Face

This template includes a built-in publish option for Hugging Face Spaces:

1. **Login to Hugging Face** in your terminal:
   ```bash
   huggingface-cli login
   ```

2. **Use the built-in publish command**:
   ```bash
   npm run publish-hf
   # or
   pnpm publish-hf
   ```

   This will automatically:
   - Create a new Space in your HF account
   - Configure it for Next.js deployment
   - Push all necessary files
   - Your app will be live at: `https://huggingface.co/spaces/YOUR_USERNAME/ecommerce-storefront`

3. **Or manually push** to an existing Space:
   ```bash
   git remote add hf https://huggingface.co/spaces/YOUR_USERNAME/ecommerce-storefront
   git push hf main
   ```

## 🎨 Features

- **Product Grid**: Beautiful product showcase with filters
- **Shopping Cart**: Full cart functionality with quantity controls
- **Filters & Search**: Advanced product filtering
- **Responsive Design**: Works perfectly on all devices
- **Dark Mode**: Built-in dark mode support
- **TypeScript**: Full type safety

## 📦 What's Included

- Next.js 14 with App Router
- React 18 with Server Components
- TypeScript configuration
- Tailwind CSS with custom theme
- ESLint and Prettier configs
- @hanzo/ui component library
- Lucide React icons
- Hugging Face deployment config

## 🛠️ Customization

### Theme Colors

Edit `tailwind.config.js` to customize the color scheme:

```js
theme: {
  extend: {
    colors: {
      primary: {
        DEFAULT: "hsl(var(--primary))",
        foreground: "hsl(var(--primary-foreground))",
      },
      // Add your custom colors
    }
  }
}
```

### Components

All UI components are in `components/ui/`. They're built with:
- Radix UI primitives for accessibility
- Tailwind CSS for styling
- Full TypeScript support

## 📚 Documentation

- [Hanzo Documentation](https://hanzo.app/docs)
- [@hanzo/ui Components](https://github.com/hanzoai/ui)
- [Template Gallery](https://huggingface.co/spaces/hanzo-community/gallery)

## 🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

## 📄 License

MIT License - see [LICENSE](LICENSE) file for details.

---

Built with ❤️ by [Hanzo AI](https://hanzo.ai)