A futuristic e-commerce platform for spaceship parts, interstellar travel packages, and exotic goods from across the universe. Built for an AI-assisted coding workshop using Claude Code.
- 🛍️ Product Catalog - Browse spaceship parts, travel packages, exotic goods, and spacecraft
- 🔍 Advanced Filtering - Filter by category, price range, and sort by various criteria
- 🛒 Shopping Cart - Add items, update quantities, apply promo codes
- 💳 Checkout Flow - Multi-step checkout with interplanetary shipping options
- ⭐ Reviews & Ratings - Read and write product reviews
- 📦 Order Tracking - View order history and tracking information
- 🔄 Real-time Inventory - Live stock updates via WebSocket
- 📊 Dashboard - Overview of products and orders
- 📦 Product Management - View and update inventory
- 🛍️ Order Management - Update order statuses
- 📈 Analytics - Product statistics and sales data
- 🎨 Futuristic UI - Glass morphism, neon accents, space theme
- 🔐 JWT Authentication - Secure user authentication
- 💾 SQLite Database - Pre-populated with sample data
- ⚡ Real-time Updates - WebSocket for live inventory
- 📱 Responsive Design - Mobile-first approach
- 🎯 Type Safety - Full TypeScript coverage
- Vue 3.5 - Progressive JavaScript framework
- TypeScript - Type-safe development
- Vite - Next-generation frontend tooling
- Pinia - State management
- Vue Router - Client-side routing
- Axios - HTTP client
- Tailwind CSS - Utility-first CSS framework
- Node.js 22+ - JavaScript runtime
- Express - Web framework
- TypeScript - Type-safe backend
- Better-SQLite3 - Embedded database
- JWT - Authentication
- WebSocket - Real-time communication
- Bcrypt - Password hashing
Before you begin, ensure you have the following installed:
- Node.js 22+ - Download
- Yarn - Install
- Claude Code CLI - For the workshop (Setup Guide)
- Git - Download
git clone <repository-url>
cd <repository-folder>yarn installThis will install dependencies for both the client and server workspaces.
cp .env.example .envThe default values in .env.example are ready to use - no changes needed!
yarn seedThis creates and populates the SQLite database with:
- 32 products across 4 categories
- 5 spacecraft with detailed specs
- 204 product reviews
- Test accounts (see below)
yarn devThis starts both the backend API server and frontend development server concurrently.
- Frontend: http://localhost:5173
- Backend API: http://localhost:3000
- WebSocket: ws://localhost:3000/ws/inventory
The application should automatically open in your default browser at http://localhost:5173
That's it! 🎉 You're ready to start the workshop.
galactic-marketplace/
├── client/ # Vue 3.5 frontend
│ ├── src/
│ │ ├── api/ # Axios API clients
│ │ ├── assets/ # Static assets & styles
│ │ ├── components/ # Vue components
│ │ │ ├── common/ # Reusable components
│ │ │ ├── layout/ # Layout components
│ │ │ ├── product/ # Product-related components
│ │ │ ├── cart/ # Cart components
│ │ │ ├── checkout/ # Checkout components
│ │ │ ├── admin/ # Admin components
│ │ │ └── reviews/ # Review components
│ │ ├── composables/ # Vue composables
│ │ ├── pages/ # Page components
│ │ ├── router/ # Vue Router configuration
│ │ ├── stores/ # Pinia stores
│ │ ├── types/ # TypeScript types
│ │ ├── utils/ # Utility functions
│ │ ├── App.vue # Root component
│ │ └── main.ts # Application entry point
│ ├── index.html
│ ├── package.json
│ ├── tsconfig.json
│ ├── vite.config.ts
│ └── tailwind.config.js
│
├── server/ # Express backend
│ ├── src/
│ │ ├── config/ # Configuration files
│ │ ├── controllers/ # Route controllers
│ │ ├── middleware/ # Express middleware
│ │ ├── models/ # Data models
│ │ ├── routes/ # API routes
│ │ ├── scripts/ # Utility scripts
│ │ ├── services/ # Business logic
│ │ ├── types/ # TypeScript types
│ │ ├── websocket/ # WebSocket server
│ │ └── index.ts # Server entry point
│ ├── database.sqlite # SQLite database (created by seed)
│ ├── package.json
│ └── tsconfig.json
│
├── .env # Environment variables
├── .env.example # Example environment variables
├── package.json # Root package.json (workspace)
├── README.md # This file
└── WORKSHOP.md # Workshop instructions
yarn install # Install all dependencies
yarn dev # Start both client and server in dev mode
yarn build # Build both client and server for production
yarn seed # Seed the database with sample data
yarn reset-db # Reset the database (delete and recreate)yarn workspace client dev # Start frontend dev server
yarn workspace client build # Build frontend for production
yarn workspace client preview # Preview production buildyarn workspace server dev # Start backend dev server
yarn workspace server build # Build backend for production
yarn workspace server start # Start production backend- Email: astronaut@space.com
- Password: password123
- Email: admin@galactic.com
- Password: admin123
The application uses a custom futuristic space theme:
- Background: Deep space blues and purples
- Accents: Neon cyan, purple, and pink
- Text: White with various opacities
glass- Glass morphism effectglass-card- Card with glass effectbtn-neon- Neon gradient buttonbtn-primary- Primary action buttonbtn-secondary- Secondary buttoninput-field- Styled input fieldsbadge-*- Status badges (success, warning, danger, info)
pulse-glow- Pulsing glow effectfloat- Floating animationshimmer- Shimmer effect
POST /api/auth/register- Register new userPOST /api/auth/login- Login userGET /api/auth/profile- Get user profile (auth required)
GET /api/products- Get all products (with filters)GET /api/products/:id- Get product by IDGET /api/products/categories- Get all categoriesPATCH /api/products/:id/stock- Update stock (admin only)
GET /api/reviews/product/:productId- Get product reviewsPOST /api/reviews/product/:productId- Create review (auth required)
POST /api/orders- Create order (auth required)GET /api/orders/my-orders- Get user's orders (auth required)GET /api/orders/:id- Get order by ID (auth required)GET /api/orders/all- Get all orders (admin only)PATCH /api/orders/:id/status- Update order status (admin only)
ws://localhost:3000/ws/inventory- Real-time inventory updates
Create a .env file in the root directory (see .env.example):
# Server Configuration
PORT=3000
NODE_ENV=development
# JWT Configuration
JWT_SECRET=your-super-secret-key
JWT_EXPIRES_IN=24h
# Database
DATABASE_PATH=./server/database.sqlite
# Client URL (for CORS)
CLIENT_URL=http://localhost:5173
# WebSocket
WS_PORT=3001This application is designed for an AI-assisted coding workshop using Claude Code. See WORKSHOP.md for detailed task instructions.
- Create Project Context File (10 min) - Document the codebase for AI assistance
- Add Real-Time Stock Warnings (12 min) - Add low stock badges to product cards
- Implement Admin Dashboard Filtering (12 min) - Add product filtering to admin dashboard
- Create Spacecraft Comparison Feature (15 min) - Build a side-by-side comparison tool with planning mode
- Add Product Search (15 min) - Implement search with autocomplete using planning mode
Ready to start? Open WORKSHOP.md for detailed instructions and example prompts!
If port 3000 or 5173 is already in use:
# Change ports in .env file
PORT=3001 # for backend
# And in client/vite.config.ts for frontend# Reset the database
yarn reset-db
# Re-seed with fresh data
yarn seed- Ensure the backend server is running
- Check firewall settings
- Verify WS_PORT in .env matches the client connection
# Clear and reinstall dependencies
rm -rf node_modules client/node_modules server/node_modules
yarn installThis project is created for educational purposes as part of an AI-assisted coding workshop.
- Built with Claude Code
- Designed for AI-assisted development workshops
- Uses Unsplash for product images
- Fonts from Google Fonts (Orbitron, Space Mono)
After completing the workshop, consider extending the application with:
- Product wishlist feature
- Advanced search with autocomplete
- User profile customization
- Multi-currency support
- Email notifications
- Payment gateway integration
- Product recommendations
- Virtual reality product previews
Happy coding, space explorer! 🌌✨
For workshop-specific instructions, see WORKSHOP.md