Saud Leather E-commerce Web App

Saud Leather is a modern e-commerce storefront for premium leather goods, fashion essentials, bags, apparel, and accessories. The application is built with Next.js, React, TypeScript, Tailwind CSS, Firebase/Firestore, and Cloudinary.

The project includes a polished customer storefront, product detail pages, cart and profile flows, admin product management, CMS-style storefront controls, analytics/insights screens, and SEO-ready metadata.

Features

• Responsive storefront with hero banners, featured products, collections, categories, testimonials, and footer social links.
• Product catalog with product cards, pricing, variants, images, stock fields, tags, ratings, and review counts.
• Product detail page with multi-image support, cart actions, size/color selections, and product descriptions.
• Cart drawer and cart page powered by a shared React context.
• Customer authentication/profile flow backed by Firebase client configuration.
• Admin dashboard for managing products and storefront content.
• CMS controls for hero banners, collections, categories, testimonials, notices, and social links.
• Cloudinary unsigned upload support for product and CMS media.
• Firestore admin integration for server-side CRUD operations.
• Admin insights dashboard for store visibility and management.
• SEO-ready Next.js metadata, sitemap, robots configuration, Open Graph, and Twitter card support.

Tech Stack

Area	Tools
Framework	Next.js 15, React 19
Language	TypeScript
Styling	Tailwind CSS, shadcn/ui-style components, Radix UI
Data	Firebase, Firestore
Media	Cloudinary unsigned uploads
UI/UX	Lucide React, Framer Motion, GSAP, Sonner
Forms & Validation	React Hook Form, Zod
Charts	Recharts
Tooling	ESLint, PostCSS, npm

Project Structure

.
|-- app/                         # Next.js app router pages and API routes
|   |-- admin/                   # Admin dashboard pages
|   |-- api/                     # Storefront, product, customer, and admin APIs
|   |-- cart/                    # Cart page
|   |-- main-product/            # Main catalog page
|   |-- product/[id]/            # Dynamic product details
|   |-- profile/                 # Customer profile page
|   |-- layout.tsx               # Global metadata and providers
|   |-- robots.ts                # Robots configuration
|   `-- sitemap.ts               # Sitemap generation
|-- src/
|   |-- components/              # Shared components and admin tools
|   |-- components/ui/           # Reusable UI primitives
|   |-- context/                 # Cart and customer auth contexts
|   |-- data/                    # Local product fallback data
|   |-- lib/                     # Firebase, Firestore, Cloudinary, auth, storefront helpers
|   |-- sections/                # Homepage sections
|   |-- types/                   # Shared TypeScript types
|   `-- views/                   # Main page-level UI views
|-- public/                      # Static assets
|-- .env.example                 # Required environment variables
|-- next.config.ts               # Next.js configuration
`-- package.json                 # Scripts and dependencies

Getting Started

Prerequisites

• Node.js 20 or newer
• npm
• Firebase project with Firestore enabled
• Cloudinary account with an unsigned upload preset

Installation

Clone the repository and install dependencies:

git clone <your-repository-url>
cd E-commerce-Web-App
npm install

Create a local environment file:

cp .env.example .env.local

Fill in the required values in .env.local.

Environment Variables

# Firebase / Firestore
FIREBASE_PROJECT_ID=
FIRESTORE_DATABASE_ID=(default)
NEXT_PUBLIC_FIREBASE_PROJECT_ID=
NEXT_PUBLIC_FIREBASE_API_KEY=
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=
NEXT_PUBLIC_FIREBASE_APP_ID=

# Cloudinary unsigned uploads
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=
NEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET=

# Temporary admin gate
ADMIN_ACCESS_TOKEN=change-this-admin-token

# Server-only Firestore writes for /admin CRUD
FIREBASE_CLIENT_EMAIL=
FIREBASE_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\n...\n-----END PRIVATE KEY-----\n"

Environment Notes

• NEXT_PUBLIC_* variables are available in the browser.
• FIREBASE_CLIENT_EMAIL and FIREBASE_PRIVATE_KEY must stay server-only.
• ADMIN_ACCESS_TOKEN is a temporary admin gate and should be replaced with production-grade authentication before launch.
• NEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET should point to an unsigned preset configured in Cloudinary.

Available Scripts

npm run dev

Starts the local development server.

npm run build

Creates a production build.

npm run start

Runs the production server after building.

npm run lint

Runs ESLint checks.

Main Routes

Route	Description
/	Homepage storefront
/main-product	Product listing/catalog page
/product/[id]	Product detail page
/cart	Cart page
/profile	Customer profile dashboard
/admin	Admin management dashboard
/admin/insights	Admin insights dashboard

API Routes

Route	Purpose
/api/products	Product data endpoint
/api/storefront	Storefront CMS data endpoint
/api/customer	Customer-related operations
/api/admin	Admin operations
/api/admin/cms	CMS content management
/api/admin/seed	Storefront/product seeding

Admin Workflow

The admin area supports:

• Creating, updating, and deleting products.
• Managing product images through Cloudinary.
• Editing storefront content such as banners, categories, collections, notices, social links, and testimonials.
• Viewing product/store insights from the admin dashboard.
• Seeding starter storefront data when needed.

Admin access currently depends on ADMIN_ACCESS_TOKEN. For production, replace this with Firebase Auth, custom claims, or another secure role-based authentication flow.

Deployment

The app is designed for deployment on platforms that support Next.js, such as Vercel, Firebase App Hosting, or a Node.js server.

Before deploying:

1. Add all environment variables to the hosting provider.
2. Confirm Firestore security rules and service account permissions.
3. Configure Cloudinary upload restrictions.
4. Run npm run build locally.
5. Replace the temporary admin token flow with secure authentication for production use.

SEO

The project includes:

• App-level metadata in app/layout.tsx.
• Open Graph and Twitter card metadata.
• robots.ts for crawler rules.
• sitemap.ts for sitemap generation.
• Configurable NEXT_PUBLIC_SITE_URL support through metadata defaults.

Security Checklist

• Do not commit .env.local.
• Keep Firebase private keys server-only.
• Rotate the default ADMIN_ACCESS_TOKEN.
• Restrict Cloudinary unsigned upload presets by folder, format, and size.
• Review Firestore security rules before production.
• Use role-based admin authentication before accepting real customer or order data.

License

This project is private by default. Add a license file if you plan to distribute or open-source it.