Use when building multi-vendor e-commerce marketplaces with Next.js 15, React 19, TypeScript, Stripe payments, Firebase auth, and PostgreSQL database
This skill provides expertise in building complete multi-vendor e-commerce marketplaces using Next.js 15, React 19, TypeScript, Tailwind CSS, Firebase Authentication, Stripe payments, and PostgreSQL database.
Use this skill when:
| Role | Capabilities |
|---|
| Customer | Browse, search, cart, checkout, reviews, wishlist |
| Seller | Shop management, product listings, order tracking, analytics |
| Admin | User management, platform oversight, content management |
| Layer | Technology |
|---|---|
| Frontend | React 19, Next.js 15, TypeScript |
| Styling | Tailwind CSS 4, Framer Motion, Swiper |
| Backend | Next.js App Router, Node.js |
| Database | PostgreSQL (Neon/Vercel) |
| Auth | Firebase Auth + Admin SDK |
| Payments | Stripe API |
| State | Zustand, React Context |
| UI | Radix UI, Lucide Icons |
| Deployment | Vercel |
USERS
├── firebase_uid (PK)
├── email
├── role (customer/seller/admin)
├── created_at
└── updated_at
SHOPS
├── id (PK)
├── owner_id (FK → USERS)
├── name
├── description
├── logo
└── created_at
PRODUCTS
├── id (PK)
├── shop_id (FK → SHOPS)
├── name
├── description
├── price
├── stock
├── category_id (FK)
└── images
ORDERS
├── id (PK)
├── customer_id (FK → USERS)
├── total
├── status
├── created_at
└── updated_at
CART
├── id (PK)
├── user_id (FK → USERS)
└── items (JSON)
REVIEWS
├── id (PK)
├── product_id (FK → PRODUCTS)
├── user_id (FK → USERS)
├── rating
└── comment
CATEGORIES
├── id (PK)
├── name
└── parent_id (FK → CATEGORIES)
BANNERS
├── id (PK)
├── title
├── image
└── link
shopnest-ecommerce/
├── app/
│ ├── (auth)/ # Authentication pages
│ ├── (dashboard)/ # Dashboard layouts
│ ├── (shop)/ # Shopping pages
│ ├── api/ # API routes
│ └── layout.tsx
├── components/
│ ├── ui/ # UI components
│ ├── forms/ # Form components
│ ├── dashboard/ # Dashboard components
│ └── products/ # Product components
├── lib/
│ ├── firebase/ # Firebase config
│ ├── stripe/ # Stripe utilities
│ ├── db/ # Database utilities
│ └── utils.ts
├── hooks/ # Custom hooks
├── stores/ # Zustand stores
├── types/ # TypeScript types
└── public/ # Static assets
// lib/firebase/config.ts
import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
const firebaseConfig = {
apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
};
const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
// lib/stripe/server.ts
import Stripe from 'stripe';
export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
apiVersion: '2024-12-18.acacia',
});
export async function createPaymentIntent(amount: number) {
return await stripe.paymentIntents.create({
amount,
currency: 'usd',
});
}
// lib/db/index.ts
import { Pool } from 'pg';
const pool = new Pool({
connectionString: process.env.DATABASE_URL,
ssl: { rejectUnauthorized: false },
});
export async function query(text: string, params?: any[]) {
const client = await pool.connect();
try {
return await client.query(text, params);
} finally {
client.release();
}
}
// stores/cart-store.ts
import { create } from 'zustand';
interface CartItem {
productId: string;
quantity: number;
price: number;
}
interface CartStore {
items: CartItem[];
addItem: (item: CartItem) => void;
removeItem: (productId: string) => void;
clearCart: () => void;
}
export const useCartStore = create<CartStore>((set) => ({
items: [],
addItem: (item) => set((state) => ({
items: [...state.items, item]
})),
removeItem: (id) => set((state) => ({
items: state.items.filter(i => i.productId !== id)
})),
clearCart: () => set({ items: [] }),
}));
When helping build e-commerce platforms:
# Firebase
NEXT_PUBLIC_FIREBASE_API_KEY=
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
NEXT_PUBLIC_FIREBASE_PROJECT_ID=
# Stripe
STRIPE_SECRET_KEY=
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
# Database
DATABASE_URL=
# App
NEXT_PUBLIC_APP_URL=
gsap-animations-website - For product animationsux-resource - For e-commerce UX best practicesfs-poster-wordpress - For social media product sharingC:\Users\user\.qwen\skills\shopnest-ecommerce
shopnest-virid.vercel.app