Created with: Next.js, Node.js Tailwind CSS, Firebase, Cloudinary, Stripe,
🚀 Quick Start
npm install
Install Node.js (Recommended version: 18+)
Set up environment variables
Run: npm run dev
Visit: [http://localhost:3000]
[https://www.youtube.com/watch?v=xIVicHsKrrY]
⚙️ Firebase Setup Step 1: Create a Firebase Project Go to Firebase Console, click "Add Project", and follow instructions.
Step 2: Add Web App Register a new web app, copy the Firebase config snippet.
Step 3: Install Firebase SDK
Step 4: Add Environment Variables NEXT_PUBLIC_FIREBASE_API_KEY=your-api-key NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your-auth-domain NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-project-id NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your-storage-bucket NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your-messaging-sender-id NEXT_PUBLIC_FIREBASE_APP_ID=your-app-id Step 5: Firebase Service Account Key
Go to Firebase Console → Project Settings → Service Accounts
Click "Generate New Private Key" and download JSON file
Copy the full JSON and add it as a one-line string to .env.local
NEXT_PUBLIC_FIREBASE_SERVICE_ACCOUNT_KEYS='{"type":"service_account",...}'
Go to [https://console.cloudinary.com/]
Create a free Cloudinary account Add the following variables in .env.local:
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=your-cloud-name NEXT_PUBLIC_CLOUDINARY_API_KEY=your-api-key NEXT_PUBLIC_CLOUDINARY_API_SECRET=your-api-secret
This template supports integration with Stripe for secure online payments. Follow the steps below to enable Stripe in your project.
✅ Requirements A valid Stripe account Stripe API keys (Publishable and Secret)
Sign in to your Stripe Dashboard: [https://dashboard.stripe.com/]
Go to Developers > API Keys Copy the following keys: Publishable Key Secret Key
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=your-publishable-key STRIPE_SECRET_KEY=your-secret-key 🔐 Note: Never expose STRIPE_SECRET_KEY on the frontend.
Card Number: 4242 4242 4242 4242 Expiry: Any future date CVC: Any 3 digits ZIP: Any 5-digit number
This is a simplified overview of the folder structure:
NexSellio/ ├── public/ → Static assets ├── src/ │ ├── app/ → App router structure │ │ ├── (admin)/dashboard → Admin panel with all features (products, orders, blogs etc.) │ │ ├── (user)/ → User panel (shop, cart, checkout, etc.) │ │ ├── (auth)/auth → Login, signup, forget-password │ ├── components/ → Reusable UI components │ ├── firebase/ → Firebase logic split by feature (CRUDs) │ ├── hooks/ → Custom React Hooks │ ├── layout/ → Page layouts (admin/user) │ ├── lib/ → Firebase admin config │ ├── style/ → Global styles & animations ├── .env.local → Add your credentials here 🔐 Admin Panel Demo Login
URL: [https://nexsellio-ecommerce-script.vercel.app/dashboard]
Email: admin@nexsellio.com Password: Test1234
Is this project production-ready? Yes, all core features are fully working. Is Firebase setup included? Yes, setup guide and integration included. Do I need a paid Firebase plan? No, this works with the free Spark plan.
If you need any help setting up this eCommerce template or have questions regarding customization, integration, or deployment, feel free to reach out. I'm here to help you get your project running smoothly!
Email: mrghulamabbas10@gmail.com Portfolio: AK Web Services Please mention your purchase code and a brief description of the issue you're facing. Support includes help with:
Initial setup and environment configuration Firebase backend integration Stripe or payment setup Deployment guide and troubleshooting General questions and minor customizations
We welcome contributions from the developer community! If you find any issues or have suggestions for improvements, please feel free to create a pull request.
This project is licensed under the MIT License.
⛔ Note: Support does not include major code customizations or feature additions.
Thank you for choosing our product! ❤️ We’re always happy to see your projects succeed.🚀