Sup' Store is a next-gen, full-stack, serverless e-commerce platform designed to showcase modern TypeScript-driven frontend architecture. Built with Vite, React 18, Supabase, Stripe, and Tailwind CSS, it delivers a hyper-optimized development and user experience.
scss
📦 sup-store
┣ 📂 src
┃ ┣ 📂 components
┃ ┃ ┣ 🏗 Navbar.tsx
┃ ┃ ┣ 🛒 Cart.tsx
┃ ┃ ┣ 🏬 ProductList.tsx
┃ ┃ ┣ 🛠 AdminDashboard.tsx
┃ ┃ ┗ 🔐 Login.tsx
┃ ┣ 📂 lib
┃ ┃ ┗ 🔗 supabase.ts (Supabase Client)
┃ ┣ 📜 App.tsx (Router & Layout)
┃ ┗ 📜 main.tsx (React Entry)
┣ 📜 package.json
┣ 📜 tailwind.config.js
┣ 📜 tsconfig.json
┣ 📜 .eslintrc.js
┣ 📜 vite.config.ts
┗ 📜 README.md 🚀 (You're here!)
- Frontend: React 18 (Concurrent Mode), TypeScript, Tailwind CSS, Lucide Icons
- Backend: Supabase (Postgres + Auth), Stripe (Payments)
- Routing: React Router 6 (SPA Navigation)
- Build & Tooling: Vite (ES Modules, HMR, Lightning-Fast Builds)
- State Management: React’s built-in state + Supabase hooks
- Linting & Formatting: ESLint, Prettier, TypeScript strict mode
- ✅ Next-Gen Performance – Vite, React 18, and TailwindCSS for a blazing-fast UI.
- ✅ Serverless Backend – Supabase for auth, database, and storage without managing infra.
- ✅ Instant Checkout – Stripe-integrated payment flow (coming soon).
- ✅ Scalable Design System – TailwindCSS + tailwind-merge for dynamic styles.
- ✅ Full TypeScript Support – 100% type safety, strict mode enabled.
- ✅ Optimized DX – Hot module replacement, ESLint, Prettier, and VS Code integration.
- ✅ CI/CD Ready – Pre-configured for GitHub Actions + Vercel deployment (coming soon).
1️⃣ Clone & Install Dependencies
sh
git clone https://github.com/yourusername/t-shirt-store.git
cd t-shirt-store
pnpm install # or npm install / yarn install
2️⃣ Environment Setup Copy the .env.example file and configure your Supabase + Stripe keys:
sh
cp .env.example .env
Set up Supabase API keys and Stripe test keys.
3️⃣ Start the Dev Server
sh
pnpm dev # or npm run dev / yarn dev
Local Server Running at: http://localhost:5173/
###Supabase Schema Overview
- products – Stores product metadata (name, description, price).
- product_variants – Handles inventory with size/color variations.
- users – Manages authentication via Supabase Auth.
- orders (Upcoming) – Tracks purchases via Stripe.
Vercel Deployment (Frontend)
sh
pnpm build
vercel deploy --prod
Create a new project on Supabase.
Enable authentication (Email/Password).
Configure tables using supabase/migrations.sql (coming soon).
Set up CORS & API rules for security.
Utilizing Supabase Storage with CDN-backed image serving for lightning-fast product images.
Improves performance via lazy-loaded React routes.
tsx
const AdminDashboard = lazy(() => import('./components/AdminDashboard'));
3️⃣ Optimized Tailwind Classes Using clsx + tailwind-merge to dynamically generate conflict-free, optimized styles.
tsx
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
const buttonClass = twMerge(clsx('px-4 py-2', 'bg-indigo-600', 'hover:bg-indigo-700'));
✔ Strict TypeScript Rules (noImplicitAny, strictNullChecks)
✔ ESLint + Prettier Enforced (eslint-plugin-react-hooks, typescript-eslint)
✔ Environment Variable Safety (dotenv)
✔ Supabase RLS (Row-Level Security) Enabled
💡 Pull Requests Welcome!
Fork the repo & create a feature branch (git checkout -b feature-xyz).
Make changes & commit with meaningful messages.
Run ESLint & TypeScript checks (pnpm lint & pnpm tsc).
Push & create a pull request.
📌 Stripe Checkout Integration
📌 User Profiles & Order History
📌 Dark Mode (Tailwind + Next Themes)
📌 PWA (Offline Mode + Installable App)
📌 AI-Powered Product Recommendations (OpenAI API)
This project is licensed under the MIT License.
💬 Questions? Open an Issue ⭐ Like this project? Star the repo!