Ecommerce Template
Modern ecommerce template built with Next.js 16, React 19, Drizzle, Better Auth, Supabase, and Stripe.
Publish a catalogue once. Let anyone sell it from their own store. GitShop runs the orders, the payments and the payouts.
CommerceTypeScript · CSSGitHub @BayoGabrielOnlineOwner unconfirmed
Have you tried it? One tap is enough. No sign-in needed.
No updates detected yet. GitHub releases will appear here.
GitHub star growth between the latest completed 8-hour observations
Modern ecommerce template built with Next.js 16, React 19, Drizzle, Better Auth, Supabase, and Stripe.
Owners of public repositories under a personal GitHub account can sign in to verify ownership and manage the introduction themselves. No administrator approval is needed.
Sign in, generate a verification file, and commit it to this repository’s default branch within 30 minutes. Files on other branches or forks do not count. Then check the file below to manage the project without administrator approval. Keep the file to retain your access.
If needed, you will go to sign-in. After signing in, return here and press your chosen verification button again.
Run /nomorevibe verify in your project folder to verify ownership and manage the introduction yourself.
Verify in one minuteAsk about other verification options
The maker's introduction consists of the line above. Read the repository README for more details. Repository README ↗
Loading the full README.
Read the full README ↗Public brand website for GitShop — "GitHub for wholesale commerce". Built with Vite, React 19, TypeScript (strict), Tailwind v4, React Router v7 and Radix UI.
npm install
npm run dev # dev server
npm run build # type-check + production build
npm run lint # eslint
npm run preview # serve the production build
npm run check:buyer-surfaces # fails on supply-chain wording in customer-facing components
npm run check:placeholders # counts data-placeholder flags (STRICT_PLACEHOLDERS=1 fails)
npm run images:placeholders # regenerate all image placeholders in public/images/
node scripts/preview-serve.mjs # gzip-capable static server for dist/ (PORT env, default 5399)
node scripts/axe-check.mjs # axe on every route (needs dev/preview server on :5199, BASE_URL override)
node scripts/capture-screenshots.mjs # docs/screenshots/ at 360/768/1280, light+dark
Optional environment (see .env.example):
| Variable | Purpose |
|---|---|
VITE_API_BASE_URL | Backend origin for sign in / sign up (POST /api/v1/login, POST /api/v1/create-account). Forms degrade honestly when unset. |
VITE_CONTACT_API_URL | Contact form endpoint (POST {name,email,topic,message}). |
VITE_SITE_URL | Canonical origin for canonical/OG URLs (default https://gitshop.co). |
src/styles/tokens.css — the source of truth: black/white/neutral-grey
palette (red for errors only), radii, stack steps, controls, motion, z-index.
Dark theme values live under [data-theme='dark'].src/styles/theme.css — maps semantic tokens to Tailwind utilities
(bg-raised, text-muted, border-border-strong, rounded-md,
duration-fast, …). Do not write hex colours, pixel radii or millisecond
durations in components — use the token utilities.src/styles/typography.css — .display-xl/.display-lg, .h1–.h4,
.body-lg/.body-sm, .caption, .overline, .amount, .measure.src/styles/stack.css — .stack layered-depth primitive (replaces card
shadows), fan-on-hover, stack-assemble hero animation (reduced-motion safe).Type: Sora (display), Inter (body), JetBrains Mono (data) — self-hosted via
Fontsource, loaded in src/main.tsx.
data-theme on <html> is light | dark, resolved from a light | dark |
system preference stored in localStorage (gitshop-theme). The inline
script in index.html prevents flash; src/lib/theme.ts +
src/hooks/useTheme.ts + ThemeToggle drive it.
src/components/ui/ — primitives (Button, Input, Select, Checkbox, Switch,
Badge, Avatar, Card, Tabs, Accordion, Modal, Toast, Table, EmptyState, …).src/components/patterns/ — domain components (RepoCard, WalletCard,
TransactionRow, OrderTimeline, MarkupEditor).src/components/layout/ — SiteHeader, MobileMenu, SiteFooter, Section,
PageHero, RootLayout.src/pages/ — one file per route (lazy-loaded in src/app/router.tsx).src/features/ — marketing (sections + mockups), storefront
(buyer-facing mockups, covered by check:buyer-surfaces), auth,
contact, uikit (demo sections for /ui-kit).src/content/ — all marketing copy and the image manifest (images.ts).public/images/<slot>.webp — replace any photo by overwriting the file at
the same name; see docs/imagery.md and docs/placeholder-inventory.md.src/lib/ — cn, format (integer-minor-unit money), theme./ui-kit route — the component catalogue ("Storybook equivalent") showing
every component and state; toggle the header theme to check light/dark.Rules of thumb:
src/features/marketing/content.ts).lib/format.ts); never
floats, never optimistic success — pending until confirmed.h1 per page; use Section/SectionHeading/PageHero for structure.Official SVGs/PNGs live in src/assets/ (never edit them; Logo.tsx inlines
the official geometry with currentColor). public/ mirrors the files needed
at the site root: favicons, site.webmanifest, og-image-light.png (regenerate
with node scripts/generate-og.mjs), robots.txt, sitemap.xml.
npm run lint && npm run build
Manual checks: /ui-kit for component states, theme toggle for light/dark,
320–1536px widths, keyboard navigation, prefers-reduced-motion.