💎 Gems – Jewelry E-Commerce Storefront

A modern, full-featured jewelry e-commerce frontend built with React + Vite. Includes a customer-facing storefront with product browsing, cart, checkout (Paystack), Google Auth, an admin dashboard, and more.

🚀 Tech Stack

Core Framework

Tool	Purpose
React 18	UI library
Vite 6	Build tool & dev server
React Router DOM v6	Client-side routing

Styling & UI

Tool	Purpose
Tailwind CSS v3	Utility-first CSS framework
MUI (Material UI v6)	Component library
Radix UI	Accessible headless components (Accordion, Dialog, Select, Tabs, etc.)
Lucide React	Icon library
React Icons	Extended icon set
Framer Motion	Animations & transitions
class-variance-authority	Component variant management
clsx + tailwind-merge	Conditional class merging

Forms & Validation

Tool	Purpose
React Hook Form	Performant form management
Zod	Schema-based validation
@hookform/resolvers	Zod ↔ RHF adapter

Data Fetching & State

Tool	Purpose
TanStack Query v5	Server state management & caching
Axios	HTTP client
Custom `fetch`-based API layer	REST calls to the backend (`/api/v1`)

Authentication

Tool	Purpose
@react-oauth/google	Google OAuth 2.0
JWT (via localStorage)	Session token storage

Payments

Tool	Purpose
react-paystack	Paystack payment integration
Crypto payment flow	Manual proof-of-payment upload

Charts & Data Visualization

Tool	Purpose
Recharts	Admin dashboard charts
React CountUp	Animated stat counters

PDF & Export

Tool	Purpose
jsPDF + jspdf-autotable	PDF generation
html2pdf.js	HTML-to-PDF export
react-to-print	Print component utility

Media & UX

Tool	Purpose
Swiper	Touch-friendly carousels
React Slick + Slick Carousel	Image sliders
React Datepicker	Date pickers
React Lazy Load Image Component	Lazy image loading
browser-image-compression	Client-side image optimization
QRCode.react	QR code generation
Sonner	Toast notifications

SEO & Meta

Tool	Purpose
React Helmet Async	Dynamic `<head>` management
`sitemap.xml` + `robots.txt`	Search engine discoverability

Dev Tools & Linting

Tool	Purpose
ESLint v9	Code linting
eslint-plugin-react	React-specific lint rules
PostCSS + Autoprefixer	CSS processing
TypeScript types (`@types/react`)	Type support

Deployment

Tool	Purpose
Vercel	Hosting & deployment (`vercel.json` configured)

📁 Project Structure

Jewelry/
├── public/              # Static assets
├── src/
│   ├── admin/           # Admin dashboard pages & components
│   ├── components/      # Shared UI components
│   ├── contexts/        # React Context providers
│   ├── data/            # Static data / seed content
│   ├── features/        # Feature-specific modules
│   ├── layouts/         # Page layout wrappers
│   ├── pages/           # Route-level page components
│   │   ├── homePage/
│   │   ├── productPage/
│   │   ├── productDetailPage/
│   │   ├── cartPage/
│   │   ├── checkoutPage/
│   │   ├── loginPage/
│   │   ├── signUpPage/
│   │   ├── orderSuccessPage/
│   │   ├── transactionHistoryPage/
│   │   ├── cryptoPaymentPage/
│   │   └── ...policies
│   ├── services/        # API layer & auth services
│   │   ├── api.js       # REST client (fetch-based)
│   │   └── googleAuth.tsx
│   ├── utils/           # Helper utilities & cache
│   ├── App.tsx          # Root component with routing
│   └── main.jsx         # App entry point
├── index.html
├── vite.config.js
├── tailwind.config.js
├── vercel.json
└── package.json

⚙️ Environment Variables

Create a .env file in the root (see .env.example):

VITE_API_BASE_URL=http://localhost:7001
VITE_GOOGLE_CLIENT_ID=your_google_client_id
VITE_PAYSTACK_PUBLIC_KEY=your_paystack_public_key

🛠️ Getting Started

Prerequisites

Node.js v18+ (download)
npm v9+ (bundled with Node)

Installation

# 1. Clone the repository
git clone https://github.com/your-username/gems.git
cd gems

# 2. Install dependencies
npm install

# 3. Set up environment variables
cp .env.example .env
# Edit .env and fill in your values

Running Locally

npm run dev

The app will start at http://localhost:5173 (default Vite port).

Other Scripts

# Lint the codebase
npm run lint

# Build for production
npm run build

# Preview the production build locally
npm run preview

🌐 Deployment (Vercel)

The project is pre-configured for Vercel with vercel.json. To deploy:

# Install Vercel CLI (optional)
npm i -g vercel

# Deploy
vercel

Or simply connect the repo to vercel.com and it will auto-deploy on every push to main.

📄 License

This project is licensed under the terms of the LICENSE file.

Navigation Menu

Repository files navigation

💎 Gems – Jewelry E-Commerce Storefront

🚀 Tech Stack

Core Framework

Styling & UI

Forms & Validation

Data Fetching & State

Authentication

Payments

Charts & Data Visualization

PDF & Export

Media & UX

SEO & Meta

Dev Tools & Linting

Deployment

📁 Project Structure

⚙️ Environment Variables

🛠️ Getting Started

Prerequisites

Installation

Running Locally

Other Scripts

🌐 Deployment (Vercel)

📄 License

About

Releases

Packages

Contributors

Languages

Name		Name	Last commit message	Last commit date
fastapi-boilerplate		fastapi-boilerplate
public/favicon		public/favicon
src		src
.env		.env
.env.example		.env.example
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
robots.txt		robots.txt
sitemap.xml		sitemap.xml
tailwind.config.js		tailwind.config.js
vercel.json		vercel.json
vite.config.js		vite.config.js

Latest commit

History

Folders and files

Repository files navigation

💎 Gems – Jewelry E-Commerce Storefront

🚀 Tech Stack

Core Framework

Styling & UI

Forms & Validation

Data Fetching & State

Authentication

Payments

Charts & Data Visualization

PDF & Export

Media & UX

SEO & Meta

Dev Tools & Linting

Deployment

📁 Project Structure

⚙️ Environment Variables

🛠️ Getting Started

Prerequisites

Installation

Running Locally

Other Scripts

🌐 Deployment (Vercel)

📄 License

About

Topics

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages