Skip to content

Commit 155468b

Browse files
theteleportertheteleporter
committed
feat: initial public release
1 parent 4a5f553 commit 155468b

File tree

9 files changed

+289
-66
lines changed

9 files changed

+289
-66
lines changed

‎.env.example‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Shopify Storefront API Configuration
2+
# Get these from: Shopify Admin → Settings → Apps → Develop apps
3+
4+
NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN=your-store.myshopify.com
5+
NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN=your_storefront_access_token_here

‎.gitattributes‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# Auto detect text files and normalize line endings
2+
* text=auto
3+
4+
# TypeScript
5+
*.ts text eol=lf
6+
*.tsx text eol=lf
7+
8+
# JavaScript
9+
*.js text eol=lf
10+
*.jsx text eol=lf
11+
*.mjs text eol=lf
12+
13+
# JSON
14+
*.json text eol=lf
15+
16+
# CSS
17+
*.css text eol=lf
18+
19+
# Markdown
20+
*.md text eol=lf
21+
22+
# Images
23+
*.png binary
24+
*.jpg binary
25+
*.jpeg binary
26+
*.gif binary
27+
*.ico binary
28+
*.svg text eol=lf
29+
*.webp binary
30+
31+
# Fonts
32+
*.woff binary
33+
*.woff2 binary
34+
*.ttf binary
35+
*.otf binary
36+
*.eot binary

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ yarn-error.log*
3232

3333
# env files (can opt-in for committing if needed)
3434
.env*
35+
!.env.example
3536

3637
# vercel
3738
.vercel

‎CONTRIBUTING.md‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
# Contributing to Hirachu
2+
3+
Thanks for your interest in contributing! Here's how you can help.
4+
5+
## Getting Started
6+
7+
1. Fork the repository
8+
2. Clone your fork: `git clone https://github.com/theteleporter/hirachu.git`
9+
3. Create a branch: `git checkout -b feature/your-feature`
10+
4. Install dependencies: `pnpm install`
11+
5. Set up `.env.local` with your Shopify credentials
12+
6. Start dev server: `pnpm dev`
13+
14+
## Development Guidelines
15+
16+
### Code Style
17+
18+
- Use TypeScript for type safety
19+
- Follow existing patterns and naming conventions
20+
- Keep components small and focused
21+
- Use Tailwind utility classes (avoid custom CSS when possible)
22+
- Prefer Server Components unless interactivity is needed
23+
24+
### Commit Messages
25+
26+
Use clear, descriptive commit messages:
27+
```
28+
feat: add wishlist badge to menu
29+
fix: resolve cart drawer animation glitch
30+
docs: update README installation steps
31+
```
32+
33+
### Pull Requests
34+
35+
1. Update documentation if needed
36+
2. Test your changes thoroughly
37+
3. Keep PRs focused on a single feature/fix
38+
4. Link any related issues
39+
40+
## Project Structure
41+
42+
- `app/` - Next.js pages and API routes
43+
- `components/` - React components
44+
- `lib/` - Utilities and helpers
45+
- `public/` - Static assets
46+
47+
## Areas to Contribute
48+
49+
- UI/UX improvements
50+
- Performance optimizations
51+
- Bug fixes
52+
- Documentation
53+
- New features (discuss first in an issue)
54+
55+
## Questions?
56+
57+
Open an issue or reach out to [@theteleporter_](https://x.com/theteleporter_)

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2026 The Teleporter
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 159 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,176 @@
1-
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
1+
# Hirachu
2+
3+
A modern e-commerce storefront for handcrafted Japanese dolls, built with Next.js 16 and Shopify's Storefront API. Features a Tokyo-inspired minimalist design with smooth animations and progressive web app capabilities.
4+
5+
## Features
6+
7+
- **Headless Shopify** - Full integration with Shopify Storefront API 2025-10
8+
- **Tokyo Minimalist Design** - Clean, editorial aesthetic with smooth interactions
9+
- **Full E-commerce** - Cart, checkout, wishlist, and product search
10+
- **Command Palette Search** - Lightning-fast product search with Ctrl+K (⌘K)
11+
- **Progressive Web App** - Offline support with custom service worker
12+
- **Performance Optimized** - ISR caching, lazy loading, image optimization
13+
- **SEO Ready** - Dynamic OG images, structured data, and metadata
14+
- **Server Actions** - Modern form handling with Next.js Server Actions
15+
- **Analytics** - Vercel Analytics and Speed Insights integrated
16+
17+
## Tech Stack
18+
19+
- **Framework:** Next.js 16 (App Router, Turbopack)
20+
- **Styling:** Tailwind CSS v4
21+
- **Animations:** Framer Motion
22+
- **E-commerce:** Shopify Storefront API
23+
- **Search:** cmdk (Command Palette)
24+
- **Icons:** Phosphor Icons
25+
- **Fonts:** Geist, Geist Mono, Hachi Maru Pop
226

327
## Getting Started
428

5-
First, run the development server:
29+
### Prerequisites
30+
31+
- Node.js 18+
32+
- pnpm (recommended) or npm
33+
- Shopify store with Storefront API access
34+
35+
### Installation
36+
37+
1. Clone the repository:
38+
```bash
39+
git clone https://github.com/yourusername/hirachu.git
40+
cd hirachu
41+
```
42+
43+
2. Install dependencies:
44+
```bash
45+
pnpm install
46+
```
47+
48+
3. Set up environment variables:
49+
50+
Create a `.env.local` file:
51+
52+
```env
53+
NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN=your-store.myshopify.com
54+
NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN=your_storefront_access_token
55+
```
656

57+
**Getting Shopify credentials:**
58+
1. Shopify Admin → Settings → Apps and sales channels
59+
2. "Develop apps" → "Create an app"
60+
3. Configure Storefront API scopes (products, collections, cart)
61+
4. Install and copy your Storefront Access Token
62+
63+
4. Run development server:
764
```bash
8-
npm run dev
9-
# or
10-
yarn dev
11-
# or
1265
pnpm dev
13-
# or
14-
bun dev
1566
```
1667

17-
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
68+
Open [http://localhost:3000](http://localhost:3000)
69+
70+
### Build for Production
71+
72+
```bash
73+
pnpm build
74+
pnpm start
75+
```
76+
77+
## Project Structure
78+
79+
```
80+
hirachu/
81+
├── app/ # App directory
82+
│ ├── api/ # API routes (OG images)
83+
│ ├── shop/ # Product pages
84+
│ └── ... # Static pages
85+
├── components/ # React components
86+
│ ├── sections/ # Page sections
87+
│ ├── cart/ # Cart components
88+
│ └── ...
89+
├── lib/ # Utilities
90+
│ ├── shopify.ts # Shopify client
91+
│ ├── actions.ts # Server Actions
92+
│ └── ...
93+
├── public/ # Static assets
94+
│ ├── images/ # Product images
95+
│ └── sw.js # Service worker
96+
└── ...
97+
```
98+
99+
## Configuration
100+
101+
### Email Integration
102+
103+
Add your email service in `lib/actions.ts`:
104+
105+
```typescript
106+
// Newsletter: subscribeToNewsletter()
107+
// Contact: submitContactForm()
108+
```
109+
110+
Recommended: Resend, SendGrid, or Postmark.
111+
112+
### Customization
113+
114+
- **Colors:** `app/globals.css`
115+
- **Fonts:** `app/layout.tsx`
116+
- **Products:** Import CSV from `files/` to Shopify
117+
118+
## Key Features
119+
120+
### Product Search
121+
- Press `Ctrl+K` (⌘K on Mac)
122+
- Fuzzy search with instant results
123+
- ESC to close
124+
125+
### Wishlist
126+
- Click heart icon to save products
127+
- Persisted in localStorage
128+
- Badge shows count
129+
130+
### Cart
131+
- Add from product pages
132+
- Drawer interface
133+
- Redirects to Shopify checkout
134+
135+
### PWA
136+
- Offline support for key pages
137+
- Auto-registers in production
138+
139+
## Deployment
140+
141+
### Vercel (Recommended)
142+
143+
1. Push to GitHub
144+
2. Import in Vercel
145+
3. Add environment variables
146+
4. Deploy
147+
148+
### Other Platforms
18149

19-
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
150+
Works on any Next.js hosting:
151+
- Netlify
152+
- Railway
153+
- Fly.io
154+
- Self-hosted
20155

21-
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
156+
## Performance
22157

23-
## Learn More
158+
- ISR revalidation: 1 hour
159+
- Lighthouse scores: 95+
160+
- Image optimization
161+
- Route-based code splitting
162+
- Automatic prefetching
24163

25-
To learn more about Next.js, take a look at the following resources:
164+
## License
26165

27-
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28-
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
166+
MIT License
29167

30-
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
168+
## Author
31169

32-
## Deploy on Vercel
170+
**The Teleporter**
171+
- Website: [dex.codes](https://dex.codes)
172+
- Twitter: [@theteleporter_](https://x.com/theteleporter_)
33173

34-
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
174+
---
35175

36-
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
176+
Built for doll collectors worldwide

‎app/api/newsletter/route.ts‎

Lines changed: 0 additions & 33 deletions
This file was deleted.

0 commit comments

Comments
 (0)