A futuristic gaming e-commerce platform with AI-powered shopping assistance
- Product Catalog - Browse gaming hardware across multiple categories (Components, Peripherals, Laptops, Audio)
- Shopping Cart - Full cart functionality with quantity management
- Wishlist - Save products for later with one-click toggling
- Search - Global search across product names and descriptions
- Category Filtering - Filter products by category
- GX-ARES - AI-powered shopping assistant built with Google Gemini
- Tactical Gaming Persona - Provides recommendations with a "gamer-cool" personality
- Product Intelligence - Can explain specs, recommend gear, and help build optimal loadouts
- Dark/Light Mode - Full theme switching support
- Customizable Accent Color - Change the primary accent color
- RGB Glow Intensity - Adjustable glow effects
- Scanline Effects - Retro-futuristic visual effects
- Responsive Design - Optimized for desktop and mobile
- Supabase Auth - Secure user authentication
- User Profiles - Persistent user data
- Order History - View past purchases (simulated)
- Animated Sidebar - Collapsible navigation
- Product Cards - Rich product displays with ratings
- Checkout Flow - Multi-step checkout process
- Settings Panel - Theme customization options
- Trailers Section - Product video showcase
| Category | Technology |
|---|---|
| Frontend | React 19.2.3 |
| Language | TypeScript 5.8 |
| Build Tool | Vite 6.2 |
| Styling | Tailwind CSS + Custom CSS |
| Icons | Lucide React 0.561 |
| Authentication | Supabase (JS Client 2.89) |
| AI/LLM | Google Gemini API 1.34 |
| Analytics | Vercel Analytics |
| Fonts | Orbitron (Headers), Inter (Body) |
- Node.js 18+
- npm or yarn
- Supabase account (for authentication)
- Google Gemini API key (for AI assistant)
-
Clone the repository
cd /home/george/Desktop/gx-commerce -
Install dependencies
npm install
-
Create environment variables
Create a
.envfile in the root directory:# Supabase Configuration VITE_SUPABASE_URL=your_supabase_project_url VITE_SUPABASE_ANON_KEY=your_supabase_anon_key # Google Gemini API VITE_GEMINI_API_KEY=your_gemini_api_key
-
Configure Supabase
Create a
userstable in your Supabase project:create table users ( id uuid references auth.users not null, email text, created_at timestamp with time zone default timezone('utc'::text, now()) );
-
Start development server
npm run dev
-
Open your browser
http://localhost:3000
| Variable | Description | Required |
|---|---|---|
VITE_SUPABASE_URL |
Your Supabase project URL | ✅ Yes |
VITE_SUPABASE_ANON_KEY |
Supabase anonymous key | ✅ Yes |
VITE_GEMINI_API_KEY |
Google Gemini API key | ✅ Yes |
Supabase:
- Go to supabase.com
- Create a new project
- Go to Settings → API
- Copy the Project URL and anon key
gx-commerce/
├── public/ # Static assets
├── src/
│ ├── components/ # React components
│ │ ├── AIChat.tsx # AI assistant chat interface
│ │ ├── AuthModal.tsx # User authentication modal
│ │ ├── CheckoutModal.tsx # Checkout flow modal
│ │ ├── ProductCard.tsx # Product display card
│ │ ├── Profile.tsx # User profile page
│ │ ├── Settings.tsx # Theme settings panel
│ │ ├── Sidebar.tsx # Navigation sidebar
│ │ └── Trailers.tsx # Product video trailers
│ ├── services/ # External service integrations
│ │ ├── geminiService.ts # Google Gemini AI service
│ │ └── supabaseClient.ts # Supabase client setup
│ ├── App.tsx # Main application component
│ ├── constants.tsx # Product data & categories
│ ├── index.tsx # Application entry point
│ ├── main.tsx # React DOM rendering
│ └── types.ts # TypeScript type definitions
├── .env # Environment variables (create)
├── .gitignore # Git ignore rules
├── index.html # HTML entry point
├── package.json # Dependencies & scripts
├── tsconfig.json # TypeScript configuration
├── vite.config.ts # Vite configuration
└── README.md # This file
| Command | Description |
|---|---|
npm install |
Install all dependencies |
npm run dev |
Start development server |
npm run build |
Build for production |
npm run preview |
Preview production build |
GX-ARES (Automated Research & Equipment Specialist) is an AI shopping assistant designed specifically for gamers. It uses Google Gemini to provide intelligent product recommendations.
- Identity - Tactical wingman for your "Commander"
- Communication - High-energy, gamer-cool, but professional
- Lingo - Uses gaming terminology (loadout, meta, squad, GG)
- Product-aware recommendations based on current inventory
- Technical explanations with "Tactical Advantage" framing
- Formatted responses with headers like [STATUS], [INTEL], [COMMAND_DECISION]
- Knowledge of all products in the catalog
User: Hi
GX-ARES: "Uplink stable! Great to have you back on the grid, Commander.
My processors are primed and I'm ready to help you build a meta-tier loadout.
What's the mission today?"
User: What's the best GPU?
GX-ARES: [INTEL] The GX-9000 Phantom GPU leads the grid with 24GB GDDR6X
and a 2.8 GHz clock. [COMMAND_DECISION] For pure performance, this is your
best tactical choice for any high-end build.
The theme system uses CSS custom properties:
:root {
--bg-primary: #0b0b0d; /* Main background */
--bg-secondary: #161618; /* Secondary background */
--bg-tertiary: #1a1a1c; /* Tertiary elements */
--text-primary: #ffffff; /* Primary text */
--text-secondary: #9ca3af; /* Secondary text */
--border-color: #1f2937; /* Borders */
--accent-color: #fa1e4e; /* Accent color (default) */
--glow-intensity: 0.8; /* RGB glow intensity (0-1) */
}Add class="light" to the <html> element to switch to light theme.
Update --accent-color at runtime to change the accent color:
document.documentElement.style.setProperty("--accent-color", "#00ff00");- Push your code to GitHub
- Go to Vercel
- Import your repository
- Add environment variables in Vercel project settings
- Deploy
- Push your code to GitHub
- Go to Netlify
- Import your repository
- Add build command:
npm run build - Add output directory:
dist - Add environment variables
- Deploy
npm run buildThe built files will be in the dist/ directory.
import { getShoppingAdvice } from "./services/geminiService";
const response = await getShoppingAdvice(
"What's the best laptop for gaming?",
availableProducts,
);
console.log(response);Parameters:
userMessage(string): The user's questionavailableProducts(Product[]): Array of available products for context
Returns: Promise - AI response text
import { supabase } from "./services/supabaseClient";
// Sign up
const { data, error } = await supabase.auth.signUp({
email: "user@example.com",
password: "password123",
});
// Sign in
const { data, error } = await supabase.auth.signInWithPassword({
email: "user@example.com",
password: "password123",
});
// Sign out
await supabase.auth.signOut();
// Get current user
const {
data: { user },
} = await supabase.auth.getUser();Vite provides instant HMR - changes to any file will be reflected immediately.
The project uses strict TypeScript mode. Ensure all new components follow the type definitions.
The @ alias is configured to point to the project root for cleaner imports:
import { supabase } from "@/services/supabaseClient";MIT License - Feel free to use this project for learning or as a starting point for your own e-commerce applications.
Contributions are welcome! Please feel free to submit a Pull Request.
For questions or issues:
- Check the Issues page
- Review the documentation above
- Check environment variable configuration
If you enjoy GX Commerce and want to support its development, consider buying me a coffee! Every bit of support helps keep the project alive and improving.
Become a sponsor and get your logo here, early access to features, and priority support!
Built with ⚡ by GX Commerce Team
Beyond Limits. Beyond Ordinary.