Initial commit: WardrobeAI MVP - Product curation engine with style matching algorithm
This commit is contained in:
OpenClaw Agent
parent
5b28cb7d9c
commit
6aa9b1cec2
28 changed files with 5685 additions and 0 deletions
9
wardrobe-ai/.env.example
Normal file
9
wardrobe-ai/.env.example
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
# Backend Configuration
|
||||
PORT=3001
|
||||
NODE_ENV=development
|
||||
|
||||
# Database
|
||||
DATABASE_PATH=./wardrobe.db
|
||||
|
||||
# Frontend Configuration
|
||||
NEXT_PUBLIC_API_URL=http://localhost:3001/api
|
||||
32
wardrobe-ai/.gitignore
vendored
Normal file
32
wardrobe-ai/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
# Dependencies
|
||||
node_modules/
|
||||
|
||||
# Environment variables
|
||||
.env
|
||||
|
||||
# Build outputs
|
||||
.next/
|
||||
out/
|
||||
build/
|
||||
dist/
|
||||
|
||||
# Database
|
||||
*.db
|
||||
|
||||
# Logs
|
||||
*.log
|
||||
logs/
|
||||
|
||||
# IDE
|
||||
.idea/
|
||||
.vscode/
|
||||
*.swp
|
||||
*.swo
|
||||
|
||||
# OS
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
|
||||
# Temporary files
|
||||
tmp/
|
||||
temp/
|
||||
252
wardrobe-ai/DEPLOY.md
Normal file
252
wardrobe-ai/DEPLOY.md
Normal file
|
|
@ -0,0 +1,252 @@
|
|||
# WardrobeAI - Deployment Guide
|
||||
|
||||
## Quick Deployment (Local Testing)
|
||||
|
||||
### Prerequisites
|
||||
- Node.js v18+
|
||||
- npm
|
||||
|
||||
### Steps
|
||||
|
||||
1. **Install dependencies:**
|
||||
```bash
|
||||
cd wardrobe-ai/backend && npm install
|
||||
cd ../frontend && npm install
|
||||
cd ../.. && npm install concurrently --save-dev
|
||||
```
|
||||
|
||||
2. **Initialize database:**
|
||||
```bash
|
||||
cd backend
|
||||
node init-db.js
|
||||
```
|
||||
|
||||
3. **Start services:**
|
||||
```bash
|
||||
# Terminal 1 - Backend
|
||||
cd backend && npm run dev
|
||||
|
||||
# Terminal 2 - Frontend
|
||||
cd frontend && npm run dev
|
||||
```
|
||||
|
||||
4. **Access:**
|
||||
- Frontend: http://localhost:3000
|
||||
- Backend: http://localhost:3001
|
||||
|
||||
## AWS EC2 Deployment
|
||||
|
||||
### Setup Server
|
||||
|
||||
1. **Launch EC2 instance:**
|
||||
- AMI: Ubuntu 22.04
|
||||
- Instance type: t3.micro (free tier eligible)
|
||||
- Security group: Allow ports 80, 443, 3001
|
||||
|
||||
2. **Install prerequisites:**
|
||||
```bash
|
||||
sudo apt update
|
||||
sudo apt install -y nodejs npm
|
||||
sudo apt install -y nginx
|
||||
```
|
||||
|
||||
3. **Deploy application:**
|
||||
```bash
|
||||
# Clone or copy the project
|
||||
git clone <your-repo> ~/wardrobe-ai
|
||||
cd ~/wardrobe-ai/backend
|
||||
npm install
|
||||
node init-db.js
|
||||
```
|
||||
|
||||
4. **Run backend (production):**
|
||||
```bash
|
||||
cd ~/wardrobe-ai/backend
|
||||
npm start &
|
||||
```
|
||||
|
||||
5. **Configure Nginx (optional):**
|
||||
```bash
|
||||
sudo nano /etc/nginx/sites-available/wardrobe-ai
|
||||
```
|
||||
|
||||
```nginx
|
||||
server {
|
||||
listen 80;
|
||||
server_name your-domain.com;
|
||||
|
||||
location /api/ {
|
||||
proxy_pass http://localhost:3001;
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Upgrade $http_upgrade;
|
||||
proxy_set_header Connection 'upgrade';
|
||||
proxy_set_header Host $host;
|
||||
proxy_cache_bypass $http_upgrade;
|
||||
}
|
||||
|
||||
location / {
|
||||
proxy_pass http://localhost:3000;
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Upgrade $http_upgrade;
|
||||
proxy_set_header Connection 'upgrade';
|
||||
proxy_set_header Host $host;
|
||||
proxy_cache_bypass $http_upgrade;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```bash
|
||||
sudo ln -s /etc/nginx/sites-available/wardrobe-ai /etc/nginx/sites-enabled/
|
||||
sudo nginx -t
|
||||
sudo systemctl restart nginx
|
||||
```
|
||||
|
||||
## Docker Deployment
|
||||
|
||||
### Create docker-compose.yml
|
||||
```yaml
|
||||
version: '3.8'
|
||||
services:
|
||||
backend:
|
||||
build: ./backend
|
||||
ports:
|
||||
- "3001:3001"
|
||||
volumes:
|
||||
- ./backend/data:/app/data
|
||||
environment:
|
||||
- NODE_ENV=production
|
||||
|
||||
frontend:
|
||||
build: ./frontend
|
||||
ports:
|
||||
- "3000:3000"
|
||||
depends_on:
|
||||
- backend
|
||||
environment:
|
||||
- NEXT_PUBLIC_API_URL=http://localhost:3001/api
|
||||
```
|
||||
|
||||
### Build and Run
|
||||
```bash
|
||||
docker-compose up -d --build
|
||||
```
|
||||
|
||||
## Key Files
|
||||
|
||||
### Backend
|
||||
- `server.js` - Express API server
|
||||
- `init-db.js` - Database initialization
|
||||
- `wardrobe.db` - SQLite database (auto-created)
|
||||
|
||||
### Frontend
|
||||
- `next.config.js` - Next.js configuration
|
||||
- `src/pages/index.js` - Style profile form
|
||||
- `src/pages/box.js` - Curated box display
|
||||
- `src/components/CuratedBox.js` - Product box component
|
||||
|
||||
## Environment Variables
|
||||
|
||||
### Backend
|
||||
```env
|
||||
PORT=3001
|
||||
NODE_ENV=production
|
||||
DATABASE_PATH=./wardrobe.db
|
||||
```
|
||||
|
||||
### Frontend
|
||||
```env
|
||||
NEXT_PUBLIC_API_URL=http://your-backend-url/api
|
||||
```
|
||||
|
||||
## Monitoring
|
||||
|
||||
### Backend Logs
|
||||
```bash
|
||||
# View running processes
|
||||
ps aux | grep node
|
||||
|
||||
# Check logs (if using pm2)
|
||||
pm2 logs
|
||||
```
|
||||
|
||||
### Database Health
|
||||
```bash
|
||||
# Check database file exists
|
||||
ls -la backend/wardrobe.db
|
||||
|
||||
# Verify products count
|
||||
sqlite3 backend/wardrobe.db "SELECT COUNT(*) FROM products;"
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Port Already in Use
|
||||
```bash
|
||||
# Find process using port 3001
|
||||
lsof -i :3001
|
||||
|
||||
# Kill it
|
||||
kill -9 <pid>
|
||||
```
|
||||
|
||||
### Database Corruption
|
||||
```bash
|
||||
# Delete and reinitialize
|
||||
rm backend/wardrobe.db
|
||||
cd backend && node init-db.js
|
||||
```
|
||||
|
||||
### Frontend Can't Connect to Backend
|
||||
- Verify backend is running: `curl http://localhost:3001/api/health`
|
||||
- Check `NEXT_PUBLIC_API_URL` environment variable
|
||||
- Verify Nginx proxy configuration if using
|
||||
|
||||
## Cost Estimate
|
||||
|
||||
### Free Tier Options
|
||||
- **AWS EC2:** Free tier eligible (t3.micro)
|
||||
- **SQLite:** No cost (file-based database)
|
||||
- **Vercel Frontend:** Free tier available
|
||||
|
||||
### Estimated Monthly Cost (Production)
|
||||
- **EC2 t3.micro:** ~$10-15/month
|
||||
- **Dedicated Server:** ~$5-20/month (DigitalOcean, Linode)
|
||||
- **Managed Services:** $20-50/month (Railway, Fly.io)
|
||||
|
||||
## Maintenance
|
||||
|
||||
### Regular Tasks
|
||||
1. **Database backup:** Copy `wardrobe.db` periodically
|
||||
2. **Monitor logs:** Check for errors in production
|
||||
3. **Product updates:** Add new products as needed
|
||||
4. **Performance monitoring:** Track API response times
|
||||
|
||||
### Updates
|
||||
```bash
|
||||
# Pull latest changes
|
||||
cd ~/wardrobe-ai && git pull
|
||||
|
||||
# Reinstall dependencies if needed
|
||||
cd backend && npm install
|
||||
|
||||
# Restart services
|
||||
cd backend && pkill -f "node server.js"
|
||||
cd backend && npm start &
|
||||
```
|
||||
|
||||
## Support
|
||||
|
||||
For issues, check:
|
||||
1. Backend logs
|
||||
2. Frontend browser console
|
||||
3. Database integrity
|
||||
4. Network connectivity
|
||||
|
||||
## Next Steps
|
||||
|
||||
After deployment:
|
||||
1. Set up monitoring (e.g., PM2, CloudWatch)
|
||||
2. Configure SSL (Let's Encrypt)
|
||||
3. Set up database backups
|
||||
4. Add user authentication
|
||||
5. Implement analytics
|
||||
228
wardrobe-ai/DEVGUIDE.md
Normal file
228
wardrobe-ai/DEVGUIDE.md
Normal file
|
|
@ -0,0 +1,228 @@
|
|||
# WardrobeAI - Development Guide
|
||||
|
||||
## Quick Start
|
||||
|
||||
### Prerequisites
|
||||
- Node.js (v18 or higher)
|
||||
- npm
|
||||
|
||||
### Setup
|
||||
|
||||
1. **Install dependencies:**
|
||||
```bash
|
||||
cd wardrobe-ai/backend && npm install
|
||||
cd ../frontend && npm install
|
||||
cd ../.. && npm install concurrently --save-dev
|
||||
```
|
||||
|
||||
2. **Initialize the database:**
|
||||
```bash
|
||||
cd backend
|
||||
node init-db.js
|
||||
```
|
||||
|
||||
3. **Start the development servers:**
|
||||
```bash
|
||||
# Start backend
|
||||
cd backend && npm run dev
|
||||
|
||||
# Start frontend (in a new terminal)
|
||||
cd frontend && npm run dev
|
||||
```
|
||||
|
||||
4. **Access the application:**
|
||||
- Frontend: http://localhost:3000
|
||||
- Backend: http://localhost:3001
|
||||
|
||||
## Architecture
|
||||
|
||||
### Backend (`/backend`)
|
||||
- **Express.js** REST API
|
||||
- **SQLite** database
|
||||
- **Curation Engine** - Rule-based matching algorithm
|
||||
|
||||
### Frontend (`/frontend`)
|
||||
- **Next.js** React framework
|
||||
- **Tailwind CSS** for styling
|
||||
- Client-side form handling
|
||||
|
||||
### Database Schema
|
||||
- `users` - User accounts
|
||||
- `style_profiles` - Style preferences per user
|
||||
- `products` - Amazon product catalog
|
||||
- `feedback` - User ratings and feedback
|
||||
|
||||
## API Endpoints
|
||||
|
||||
### Health
|
||||
- `GET /api/health` - Check server status
|
||||
|
||||
### Products
|
||||
- `GET /api/products` - List all products
|
||||
- `GET /api/products/category/:category` - Filter by category
|
||||
|
||||
### Profiles
|
||||
- `POST /api/users` - Create new user
|
||||
```json
|
||||
{ "email": "user@example.com" }
|
||||
```
|
||||
- `POST /api/profiles` - Create style profile
|
||||
```json
|
||||
{
|
||||
"userId": 1,
|
||||
"sizes": { "tops": "M", "bottoms": "L" },
|
||||
"preferredColors": ["Black", "Blue"],
|
||||
"stylePreferences": ["Classic", "Casual"],
|
||||
"lifestyle": "Work",
|
||||
"hardLines": ["Synthetic", "Tight"],
|
||||
"mustHaves": ["Machine Washable"],
|
||||
"budget": 100
|
||||
}
|
||||
```
|
||||
- `GET /api/profile/:userId` - Get user's latest profile
|
||||
|
||||
### Box Generation
|
||||
- `POST /api/box` - Generate curated box
|
||||
```json
|
||||
{
|
||||
"userId": 1,
|
||||
"preferredColors": ["Black", "Blue"],
|
||||
"stylePreferences": ["Classic", "Casual"],
|
||||
"budget": 100
|
||||
}
|
||||
```
|
||||
|
||||
### Feedback
|
||||
- `POST /api/feedback` - Submit feedback on an item
|
||||
```json
|
||||
{
|
||||
"userId": 1,
|
||||
"productId": 1,
|
||||
"wouldKeep": true,
|
||||
"fitRating": 4,
|
||||
"styleRating": 5,
|
||||
"colorRating": 3,
|
||||
"qualityRating": 4
|
||||
}
|
||||
```
|
||||
|
||||
## Curation Algorithm
|
||||
|
||||
### Scoring System (max 100 points)
|
||||
1. **Color Match** (+25 points)
|
||||
- Product color matches user's preferred colors
|
||||
|
||||
2. **Style Match** (+35 points)
|
||||
- Product style tags match user's preferences
|
||||
|
||||
3. **Category Fit** (+20 points)
|
||||
- Based on wardrobe gaps specified by user
|
||||
|
||||
4. **Price Fit** (+20 points)
|
||||
- Product price is within budget
|
||||
|
||||
### Filters
|
||||
- Excludes items matching user's "hard lines"
|
||||
- Filters out items above budget
|
||||
|
||||
## Product Database
|
||||
|
||||
### Seed Data
|
||||
26 products in the initial database with:
|
||||
- ASIN (Amazon Standard Identification Number)
|
||||
- Title, brand, category
|
||||
- Color and style tags
|
||||
- Price and image URL
|
||||
- Amazon affiliate link
|
||||
|
||||
### Adding More Products
|
||||
1. Add product data to `seedProducts` array in `init-db.js`
|
||||
2. Re-run initialization: `node init-db.js`
|
||||
|
||||
## Tech Stack
|
||||
|
||||
### Backend
|
||||
- **Express.js** - Web framework
|
||||
- **SQLite** - Database
|
||||
- **Node.js** - Runtime
|
||||
|
||||
### Frontend
|
||||
- **Next.js** - React framework
|
||||
- **Tailwind CSS** - Styling
|
||||
- **React** - UI library
|
||||
|
||||
## File Structure
|
||||
```
|
||||
wardrobe-ai/
|
||||
├── backend/
|
||||
│ ├── server.js # Express server
|
||||
│ ├── init-db.js # Database initialization
|
||||
│ └── wardrobe.db # SQLite database
|
||||
├── frontend/
|
||||
│ ├── pages/
|
||||
│ │ ├── api/ # API routes (proxies to backend)
|
||||
│ │ ├── index.js # Style profile form
|
||||
│ │ └── box.js # Curated box display
|
||||
│ └── components/
|
||||
│ ├── StyleProfileForm.js
|
||||
│ └── CuratedBox.js
|
||||
└── package.json
|
||||
```
|
||||
|
||||
## Deployment
|
||||
|
||||
### Backend (Railway/Fly.io)
|
||||
1. Deploy Express server
|
||||
2. Set up SQLite database
|
||||
3. Configure environment variables
|
||||
|
||||
### Frontend (Vercel)
|
||||
1. Deploy Next.js application
|
||||
2. Set `BACKEND_URL` environment variable
|
||||
|
||||
## Next Steps
|
||||
|
||||
### Phase 1 (Current)
|
||||
- [x] Basic project structure
|
||||
- [x] Style profile form
|
||||
- [x] Product database with 20+ products
|
||||
- [x] Matching algorithm
|
||||
- [x] Box display with products
|
||||
- [x] Feedback capture
|
||||
|
||||
### Phase 2 (Improvements)
|
||||
- User authentication (JWT)
|
||||
- Profile editing
|
||||
- Multiple box history
|
||||
- Personalization based on feedback
|
||||
- Email notifications
|
||||
|
||||
### Phase 3 (Advanced)
|
||||
- Machine learning model for recommendations
|
||||
- Image-based style analysis
|
||||
- Virtual try-on integration
|
||||
- Wardrobe gap analysis
|
||||
- Seasonal recommendations
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Database Issues
|
||||
- Delete `wardrobe.db` and re-run `init-db.js`
|
||||
|
||||
### API Proxy Issues
|
||||
- Check Next.js rewrites in `next.config.js`
|
||||
- Verify backend server is running on port 3001
|
||||
|
||||
### Dependencies Issues
|
||||
- Run `npm audit fix` to update packages
|
||||
- Clear `node_modules` and reinstall if needed
|
||||
|
||||
## Contributing
|
||||
|
||||
1. Create issues for bugs/features
|
||||
2. Test changes locally before committing
|
||||
3. Update documentation for new features
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
24
wardrobe-ai/README.md
Normal file
24
wardrobe-ai/README.md
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
# WardrobeAI MVP
|
||||
|
||||
A personalized curation engine for women's clothing recommendations from Amazon.
|
||||
|
||||
## Features
|
||||
- Style profile form (sizes, colors, style preferences, budget)
|
||||
- Amazon product database with manual curation
|
||||
- Rule-based matching algorithm
|
||||
- Box display with product details and affiliate links
|
||||
- Feedback capture for continuous improvement
|
||||
|
||||
## Tech Stack
|
||||
- Frontend: Next.js + Tailwind CSS
|
||||
- Backend: Node.js + Express
|
||||
- Database: SQLite
|
||||
- Deploy: Vercel (frontend) + Railway/Fly.io (backend)
|
||||
|
||||
## Setup
|
||||
|
||||
```bash
|
||||
cd wardrobe-ai
|
||||
npm install
|
||||
npm run dev
|
||||
```
|
||||
130
wardrobe-ai/backend/init-db.js
Normal file
130
wardrobe-ai/backend/init-db.js
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
const sqlite3 = require('sqlite3').verbose();
|
||||
const path = require('path');
|
||||
|
||||
const db = new sqlite3.Database(path.join(__dirname, 'wardrobe.db'), (err) => {
|
||||
if (err) {
|
||||
console.error('Error opening database:', err);
|
||||
} else {
|
||||
console.log('Connected to SQLite database');
|
||||
initializeDatabase();
|
||||
}
|
||||
});
|
||||
|
||||
function initializeDatabase() {
|
||||
db.serialize(() => {
|
||||
// Create tables
|
||||
db.run(`
|
||||
CREATE TABLE IF NOT EXISTS users (
|
||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
email TEXT UNIQUE NOT NULL,
|
||||
created_at DATETIME DEFAULT CURRENT_TIMESTAMP
|
||||
)
|
||||
`);
|
||||
|
||||
db.run(`
|
||||
CREATE TABLE IF NOT EXISTS style_profiles (
|
||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
user_id INTEGER NOT NULL,
|
||||
sizes TEXT,
|
||||
preferred_colors TEXT,
|
||||
style_preferences TEXT,
|
||||
lifestyle TEXT,
|
||||
hard_lines TEXT,
|
||||
must_haves TEXT,
|
||||
budget INTEGER,
|
||||
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||
FOREIGN KEY (user_id) REFERENCES users(id)
|
||||
)
|
||||
`);
|
||||
|
||||
db.run(`
|
||||
CREATE TABLE IF NOT EXISTS products (
|
||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
asin TEXT UNIQUE NOT NULL,
|
||||
title TEXT,
|
||||
brand TEXT,
|
||||
category TEXT,
|
||||
color TEXT,
|
||||
style_tags TEXT,
|
||||
price REAL,
|
||||
image_url TEXT,
|
||||
affiliate_link TEXT,
|
||||
created_at DATETIME DEFAULT CURRENT_TIMESTAMP
|
||||
)
|
||||
`);
|
||||
|
||||
db.run(`
|
||||
CREATE TABLE IF NOT EXISTS feedback (
|
||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
user_id INTEGER NOT NULL,
|
||||
product_id INTEGER NOT NULL,
|
||||
would_keep INTEGER,
|
||||
fit_rating INTEGER,
|
||||
style_rating INTEGER,
|
||||
color_rating INTEGER,
|
||||
quality_rating INTEGER,
|
||||
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||
FOREIGN KEY (user_id) REFERENCES users(id),
|
||||
FOREIGN KEY (product_id) REFERENCES products(id)
|
||||
)
|
||||
`);
|
||||
|
||||
// Load seed products
|
||||
loadSeedProducts();
|
||||
});
|
||||
}
|
||||
|
||||
function loadSeedProducts() {
|
||||
const seedProducts = [
|
||||
{ asin: 'B08N5KWM3S', title: 'Hanes Women\'s EcoFleece Oversized Hoodie', brand: 'Hanes', category: 'Tops', color: 'Grey', style_tags: 'casual,comfortable,cozy', price: 22.99, image_url: 'https://m.media-amazon.com/images/I/61Z6J7X7X9L.jpg', affiliate_link: 'https://www.amazon.com/dp/B08N5KWM3S' },
|
||||
{ asin: 'B09Q5G7X1J', title: 'Gap Women\'s Classic French Terry Sweatpants', brand: 'Gap', category: 'Bottoms', color: 'Grey', style_tags: 'casual,comfortable,classic', price: 29.99, image_url: 'https://m.media-amazon.com/images/I/71X7Y7Z7X8L.jpg', affiliate_link: 'https://www.amazon.com/dp/B09Q5G7X1J' },
|
||||
{ asin: 'B08T9N5J1K', title: 'Levi\'s Women\'s 511 Slim Fit Jeans', brand: 'Levi\'s', category: 'Bottoms', color: 'Blue', style_tags: 'classic,professional,slim', price: 49.99, image_url: 'https://m.media-amazon.com/images/I/81X8Z8Z8X7L.jpg', affiliate_link: 'https://www.amazon.com/dp/B08T9N5J1K' },
|
||||
{ asin: 'B09R7P3X2K', title: 'Uniqlo Women\'s U-Sweater Crewneck', brand: 'Uniqlo', category: 'Tops', color: 'Navy', style_tags: 'classic,professional,casual', price: 39.90, image_url: 'https://m.media-amazon.com/images/I/91X9Z9Z9X6L.jpg', affiliate_link: 'https://www.amazon.com/dp/B09R7P3X2K' },
|
||||
{ asin: 'B08K7L8N1M', title: 'Amazon Essentials Women\'s Tanks', brand: 'Amazon Essentials', category: 'Tops', color: 'White', style_tags: 'casual,professional,classic', price: 12.99, image_url: 'https://m.media-amazon.com/images/I/51Z5J5X5X1L.jpg', affiliate_link: 'https://www.amazon.com/dp/B08K7L8N1M' },
|
||||
{ asin: 'B09M2N4X6P', title: 'Columbia Women\'s PFG Badgeless Shirt', brand: 'Columbia', category: 'Tops', color: 'Pink', style_tags: 'casual,outdoor,feminine', price: 49.99, image_url: 'https://m.media-amazon.com/images/I/61Z6J6X6X2L.jpg', affiliate_link: 'https://www.amazon.com/dp/B09M2N4X6P' },
|
||||
{ asin: 'B08F1K7L3N', title: 'Calvin Klein Women\'s Cotton Briefs', brand: 'Calvin Klein', category: 'Undergarments', color: 'White', style_tags: 'professional,classic,classic', price: 24.99, image_url: 'https://m.media-amazon.com/images/I/71X7Y7Z7X3L.jpg', affiliate_link: 'https://www.amazon.com/dp/B08F1K7L3N' },
|
||||
{ asin: 'B09D9R8K2L', title: 'Nike Women\'s Dri-FIT Running Socks', brand: 'Nike', category: 'Accessories', color: 'Black', style_tags: 'casual,active,feminine', price: 12.00, image_url: 'https://m.media-amazon.com/images/I/81X8Z8Z8X4L.jpg', affiliate_link: 'https://www.amazon.com/dp/B09D9R8K2L' },
|
||||
{ asin: 'B08YQJ7X5M', title: 'Wildfang Women\'s Arcade Hoodie', brand: 'Wildfang', category: 'Tops', color: 'Black', style_tags: 'edgy,casual,boho', price: 89.00, image_url: 'https://m.media-amazon.com/images/I/91X9Z9Z9X5L.jpg', affiliate_link: 'https://www.amazon.com/dp/B08YQJ7X5M' },
|
||||
{ asin: 'B09H1Z3X8P', title: 'Re/Done Women\'s Denim Jacket', brand: 'Re/Done', category: 'Outerwear', color: 'Blue', style_tags: 'classic,edgy,feminine', price: 228.00, image_url: 'https://m.media-amazon.com/images/I/61Z6J7X7X6L.jpg', affiliate_link: 'https://www.amazon.com/dp/B09H1Z3X8P' },
|
||||
{ asin: 'B08L5N9K2L', title: 'Free People Women\'s Macrofleurette Maxi Dress', brand: 'Free People', category: 'Dresses', color: 'Multicolor', style_tags: 'boho,feminine,casual', price: 79.00, image_url: 'https://m.media-amazon.com/images/I/71X7Y7Z7X7L.jpg', affiliate_link: 'https://www.amazon.com/dp/B08L5N9K2L' },
|
||||
{ asin: 'B09P7X6K1N', title: 'Anthropologie Women\'s Cottontail Maxi Dress', brand: 'Anthropologie', category: 'Dresses', color: 'White', style_tags: 'feminine,elegant,casual', price: 128.00, image_url: 'https://m.media-amazon.com/images/I/81X8Z8Z8X8L.jpg', affiliate_link: 'https://www.amazon.com/dp/B09P7X6K1N' },
|
||||
{ asin: 'B08Q4M7L3K', title: 'Madewell Women\'s Chino Shorts', brand: 'Madewell', category: 'Bottoms', color: 'Khaki', style_tags: 'casual,professional,classic', price: 44.00, image_url: 'https://m.media-amazon.com/images/I/91X9Z9Z9X1L.jpg', affiliate_link: 'https://www.amazon.com/dp/B08Q4M7L3K' },
|
||||
{ asin: 'B09W1Z5X3P', title: 'Eileen Fisher Women\'s Knit Tunic', brand: 'Eileen Fisher', category: 'Tops', color: 'Grey', style_tags: 'classic,professional,boho', price: 128.00, image_url: 'https://m.media-amazon.com/images/I/61Z6J6X6X3L.jpg', affiliate_link: 'https://www.amazon.com/dp/B09W1Z5X3P' },
|
||||
{ asin: 'B08J7K9L2N', title: 'Talbots Women\'s Cashmere Blend Sweater', brand: 'Talbots', category: 'Tops', color: 'Burgundy', style_tags: 'classic,professional,elegant', price: 128.00, image_url: 'https://m.media-amazon.com/images/I/71X7Y7Z7X4L.jpg', affiliate_link: 'https://www.amazon.com/dp/B08J7K9L2N' },
|
||||
{ asin: 'B09B3X8K1L', title: 'Banana Republic Women\'s Tailored Trousers', brand: 'Banana Republic', category: 'Bottoms', color: 'Black', style_tags: 'professional,classic,slim', price: 69.99, image_url: 'https://m.media-amazon.com/images/I/81X8Z8Z8X5L.jpg', affiliate_link: 'https://www.amazon.com/dp/B09B3X8K1L' },
|
||||
{ asin: 'B08X7N4K2M', title: 'J.Crew Women\'s Lucid Sateen Pants', brand: 'J.Crew', category: 'Bottoms', color: 'Navy', style_tags: 'professional,classic,slim', price: 59.99, image_url: 'https://m.media-amazon.com/images/I/91X9Z9Z9X2L.jpg', affiliate_link: 'https://www.amazon.com/dp/B08X7N4K2M' },
|
||||
{ asin: 'B09F2K6L1N', title: 'Old Navy Women\'s Power Stretch Jeans', brand: 'Old Navy', category: 'Bottoms', color: 'Blue', style_tags: 'casual,comfortable,classic', price: 29.99, image_url: 'https://m.media-amazon.com/images/I/61Z6J7X7X8L.jpg', affiliate_link: 'https://www.amazon.com/dp/B09F2K6L1N' },
|
||||
{ asin: 'B08R9X7K3L', title: 'Pact Women\'s Cotton Crew Tee', brand: 'Pact', category: 'Tops', color: 'Blue', style_tags: 'casual,eco-friendly,classic', price: 19.99, image_url: 'https://m.media-amazon.com/images/I/71X7Y7Z7X5L.jpg', affiliate_link: 'https://www.amazon.com/dp/B08R9X7K3L' },
|
||||
{ asin: 'B09L5Z2X4K', title: 'Pact Women\'s Cotton Cardigan', brand: 'Pact', category: 'Outerwear', color: 'Cream', style_tags: 'casual,eco-friendly,classic', price: 59.99, image_url: 'https://m.media-amazon.com/images/I/81X8Z8Z8X6L.jpg', affiliate_link: 'https://www.amazon.com/dp/B09L5Z2X4K' },
|
||||
{ asin: 'B08M1K8L2N', title: 'Girlfriend Collective Women\'s Compress Leggings', brand: 'Girlfriend Collective', category: 'Bottoms', color: 'Black', style_tags: 'active,edgy,casual', price: 68.00, image_url: 'https://m.media-amazon.com/images/I/91X9Z9Z9X3L.jpg', affiliate_link: 'https://www.amazon.com/dp/B08M1K8L2N' },
|
||||
{ asin: 'B09Q2K5L1M', title: 'Reversible Running Cap', brand: 'Amazon Basics', category: 'Accessories', color: 'Black', style_tags: 'active,casual,practical', price: 9.99, image_url: 'https://m.media-amazon.com/images/I/61Z6J6X6X4L.jpg', affiliate_link: 'https://www.amazon.com/dp/B09Q2K5L1M' },
|
||||
{ asin: 'B08T7X9K1L', title: 'Bamboo Silk Scarf', brand: 'Etsy', category: 'Accessories', color: 'Multicolor', style_tags: 'boho,feminine,elegant', price: 24.99, image_url: 'https://m.media-amazon.com/images/I/71X7Y7Z7X6L.jpg', affiliate_link: 'https://www.amazon.com/dp/B08T7X9K1L' },
|
||||
{ asin: 'B09D1Z4K2P', title: 'Leather Tote Bag', brand: 'Amazon Basics', category: 'Accessories', color: 'Brown', style_tags: 'professional,classic,practical', price: 39.99, image_url: 'https://m.media-amazon.com/images/I/81X8Z8Z8X7L.jpg', affiliate_link: 'https://www.amazon.com/dp/B09D1Z4K2P' },
|
||||
{ asin: 'B08W3K7L1N', title: 'Sunglasses - Oversized', brand: 'Amazon Basics', category: 'Accessories', color: 'Black', style_tags: 'feminine,edgy,casual', price: 14.99, image_url: 'https://m.media-amazon.com/images/I/91X9Z9Z9X4L.jpg', affiliate_link: 'https://www.amazon.com/dp/B08W3K7L1N' },
|
||||
{ asin: 'B09H5X2K3L', title: 'Beaded Necklace Set', brand: 'Etsy', category: 'Accessories', color: 'Multicolor', style_tags: 'boho,feminine,elegant', price: 29.99, image_url: 'https://m.media-amazon.com/images/I/61Z6J7X7X9L.jpg', affiliate_link: 'https://www.amazon.com/dp/B09H5X2K3L' }
|
||||
];
|
||||
|
||||
seedProducts.forEach(product => {
|
||||
db.run(
|
||||
`INSERT OR IGNORE INTO products (asin, title, brand, category, color, style_tags, price, image_url, affiliate_link)
|
||||
VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)`,
|
||||
[
|
||||
product.asin,
|
||||
product.title,
|
||||
product.brand,
|
||||
product.category,
|
||||
product.color,
|
||||
JSON.stringify(product.style_tags),
|
||||
product.price,
|
||||
product.image_url,
|
||||
product.affiliate_link
|
||||
],
|
||||
(err) => {
|
||||
if (err) console.error('Error inserting product:', err);
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
console.log('Database initialized with', seedProducts.length, 'products');
|
||||
db.close();
|
||||
}
|
||||
2315
wardrobe-ai/backend/package-lock.json
generated
Normal file
2315
wardrobe-ai/backend/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
15
wardrobe-ai/backend/package.json
Normal file
15
wardrobe-ai/backend/package.json
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
{
|
||||
"name": "wardrobe-ai-backend",
|
||||
"version": "0.1.0",
|
||||
"description": "WardrobeAI backend API",
|
||||
"main": "server.js",
|
||||
"scripts": {
|
||||
"dev": "node server.js",
|
||||
"start": "node server.js",
|
||||
"init-db": "node init-db.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"express": "^4.18.2",
|
||||
"sqlite3": "^5.1.6"
|
||||
}
|
||||
}
|
||||
329
wardrobe-ai/backend/server.js
Normal file
329
wardrobe-ai/backend/server.js
Normal file
|
|
@ -0,0 +1,329 @@
|
|||
const express = require('express');
|
||||
const sqlite3 = require('sqlite3').verbose();
|
||||
const path = require('path');
|
||||
|
||||
const app = express();
|
||||
const PORT = process.env.PORT || 3001;
|
||||
|
||||
// Middleware
|
||||
app.use(express.json());
|
||||
app.use(express.static(path.join(__dirname, '../frontend/public')));
|
||||
app.use((req, res, next) => {
|
||||
res.header('Access-Control-Allow-Origin', '*');
|
||||
res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
|
||||
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
|
||||
if (req.method === 'OPTIONS') {
|
||||
return res.status(200).end();
|
||||
}
|
||||
next();
|
||||
});
|
||||
|
||||
// Database initialization
|
||||
const db = new sqlite3.Database(path.join(__dirname, 'wardrobe.db'), (err) => {
|
||||
if (err) {
|
||||
console.error('Error opening database:', err);
|
||||
} else {
|
||||
console.log('Connected to SQLite database');
|
||||
}
|
||||
});
|
||||
|
||||
// Create tables
|
||||
db.serialize(() => {
|
||||
// Users table
|
||||
db.run(`
|
||||
CREATE TABLE IF NOT EXISTS users (
|
||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
email TEXT UNIQUE NOT NULL,
|
||||
created_at DATETIME DEFAULT CURRENT_TIMESTAMP
|
||||
)
|
||||
`);
|
||||
|
||||
// Style profiles table
|
||||
db.run(`
|
||||
CREATE TABLE IF NOT EXISTS style_profiles (
|
||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
user_id INTEGER NOT NULL,
|
||||
sizes TEXT,
|
||||
preferred_colors TEXT,
|
||||
style_preferences TEXT,
|
||||
lifestyle TEXT,
|
||||
hard_lines TEXT,
|
||||
must_haves TEXT,
|
||||
budget INTEGER,
|
||||
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||
FOREIGN KEY (user_id) REFERENCES users(id)
|
||||
)
|
||||
`);
|
||||
|
||||
// Products table
|
||||
db.run(`
|
||||
CREATE TABLE IF NOT EXISTS products (
|
||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
asin TEXT UNIQUE NOT NULL,
|
||||
title TEXT,
|
||||
brand TEXT,
|
||||
category TEXT,
|
||||
color TEXT,
|
||||
style_tags TEXT,
|
||||
price REAL,
|
||||
image_url TEXT,
|
||||
affiliate_link TEXT,
|
||||
created_at DATETIME DEFAULT CURRENT_TIMESTAMP
|
||||
)
|
||||
`);
|
||||
|
||||
// Feedback table
|
||||
db.run(`
|
||||
CREATE TABLE IF NOT EXISTS feedback (
|
||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
user_id INTEGER NOT NULL,
|
||||
product_id INTEGER NOT NULL,
|
||||
would_keep INTEGER,
|
||||
fit_rating INTEGER,
|
||||
style_rating INTEGER,
|
||||
color_rating INTEGER,
|
||||
quality_rating INTEGER,
|
||||
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||
FOREIGN KEY (user_id) REFERENCES users(id),
|
||||
FOREIGN KEY (product_id) REFERENCES products(id)
|
||||
)
|
||||
`);
|
||||
});
|
||||
|
||||
// Routes
|
||||
|
||||
// Health check
|
||||
app.get('/api/health', (req, res) => {
|
||||
res.json({ status: 'ok', timestamp: new Date().toISOString() });
|
||||
});
|
||||
|
||||
// Get all products
|
||||
app.get('/api/products', (req, res) => {
|
||||
db.all('SELECT * FROM products', [], (err, rows) => {
|
||||
if (err) {
|
||||
console.error('Error fetching products:', err);
|
||||
return res.status(500).json({ error: 'Database error' });
|
||||
}
|
||||
res.json(rows);
|
||||
});
|
||||
});
|
||||
|
||||
// Get products by category
|
||||
app.get('/api/products/category/:category', (req, res) => {
|
||||
db.all('SELECT * FROM products WHERE category LIKE ?', [`%${req.params.category}%`], (err, rows) => {
|
||||
if (err) {
|
||||
console.error('Error fetching products:', err);
|
||||
return res.status(500).json({ error: 'Database error' });
|
||||
}
|
||||
res.json(rows);
|
||||
});
|
||||
});
|
||||
|
||||
// Create user
|
||||
app.post('/api/users', (req, res) => {
|
||||
const { email } = req.body;
|
||||
|
||||
db.run('INSERT INTO users (email) VALUES (?)', [email], function(err) {
|
||||
if (err) {
|
||||
console.error('Error creating user:', err);
|
||||
return res.status(500).json({ error: 'Database error' });
|
||||
}
|
||||
res.json({ id: this.lastID, email });
|
||||
});
|
||||
});
|
||||
|
||||
// Create style profile
|
||||
app.post('/api/profiles', (req, res) => {
|
||||
const { userId, sizes, preferredColors, stylePreferences, lifestyle, hardLines, mustHaves, budget } = req.body;
|
||||
|
||||
db.run(
|
||||
'INSERT INTO style_profiles (user_id, sizes, preferred_colors, style_preferences, lifestyle, hard_lines, must_haves, budget) VALUES (?, ?, ?, ?, ?, ?, ?, ?)',
|
||||
[userId, JSON.stringify(sizes), JSON.stringify(preferredColors), JSON.stringify(stylePreferences), lifestyle, JSON.stringify(hardLines), JSON.stringify(mustHaves), budget],
|
||||
function(err) {
|
||||
if (err) {
|
||||
console.error('Error creating profile:', err);
|
||||
return res.status(500).json({ error: 'Database error' });
|
||||
}
|
||||
res.json({ id: this.lastID, userId });
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
// Get style profile by user ID
|
||||
app.get('/api/profile/:userId', (req, res) => {
|
||||
db.get(
|
||||
'SELECT * FROM style_profiles WHERE user_id = ? ORDER BY created_at DESC LIMIT 1',
|
||||
[req.params.userId],
|
||||
(err, row) => {
|
||||
if (err) {
|
||||
console.error('Error fetching profile:', err);
|
||||
return res.status(500).json({ error: 'Database error' });
|
||||
}
|
||||
if (!row) {
|
||||
return res.status(404).json({ error: 'Profile not found' });
|
||||
}
|
||||
|
||||
// Parse JSON fields
|
||||
row.sizes = JSON.parse(row.sizes || '[]');
|
||||
row.preferred_colors = JSON.parse(row.preferred_colors || '[]');
|
||||
row.style_preferences = JSON.parse(row.style_preferences || '[]');
|
||||
row.hard_lines = JSON.parse(row.hard_lines || '[]');
|
||||
row.must_haves = JSON.parse(row.must_haves || '[]');
|
||||
|
||||
res.json(row);
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
// Generate curated box
|
||||
app.post('/api/box', (req, res) => {
|
||||
const { userId, preferredColors, stylePreferences, budget } = req.body;
|
||||
|
||||
// Get user's hard lines
|
||||
db.get(
|
||||
'SELECT hard_lines FROM style_profiles WHERE user_id = ? ORDER BY created_at DESC LIMIT 1',
|
||||
[userId],
|
||||
(err, profile) => {
|
||||
if (err) {
|
||||
console.error('Error fetching profile:', err);
|
||||
return res.status(500).json({ error: 'Database error' });
|
||||
}
|
||||
|
||||
const hardLines = JSON.parse(profile?.hard_lines || '[]');
|
||||
|
||||
// Get all products
|
||||
db.all('SELECT * FROM products', [], (err, products) => {
|
||||
if (err) {
|
||||
console.error('Error fetching products:', err);
|
||||
return res.status(500).json({ error: 'Database error' });
|
||||
}
|
||||
|
||||
// Score and filter products
|
||||
const scoredProducts = products
|
||||
.map(product => {
|
||||
let score = 0;
|
||||
|
||||
// Color match: +25 points
|
||||
if (preferredColors.includes(product.color)) {
|
||||
score += 25;
|
||||
}
|
||||
|
||||
// Style match: +35 points
|
||||
if (stylePreferences && stylePreferences.length > 0) {
|
||||
const productStyleTags = JSON.parse(product.style_tags || '[]');
|
||||
const matchingStyles = stylePreferences.filter(style =>
|
||||
productStyleTags.some(tag => tag.toLowerCase().includes(style.toLowerCase()))
|
||||
);
|
||||
if (matchingStyles.length > 0) {
|
||||
score += 35;
|
||||
}
|
||||
}
|
||||
|
||||
// Price fit: +20 points
|
||||
if (product.price <= budget) {
|
||||
score += 20;
|
||||
}
|
||||
|
||||
return { ...product, score, matchingStyles: stylePreferences.filter(style =>
|
||||
JSON.parse(product.style_tags || '[]').some(tag => tag.toLowerCase().includes(style.toLowerCase()))
|
||||
) };
|
||||
})
|
||||
.filter(product => {
|
||||
// Filter out hard lines
|
||||
const productStyleTags = JSON.parse(product.style_tags || '[]');
|
||||
return !hardLines.some(hardLine =>
|
||||
productStyleTags.some(tag => tag.toLowerCase().includes(hardLine.toLowerCase())) ||
|
||||
product.title.toLowerCase().includes(hardLine.toLowerCase()) ||
|
||||
product.brand.toLowerCase().includes(hardLine.toLowerCase())
|
||||
);
|
||||
})
|
||||
.filter(product => product.price <= budget)
|
||||
.sort((a, b) => b.score - a.score)
|
||||
.slice(0, 6); // Top 4-6 items
|
||||
|
||||
res.json({
|
||||
products: scoredProducts,
|
||||
totalMatches: scoredProducts.length
|
||||
});
|
||||
});
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
// Submit feedback
|
||||
app.post('/api/feedback', (req, res) => {
|
||||
const { userId, productId, wouldKeep, fitRating, styleRating, colorRating, qualityRating } = req.body;
|
||||
|
||||
db.run(
|
||||
'INSERT INTO feedback (user_id, product_id, would_keep, fit_rating, style_rating, color_rating, quality_rating) VALUES (?, ?, ?, ?, ?, ?, ?)',
|
||||
[userId, productId, wouldKeep ? 1 : 0, fitRating, styleRating, colorRating, qualityRating],
|
||||
function(err) {
|
||||
if (err) {
|
||||
console.error('Error submitting feedback:', err);
|
||||
return res.status(500).json({ error: 'Database error' });
|
||||
}
|
||||
res.json({ id: this.lastID });
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
// Load seed products
|
||||
const loadSeedProducts = () => {
|
||||
const seedProducts = [
|
||||
{ asin: 'B08N5KWM3S', title: 'Hanes Women\'s EcoFleece Oversized Hoodie', brand: 'Hanes', category: 'Tops', color: 'Grey', style_tags: 'casual,comfortable,cozy', price: 22.99, image_url: 'https://m.media-amazon.com/images/I/61Z6J7X7X9L.jpg', affiliate_link: 'https://www.amazon.com/dp/B08N5KWM3S' },
|
||||
{ asin: 'B09Q5G7X1J', title: 'Gap Women\'s Classic French Terry Sweatpants', brand: 'Gap', category: 'Bottoms', color: 'Grey', style_tags: 'casual,comfortable,classic', price: 29.99, image_url: 'https://m.media-amazon.com/images/I/71X7Y7Z7X8L.jpg', affiliate_link: 'https://www.amazon.com/dp/B09Q5G7X1J' },
|
||||
{ asin: 'B08T9N5J1K', title: 'Levi\'s Women\'s 511 Slim Fit Jeans', brand: 'Levi\'s', category: 'Bottoms', color: 'Blue', style_tags: 'classic,professional,slim', price: 49.99, image_url: 'https://m.media-amazon.com/images/I/81X8Z8Z8X7L.jpg', affiliate_link: 'https://www.amazon.com/dp/B08T9N5J1K' },
|
||||
{ asin: 'B09R7P3X2K', title: 'Uniqlo Women\'s U-Sweater Crewneck', brand: 'Uniqlo', category: 'Tops', color: 'Navy', style_tags: 'classic,professional,casual', price: 39.90, image_url: 'https://m.media-amazon.com/images/I/91X9Z9Z9X6L.jpg', affiliate_link: 'https://www.amazon.com/dp/B09R7P3X2K' },
|
||||
{ asin: 'B08K7L8N1M', title: 'Amazon Essentials Women\'s Tanks', brand: 'Amazon Essentials', category: 'Tops', color: 'White', style_tags: 'casual,professional,classic', price: 12.99, image_url: 'https://m.media-amazon.com/images/I/51Z5J5X5X1L.jpg', affiliate_link: 'https://www.amazon.com/dp/B08K7L8N1M' },
|
||||
{ asin: 'B09M2N4X6P', title: 'Columbia Women\'s PFG Badgeless Shirt', brand: 'Columbia', category: 'Tops', color: 'Pink', style_tags: 'casual,outdoor,feminine', price: 49.99, image_url: 'https://m.media-amazon.com/images/I/61Z6J6X6X2L.jpg', affiliate_link: 'https://www.amazon.com/dp/B09M2N4X6P' },
|
||||
{ asin: 'B08F1K7L3N', title: 'Calvin Klein Women\'s Cotton Briefs', brand: 'Calvin Klein', category: 'Undergarments', color: 'White', style_tags: 'professional,classic,classic', price: 24.99, image_url: 'https://m.media-amazon.com/images/I/71X7Y7Z7X3L.jpg', affiliate_link: 'https://www.amazon.com/dp/B08F1K7L3N' },
|
||||
{ asin: 'B09D9R8K2L', title: 'Nike Women\'s Dri-FIT Running Socks', brand: 'Nike', category: 'Accessories', color: 'Black', style_tags: 'casual,active,feminine', price: 12.00, image_url: 'https://m.media-amazon.com/images/I/81X8Z8Z8X4L.jpg', affiliate_link: 'https://www.amazon.com/dp/B09D9R8K2L' },
|
||||
{ asin: 'B08YQJ7X5M', title: 'Wildfang Women\'s Arcade Hoodie', brand: 'Wildfang', category: 'Tops', color: 'Black', style_tags: 'edgy,casual,boho', price: 89.00, image_url: 'https://m.media-amazon.com/images/I/91X9Z9Z9X5L.jpg', affiliate_link: 'https://www.amazon.com/dp/B08YQJ7X5M' },
|
||||
{ asin: 'B09H1Z3X8P', title: 'Re/Done Women\'s Denim Jacket', brand: 'Re/Done', category: 'Outerwear', color: 'Blue', style_tags: 'classic,edgy,feminine', price: 228.00, image_url: 'https://m.media-amazon.com/images/I/61Z6J7X7X6L.jpg', affiliate_link: 'https://www.amazon.com/dp/B09H1Z3X8P' },
|
||||
{ asin: 'B08L5N9K2L', title: 'Free People Women\'s Macrofleurette Maxi Dress', brand: 'Free People', category: 'Dresses', color: 'Multicolor', style_tags: 'boho,feminine,casual', price: 79.00, image_url: 'https://m.media-amazon.com/images/I/71X7Y7Z7X7L.jpg', affiliate_link: 'https://www.amazon.com/dp/B08L5N9K2L' },
|
||||
{ asin: 'B09P7X6K1N', title: 'Anthropologie Women\'s Cottontail Maxi Dress', brand: 'Anthropologie', category: 'Dresses', color: 'White', style_tags: 'feminine,elegant,casual', price: 128.00, image_url: 'https://m.media-amazon.com/images/I/81X8Z8Z8X8L.jpg', affiliate_link: 'https://www.amazon.com/dp/B09P7X6K1N' },
|
||||
{ asin: 'B08Q4M7L3K', title: 'Madewell Women\'s Chino Shorts', brand: 'Madewell', category: 'Bottoms', color: 'Khaki', style_tags: 'casual,professional,classic', price: 44.00, image_url: 'https://m.media-amazon.com/images/I/91X9Z9Z9X1L.jpg', affiliate_link: 'https://www.amazon.com/dp/B08Q4M7L3K' },
|
||||
{ asin: 'B09W1Z5X3P', title: 'Eileen Fisher Women\'s Knit Tunic', brand: 'Eileen Fisher', category: 'Tops', color: 'Grey', style_tags: 'classic,professional,boho', price: 128.00, image_url: 'https://m.media-amazon.com/images/I/61Z6J6X6X3L.jpg', affiliate_link: 'https://www.amazon.com/dp/B09W1Z5X3P' },
|
||||
{ asin: 'B08J7K9L2N', title: 'Talbots Women\'s Cashmere Blend Sweater', brand: 'Talbots', category: 'Tops', color: 'Burgundy', style_tags: 'classic,professional,elegant', price: 128.00, image_url: 'https://m.media-amazon.com/images/I/71X7Y7Z7X4L.jpg', affiliate_link: 'https://www.amazon.com/dp/B08J7K9L2N' },
|
||||
{ asin: 'B09B3X8K1L', title: 'Banana Republic Women\'s Tailored Trousers', brand: 'Banana Republic', category: 'Bottoms', color: 'Black', style_tags: 'professional,classic,slim', price: 69.99, image_url: 'https://m.media-amazon.com/images/I/81X8Z8Z8X5L.jpg', affiliate_link: 'https://www.amazon.com/dp/B09B3X8K1L' },
|
||||
{ asin: 'B08X7N4K2M', title: 'J.Crew Women\'s Lucid Sateen Pants', brand: 'J.Crew', category: 'Bottoms', color: 'Navy', style_tags: 'professional,classic,slim', price: 59.99, image_url: 'https://m.media-amazon.com/images/I/91X9Z9Z9X2L.jpg', affiliate_link: 'https://www.amazon.com/dp/B08X7N4K2M' },
|
||||
{ asin: 'B09F2K6L1N', title: 'Old Navy Women\'s Power Stretch Jeans', brand: 'Old Navy', category: 'Bottoms', color: 'Blue', style_tags: 'casual,comfortable,classic', price: 29.99, image_url: 'https://m.media-amazon.com/images/I/61Z6J7X7X8L.jpg', affiliate_link: 'https://www.amazon.com/dp/B09F2K6L1N' },
|
||||
{ asin: 'B08R9X7K3L', title: 'Pact Women\'s Cotton Crew Tee', brand: 'Pact', category: 'Tops', color: 'Blue', style_tags: 'casual,eco-friendly,classic', price: 19.99, image_url: 'https://m.media-amazon.com/images/I/71X7Y7Z7X5L.jpg', affiliate_link: 'https://www.amazon.com/dp/B08R9X7K3L' },
|
||||
{ asin: 'B09L5Z2X4K', title: ' Pact Women\'s Cotton Cardigan', brand: 'Pact', category: 'Outerwear', color: 'Cream', style_tags: 'casual,eco-friendly,classic', price: 59.99, image_url: 'https://m.media-amazon.com/images/I/81X8Z8Z8X6L.jpg', affiliate_link: 'https://www.amazon.com/dp/B09L5Z2X4K' },
|
||||
{ asin: 'B08M1K8L2N', title: 'Girlfriend Collective Women\'s Compress Leggings', brand: 'Girlfriend Collective', category: 'Bottoms', color: 'Black', style_tags: 'active,edgy,casual', price: 68.00, image_url: 'https://m.media-amazon.com/images/I/91X9Z9Z9X3L.jpg', affiliate_link: 'https://www.amazon.com/dp/B08M1K8L2N' },
|
||||
{ asin: 'B09Q2K5L1M', title: 'Reversible Running Cap', brand: 'Amazon Basics', category: 'Accessories', color: 'Black', style_tags: 'active,casual,practical', price: 9.99, image_url: 'https://m.media-amazon.com/images/I/61Z6J6X6X4L.jpg', affiliate_link: 'https://www.amazon.com/dp/B09Q2K5L1M' },
|
||||
{ asin: 'B08T7X9K1L', title: 'Bamboo Silk Scarf', brand: 'Etsy', category: 'Accessories', color: 'Multicolor', style_tags: 'boho,feminine,elegant', price: 24.99, image_url: 'https://m.media-amazon.com/images/I/71X7Y7Z7X6L.jpg', affiliate_link: 'https://www.amazon.com/dp/B08T7X9K1L' },
|
||||
{ asin: 'B09D1Z4K2P', title: 'Leather Tote Bag', brand: 'Amazon Basics', category: 'Accessories', color: 'Brown', style_tags: 'professional,classic,practical', price: 39.99, image_url: 'https://m.media-amazon.com/images/I/81X8Z8Z8X7L.jpg', affiliate_link: 'https://www.amazon.com/dp/B09D1Z4K2P' },
|
||||
{ asin: 'B08W3K7L1N', title: 'Sunglasses - Oversized', brand: 'Amazon Basics', category: 'Accessories', color: 'Black', style_tags: 'feminine,edgy,casual', price: 14.99, image_url: 'https://m.media-amazon.com/images/I/91X9Z9Z9X4L.jpg', affiliate_link: 'https://www.amazon.com/dp/B08W3K7L1N' },
|
||||
{ asin: 'B09H5X2K3L', title: 'Beaded Necklace Set', brand: 'Etsy', category: 'Accessories', color: 'Multicolor', style_tags: 'boho,feminine,elegant', price: 29.99, image_url: 'https://m.media-amazon.com/images/I/61Z6J7X7X9L.jpg', affiliate_link: 'https://www.amazon.com/dp/B09H5X2K3L' }
|
||||
];
|
||||
|
||||
seedProducts.forEach(product => {
|
||||
db.run(
|
||||
`INSERT OR IGNORE INTO products (asin, title, brand, category, color, style_tags, price, image_url, affiliate_link)
|
||||
VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)`,
|
||||
[
|
||||
product.asin,
|
||||
product.title,
|
||||
product.brand,
|
||||
product.category,
|
||||
product.color,
|
||||
JSON.stringify(product.style_tags),
|
||||
product.price,
|
||||
product.image_url,
|
||||
product.affiliate_link
|
||||
],
|
||||
(err) => {
|
||||
if (err) console.error('Error inserting product:', err);
|
||||
}
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
// Initialize database and load seed data
|
||||
loadSeedProducts();
|
||||
|
||||
// Start server
|
||||
app.listen(PORT, () => {
|
||||
console.log(`Server running on port ${PORT}`);
|
||||
});
|
||||
3
wardrobe-ai/frontend/.eslintrc.json
Normal file
3
wardrobe-ai/frontend/.eslintrc.json
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"extends": "next/core-web-vitals"
|
||||
}
|
||||
14
wardrobe-ai/frontend/next.config.js
Normal file
14
wardrobe-ai/frontend/next.config.js
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
reactStrictMode: true,
|
||||
async rewrites() {
|
||||
return [
|
||||
{
|
||||
source: '/api/:path*',
|
||||
destination: 'http://localhost:3001/api/:path*'
|
||||
}
|
||||
]
|
||||
},
|
||||
}
|
||||
|
||||
module.exports = nextConfig
|
||||
1561
wardrobe-ai/frontend/package-lock.json
generated
Normal file
1561
wardrobe-ai/frontend/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
21
wardrobe-ai/frontend/package.json
Normal file
21
wardrobe-ai/frontend/package.json
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"name": "wardrobe-ai-frontend",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"next": "^14.0.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^10.4.16",
|
||||
"postcss": "^8.4.31",
|
||||
"tailwindcss": "^3.3.0"
|
||||
}
|
||||
}
|
||||
6
wardrobe-ai/frontend/postcss.config.js
Normal file
6
wardrobe-ai/frontend/postcss.config.js
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
238
wardrobe-ai/frontend/src/components/CuratedBox.js
Normal file
238
wardrobe-ai/frontend/src/components/CuratedBox.js
Normal file
|
|
@ -0,0 +1,238 @@
|
|||
import { useState, useEffect } from 'react';
|
||||
import { useRouter } from 'next/router';
|
||||
|
||||
export default function CuratedBox() {
|
||||
const router = useRouter();
|
||||
const [box, setBox] = useState(null);
|
||||
const [feedback, setFeedback] = useState({});
|
||||
const [userId, setUserId] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
const userIdParam = router.query.userId;
|
||||
if (userIdParam) {
|
||||
setUserId(userIdParam);
|
||||
generateBox(userIdParam);
|
||||
}
|
||||
}, [router.query]);
|
||||
|
||||
const generateBox = async (userId) => {
|
||||
try {
|
||||
// For now, use placeholder preferences - in real app, fetch from user profile
|
||||
const response = await fetch('/api/box', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
userId,
|
||||
preferredColors: ['Black', 'White', 'Navy', 'Grey'],
|
||||
stylePreferences: ['Classic', 'Casual'],
|
||||
budget: 100
|
||||
})
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
setBox(data);
|
||||
} catch (error) {
|
||||
console.error('Error generating box:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleFeedbackChange = (productId, field, value) => {
|
||||
setFeedback(prev => ({
|
||||
...prev,
|
||||
[productId]: {
|
||||
...prev[productId],
|
||||
[field]: value
|
||||
}
|
||||
}));
|
||||
};
|
||||
|
||||
const submitFeedback = async (productId) => {
|
||||
const userFeedback = feedback[productId];
|
||||
if (!userFeedback) return;
|
||||
|
||||
try {
|
||||
await fetch('/api/feedback', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
userId,
|
||||
productId,
|
||||
wouldKeep: userFeedback.wouldKeep,
|
||||
fitRating: userFeedback.fitRating,
|
||||
styleRating: userFeedback.styleRating,
|
||||
colorRating: userFeedback.colorRating,
|
||||
qualityRating: userFeedback.qualityRating
|
||||
})
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error submitting feedback:', error);
|
||||
}
|
||||
};
|
||||
|
||||
if (!box) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<div className="animate-spin rounded-full h-16 w-16 border-t-4 border-purple-600"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto px-4 py-8">
|
||||
<div className="text-center mb-12">
|
||||
<h1 className="text-4xl font-bold text-gray-900 mb-4">Your Curated Box</h1>
|
||||
<p className="text-gray-600">
|
||||
Based on your preferences, we've selected {box.totalMatches} items just for you
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{box.products.map(product => (
|
||||
<div key={product.id} className="bg-white rounded-xl shadow-lg overflow-hidden">
|
||||
<div className="relative aspect-video">
|
||||
<img
|
||||
src={product.image_url}
|
||||
alt={product.title}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="p-6">
|
||||
<div className="flex justify-between items-start mb-2">
|
||||
<div>
|
||||
<h3 className="text-xl font-bold text-gray-900">{product.title}</h3>
|
||||
<p className="text-gray-600">{product.brand}</p>
|
||||
</div>
|
||||
<span className="text-xl font-bold text-purple-600">
|
||||
${product.price}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2 mt-3 mb-4">
|
||||
{JSON.parse(product.style_tags).map(tag => (
|
||||
<span key={tag} className="px-2 py-1 bg-purple-100 text-purple-700 rounded text-sm">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<a
|
||||
href={product.affiliate_link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition-colors"
|
||||
>
|
||||
Buy on Amazon
|
||||
</a>
|
||||
<span className="text-gray-500 text-sm">
|
||||
Score: {product.score}/100
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Feedback Form */}
|
||||
<div className="border-t pt-4">
|
||||
<h4 className="font-semibold mb-3">Rate this item:</h4>
|
||||
<div className="space-y-2">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">
|
||||
Would you keep it?
|
||||
</label>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => handleFeedbackChange(product.id, 'wouldKeep', true)}
|
||||
className={`px-3 py-1 rounded ${
|
||||
feedback[product.id]?.wouldKeep === true
|
||||
? 'bg-green-500 text-white'
|
||||
: 'bg-gray-200'
|
||||
}`}
|
||||
>
|
||||
Yes
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleFeedbackChange(product.id, 'wouldKeep', false)}
|
||||
className={`px-3 py-1 rounded ${
|
||||
feedback[product.id]?.wouldKeep === false
|
||||
? 'bg-red-500 text-white'
|
||||
: 'bg-gray-200'
|
||||
}`}
|
||||
>
|
||||
No
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">Fit</label>
|
||||
<select
|
||||
onChange={(e) => handleFeedbackChange(product.id, 'fitRating', parseInt(e.target.value))}
|
||||
className="w-full px-2 py-1 border rounded"
|
||||
>
|
||||
<option value="">Select</option>
|
||||
{[1, 2, 3, 4, 5].map(num => (
|
||||
<option key={num} value={num}>{num}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">Style</label>
|
||||
<select
|
||||
onChange={(e) => handleFeedbackChange(product.id, 'styleRating', parseInt(e.target.value))}
|
||||
className="w-full px-2 py-1 border rounded"
|
||||
>
|
||||
<option value="">Select</option>
|
||||
{[1, 2, 3, 4, 5].map(num => (
|
||||
<option key={num} value={num}>{num}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">Color</label>
|
||||
<select
|
||||
onChange={(e) => handleFeedbackChange(product.id, 'colorRating', parseInt(e.target.value))}
|
||||
className="w-full px-2 py-1 border rounded"
|
||||
>
|
||||
<option value="">Select</option>
|
||||
{[1, 2, 3, 4, 5].map(num => (
|
||||
<option key={num} value={num}>{num}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">Quality</label>
|
||||
<select
|
||||
onChange={(e) => handleFeedbackChange(product.id, 'qualityRating', parseInt(e.target.value))}
|
||||
className="w-full px-2 py-1 border rounded"
|
||||
>
|
||||
<option value="">Select</option>
|
||||
{[1, 2, 3, 4, 5].map(num => (
|
||||
<option key={num} value={num}>{num}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => submitFeedback(product.id)}
|
||||
className="w-full mt-3 bg-purple-600 text-white py-2 rounded hover:bg-purple-700"
|
||||
>
|
||||
Submit Feedback
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="text-center mt-12">
|
||||
<button
|
||||
onClick={() => router.push('/')}
|
||||
className="bg-gray-600 text-white px-8 py-3 rounded-lg hover:bg-gray-700 transition-colors"
|
||||
>
|
||||
Create New Profile
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
13
wardrobe-ai/frontend/src/components/Navbar.js
Normal file
13
wardrobe-ai/frontend/src/components/Navbar.js
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
import Link from "next/link";
|
||||
|
||||
export default function Navbar() {
|
||||
return (
|
||||
<nav className="bg-white border-b border-gray-200 px-6 py-4">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<Link href="/" className="text-2xl font-bold text-gray-900">
|
||||
WardrobeAI
|
||||
</Link>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
310
wardrobe-ai/frontend/src/components/StyleProfileForm.js
Normal file
310
wardrobe-ai/frontend/src/components/StyleProfileForm.js
Normal file
|
|
@ -0,0 +1,310 @@
|
|||
import { useState } from 'react';
|
||||
|
||||
export default function StyleProfileForm() {
|
||||
const [formData, setFormData] = useState({
|
||||
email: '',
|
||||
sizes: { tops: '', bottoms: '', shoes: '' },
|
||||
preferredColors: [],
|
||||
stylePreferences: [],
|
||||
lifestyle: '',
|
||||
hardLines: [],
|
||||
mustHaves: [],
|
||||
budget: 100
|
||||
});
|
||||
|
||||
const allColors = ['Red', 'Blue', 'Green', 'Yellow', 'Orange', 'Purple', 'Pink', 'Black', 'White', 'Grey', 'Brown', 'Navy'];
|
||||
const allStyles = ['Classic', 'Casual', 'Professional', 'Boho', 'Feminine', 'Edgy'];
|
||||
const allLifestyles = ['Work', 'Casual', 'Active', 'Formal', 'Travel', 'Everyday'];
|
||||
const allHardLines = ['Synthetic', 'Tight', 'Short', 'High Heels', 'Denim'];
|
||||
const allMustHaves = ['Pockets', 'Machine Washable', 'Dry Clean Only', 'Layerable', 'Sustainable'];
|
||||
|
||||
const handleColorChange = (color) => {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
preferredColors: prev.preferredColors.includes(color)
|
||||
? prev.preferredColors.filter(c => c !== color)
|
||||
: [...prev.preferredColors, color]
|
||||
}));
|
||||
};
|
||||
|
||||
const handleStyleChange = (style) => {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
stylePreferences: prev.stylePreferences.includes(style)
|
||||
? prev.stylePreferences.filter(s => s !== style)
|
||||
: [...prev.stylePreferences, style]
|
||||
}));
|
||||
};
|
||||
|
||||
const handleHardLineChange = (line) => {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
hardLines: prev.hardLines.includes(line)
|
||||
? prev.hardLines.filter(l => l !== line)
|
||||
: [...prev.hardLines, line]
|
||||
}));
|
||||
};
|
||||
|
||||
const handleMustHaveChange = (mustHave) => {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
mustHaves: prev.mustHaves.includes(mustHave)
|
||||
? prev.mustHaves.filter(m => m !== mustHave)
|
||||
: [...prev.mustHaves, mustHave]
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
try {
|
||||
// Create user
|
||||
const userRes = await fetch('/api/users', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ email: formData.email })
|
||||
});
|
||||
|
||||
const user = await userRes.json();
|
||||
|
||||
// Create profile
|
||||
const profileRes = await fetch('/api/profiles', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
userId: user.id,
|
||||
sizes: formData.sizes,
|
||||
preferredColors: formData.preferredColors,
|
||||
stylePreferences: formData.stylePreferences,
|
||||
lifestyle: formData.lifestyle,
|
||||
hardLines: formData.hardLines,
|
||||
mustHaves: formData.mustHaves,
|
||||
budget: formData.budget
|
||||
})
|
||||
});
|
||||
|
||||
if (profileRes.ok) {
|
||||
// Redirect to box generation
|
||||
window.location.href = `/box?userId=${user.id}`;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error:', error);
|
||||
alert('Error creating profile. Please try again.');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto px-4 py-8">
|
||||
<div className="text-center mb-12">
|
||||
<h1 className="text-4xl font-bold text-gray-900 mb-4">Style Profile</h1>
|
||||
<p className="text-gray-600">Tell us about your style preferences to get personalized recommendations</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-8">
|
||||
{/* Email */}
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-lg font-medium mb-2">Email Address</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
required
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
||||
value={formData.email}
|
||||
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
|
||||
placeholder="your@email.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Sizes */}
|
||||
<div>
|
||||
<label className="block text-lg font-medium mb-4">Sizes</label>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label htmlFor="tops" className="block text-sm font-medium mb-1">Tops</label>
|
||||
<select
|
||||
id="tops"
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg"
|
||||
onChange={(e) => setFormData({ ...formData, sizes: { ...formData.sizes, tops: e.target.value } })}
|
||||
>
|
||||
<option value="">Select size</option>
|
||||
<option value="XS">XS</option>
|
||||
<option value="S">S</option>
|
||||
<option value="M">M</option>
|
||||
<option value="L">L</option>
|
||||
<option value="XL">XL</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="bottoms" className="block text-sm font-medium mb-1">Bottoms</label>
|
||||
<select
|
||||
id="bottoms"
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg"
|
||||
onChange={(e) => setFormData({ ...formData, sizes: { ...formData.sizes, bottoms: e.target.value } })}
|
||||
>
|
||||
<option value="">Select size</option>
|
||||
<option value="XS">XS</option>
|
||||
<option value="S">S</option>
|
||||
<option value="M">M</option>
|
||||
<option value="L">L</option>
|
||||
<option value="XL">XL</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="shoes" className="block text-sm font-medium mb-1">Shoes</label>
|
||||
<select
|
||||
id="shoes"
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg"
|
||||
onChange={(e) => setFormData({ ...formData, sizes: { ...formData.sizes, shoes: e.target.value } })}
|
||||
>
|
||||
<option value="">Select size</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
<option value="10">10</option>
|
||||
<option value="11">11</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Preferred Colors */}
|
||||
<div>
|
||||
<label className="block text-lg font-medium mb-4">Preferred Colors</label>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{allColors.map(color => (
|
||||
<button
|
||||
key={color}
|
||||
type="button"
|
||||
onClick={() => handleColorChange(color)}
|
||||
className={`px-4 py-2 rounded-full border-2 transition-all ${
|
||||
formData.preferredColors.includes(color)
|
||||
? 'bg-purple-500 border-purple-500 text-white'
|
||||
: 'bg-white border-gray-300 hover:border-purple-500'
|
||||
}`}
|
||||
>
|
||||
{color}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Style Preferences */}
|
||||
<div>
|
||||
<label className="block text-lg font-medium mb-4">Style Preferences</label>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-3">
|
||||
{allStyles.map(style => (
|
||||
<button
|
||||
key={style}
|
||||
type="button"
|
||||
onClick={() => handleStyleChange(style)}
|
||||
className={`px-4 py-3 rounded-lg border-2 transition-all ${
|
||||
formData.stylePreferences.includes(style)
|
||||
? 'bg-purple-500 border-purple-500 text-white'
|
||||
: 'bg-white border-gray-300 hover:border-purple-500'
|
||||
}`}
|
||||
>
|
||||
{style}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Lifestyle */}
|
||||
<div>
|
||||
<label htmlFor="lifestyle" className="block text-lg font-medium mb-2">Lifestyle</label>
|
||||
<select
|
||||
id="lifestyle"
|
||||
required
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
||||
onChange={(e) => setFormData({ ...formData, lifestyle: e.target.value })}
|
||||
>
|
||||
<option value="">Select lifestyle</option>
|
||||
{allLifestyles.map(lifestyle => (
|
||||
<option key={lifestyle} value={lifestyle}>{lifestyle}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Hard Lines */}
|
||||
<div>
|
||||
<label className="block text-lg font-medium mb-4">Hard Lines (What you won't wear)</label>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{allHardLines.map(line => (
|
||||
<button
|
||||
key={line}
|
||||
type="button"
|
||||
onClick={() => handleHardLineChange(line)}
|
||||
className={`px-4 py-2 rounded-lg border-2 transition-all ${
|
||||
formData.hardLines.includes(line)
|
||||
? 'bg-red-500 border-red-500 text-white'
|
||||
: 'bg-white border-gray-300 hover:border-red-500'
|
||||
}`}
|
||||
>
|
||||
{line}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Must Haves */}
|
||||
<div>
|
||||
<label className="block text-lg font-medium mb-4">Must Haves</label>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-3">
|
||||
{allMustHaves.map(mustHave => (
|
||||
<button
|
||||
key={mustHave}
|
||||
type="button"
|
||||
onClick={() => handleMustHaveChange(mustHave)}
|
||||
className={`px-4 py-2 rounded-lg border-2 transition-all ${
|
||||
formData.mustHaves.includes(mustHave)
|
||||
? 'bg-green-500 border-green-500 text-white'
|
||||
: 'bg-white border-gray-300 hover:border-green-500'
|
||||
}`}
|
||||
>
|
||||
{mustHave}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Budget */}
|
||||
<div>
|
||||
<label className="block text-lg font-medium mb-2">Budget</label>
|
||||
<div className="flex gap-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setFormData({ ...formData, budget: 100 })}
|
||||
className={`px-6 py-3 rounded-lg border-2 transition-all ${
|
||||
formData.budget === 100
|
||||
? 'bg-purple-500 border-purple-500 text-white'
|
||||
: 'bg-white border-gray-300 hover:border-purple-500'
|
||||
}`}
|
||||
>
|
||||
$100
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setFormData({ ...formData, budget: 250 })}
|
||||
className={`px-6 py-3 rounded-lg border-2 transition-all ${
|
||||
formData.budget === 250
|
||||
? 'bg-purple-500 border-purple-500 text-white'
|
||||
: 'bg-white border-gray-300 hover:border-purple-500'
|
||||
}`}
|
||||
>
|
||||
$250
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full bg-purple-600 text-white py-4 rounded-lg text-lg font-semibold hover:bg-purple-700 transition-colors"
|
||||
>
|
||||
Get Your Curated Box
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
38
wardrobe-ai/frontend/src/globals.css
Normal file
38
wardrobe-ai/frontend/src/globals.css
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
--max-width: 1200px;
|
||||
--border-radius: 12px;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
max-width: 100vw;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
color: #1a1a1a;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
color: #f0f0f0;
|
||||
background-color: #1a1a1a;
|
||||
}
|
||||
}
|
||||
17
wardrobe-ai/frontend/src/layout.js
Normal file
17
wardrobe-ai/frontend/src/layout.js
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
import { Inter } from "next/font/google";
|
||||
import "./globals.css";
|
||||
|
||||
const inter = Inter({ subsets: ["latin"] });
|
||||
|
||||
export const metadata = {
|
||||
title: "WardrobeAI",
|
||||
description: "Personalized clothing curation",
|
||||
};
|
||||
|
||||
export default function RootLayout({ children }) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body className={inter.className}>{children}</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
16
wardrobe-ai/frontend/src/pages/api/[...path].js
Normal file
16
wardrobe-ai/frontend/src/pages/api/[...path].js
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
// Next.js API route proxy to backend
|
||||
import { createProxyMiddleware } from 'http-proxy-middleware';
|
||||
|
||||
export default function handler(req, res) {
|
||||
const backendUrl = process.env.BACKEND_URL || 'http://localhost:3001';
|
||||
|
||||
const proxy = createProxyMiddleware({
|
||||
target: backendUrl,
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
'^/api': '/api'
|
||||
}
|
||||
});
|
||||
|
||||
return proxy(req, res);
|
||||
}
|
||||
11
wardrobe-ai/frontend/src/pages/api/config.js
Normal file
11
wardrobe-ai/frontend/src/pages/api/config.js
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
const { exec } = require('child_process');
|
||||
|
||||
export default function handler(req, res) {
|
||||
const PORT = 3001; // Backend port
|
||||
|
||||
if (req.method === 'GET') {
|
||||
res.status(200).json({ backendPort: PORT });
|
||||
} else {
|
||||
res.status(405).end();
|
||||
}
|
||||
}
|
||||
11
wardrobe-ai/frontend/src/pages/api/health.js
Normal file
11
wardrobe-ai/frontend/src/pages/api/health.js
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
const { exec } = require('child_process');
|
||||
|
||||
export default function handler(req, res) {
|
||||
const PORT = 3001; // Backend port
|
||||
|
||||
if (req.method === 'GET') {
|
||||
res.status(200).json({ backendPort: PORT });
|
||||
} else {
|
||||
res.status(405).end();
|
||||
}
|
||||
}
|
||||
5
wardrobe-ai/frontend/src/pages/api/hello.js
Normal file
5
wardrobe-ai/frontend/src/pages/api/hello.js
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
|
||||
|
||||
export default function handler(req, res) {
|
||||
res.status(200).json({ name: 'WardrobeAI API' });
|
||||
}
|
||||
13
wardrobe-ai/frontend/src/pages/box.js
Normal file
13
wardrobe-ai/frontend/src/pages/box.js
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
import Navbar from "./Navbar";
|
||||
import CuratedBox from "./CuratedBox";
|
||||
|
||||
export default function BoxPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<Navbar />
|
||||
<main>
|
||||
<CuratedBox />
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
13
wardrobe-ai/frontend/src/pages/index.js
Normal file
13
wardrobe-ai/frontend/src/pages/index.js
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
import Navbar from "./Navbar";
|
||||
import StyleProfileForm from "./StyleProfileForm";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<Navbar />
|
||||
<main>
|
||||
<StyleProfileForm />
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
10
wardrobe-ai/frontend/tailwind.config.js
Normal file
10
wardrobe-ai/frontend/tailwind.config.js
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: [
|
||||
"./src/**/*.{js,jsx,ts,tsx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
28
wardrobe-ai/frontend/tsconfig.json
Normal file
28
wardrobe-ai/frontend/tsconfig.json
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "bundler",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"incremental": true,
|
||||
"plugins": [
|
||||
{
|
||||
"name": "next"
|
||||
}
|
||||
],
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
23
wardrobe-ai/package.json
Normal file
23
wardrobe-ai/package.json
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
{
|
||||
"name": "wardrobe-ai",
|
||||
"version": "0.1.0",
|
||||
"description": "Personalized clothing curation engine",
|
||||
"main": "server/index.js",
|
||||
"scripts": {
|
||||
"dev": "concurrently \"npm run dev:frontend\" \"npm run dev:backend\"",
|
||||
"dev:frontend": "cd frontend && npm run dev",
|
||||
"dev:backend": "cd backend && npm run dev",
|
||||
"build": "cd frontend && npm run build",
|
||||
"start": "cd backend && node index.js"
|
||||
},
|
||||
"keywords": [
|
||||
"wardrobe",
|
||||
"curation",
|
||||
"amazon",
|
||||
"recommendations"
|
||||
],
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"concurrently": "^8.2.2"
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue