PC Build Recommender

An intelligent PC build recommendation system that helps users find the perfect computer components within their budget. The application uses a heuristic-based scoring algorithm to rank PC parts and provides automated build recommendations optimized for different use cases.

Features

🔍 Smart Part Search

• Search through 8,979 PC components from multiple categories
• Advanced filtering by component type (CPU, GPU, RAM, etc.)
• Sort by AI Score, price, or performance metrics
• Pagination support for efficient browsing (20 items per page)

🤖 AI-Powered Rankings

• Performance-to-price ratio scoring for all components
• Category-specific ranking algorithms:
  • CPUs: Ranked by cores, clock speed, and value
  • GPUs: Ranked by memory, chipset tier, and value
  • RAM: Ranked by capacity, speed, and value
  • Storage: Ranked by capacity and value
• Visual indicators showing AI Score and market rank

💰 Automated Build Recommendations

• Enter your budget and receive 3 optimized builds:
  • Gaming Build: GPU-focused for maximum gaming performance
  • Workstation Build: CPU and RAM optimized for productivity
  • General Use Build: Balanced components for everyday computing
• Smart budget allocation across 7 component categories
• Detailed part breakdown with pricing in Indian Rupees (₹)

🎨 Modern UI

• Dark mode interface with glassmorphism design
• Responsive layout for desktop and mobile
• Interactive cards with detailed component specifications
• Modal dialogs for viewing complete build details

Tech Stack

Frontend

• React 18 with TypeScript
• Vite for fast development and builds
• TailwindCSS for styling
• Shadcn/ui component library
• React Router for navigation
• React Query for data fetching
• Sonner for toast notifications
• Lucide React for icons

Backend

• Node.js with Express 5
• TypeScript for type safety
• Zod for schema validation
• Vitest for testing

Data

• 8,979 components across 7 categories
• Multi-file JSON dataset with detailed specifications
• Automated USD to INR conversion (1 USD ≈ 85 INR)

Installation

Prerequisites

• Node.js 18+ or 20+
• npm or pnpm

Setup

1. Clone the repository

git clone <repository-url>
cd CSE-PSPP-Proj

2. Install dependencies

npm install
# or
pnpm install

3. Start development server

npm run dev

The application will be available at http://localhost:5173

Usage

Getting Build Recommendations

1. Navigate to the Recommendations page (home page)
2. Enter your budget in Indian Rupees (minimum ₹40,000)
3. Click Generate Recommendations
4. View the 3 generated builds as cards
5. Click any build card to see the complete parts list in a popup

Searching for Parts

1. Navigate to Search Parts from the header
2. Use the search bar to find specific components
3. Filter by component type (CPU, GPU, RAM, etc.)
4. Sort results by:
   • Best Value (AI): Highest performance-to-price ratio
   • Price: Low to High
   • Price: High to Low
5. Browse through pages using Next/Previous buttons

Project Structure

CSE-PSPP-Proj/
├── client/                 # Frontend React application
│   ├── components/        # Reusable UI components
│   │   ├── ui/           # Shadcn UI components
│   │   ├── Header.tsx    # Global navigation
│   │   ├── PartCard.tsx  # Component display card
│   │   └── BuildDisplay.tsx
│   ├── pages/            # Route pages
│   │   ├── Recommendations.tsx
│   │   └── Search.tsx
│   └── lib/              # Utilities
├── server/               # Backend Express server
│   ├── routes/          # API endpoints
│   │   ├── recommend.ts # Build recommendation logic
│   │   └── parts.ts     # Parts search & retrieval
│   ├── services/        # Business logic
│   │   ├── partService.ts          # Part data management
│   │   ├── rankingService.ts       # AI scoring algorithm
│   │   └── recommendationEngine.ts # Build generation
│   └── data/           # Legacy data (deprecated)
├── dataset/            # PC component data (JSON files)
│   ├── cpu.json
│   ├── video-card.json
│   ├── memory.json
│   ├── motherboard.json
│   ├── internal-hard-drive.json
│   ├── power-supply.json
│   └── case.json
├── shared/             # Shared TypeScript types
│   └── api.ts
└── tests/             # Unit tests

API Endpoints

GET /api/parts

Search and retrieve PC parts with pagination.

Query Parameters:

• query (optional): Search term
• type (optional): Filter by component type (cpu, gpu, ram, etc.)
• page (optional): Page number (default: 1)
• limit (optional): Items per page (default: 20)

Response:

{
  "data": [
    {
      "id": "cpu-123",
      "name": "AMD Ryzen 7 5800X",
      "type": "cpu",
      "price": 28900,
      "brand": "AMD",
      "score": 87.5,
      "rank": 42,
      "specs": { ... }
    }
  ],
  "total": 566,
  "page": 1,
  "totalPages": 29
}

POST /api/recommend

Generate optimized PC builds for a given budget.

Request Body:

{
  "budget": 80000
}

Response:

{
  "builds": [
    {
      "id": "build-gaming-1234567890",
      "usage": "gaming",
      "totalPrice": 79850,
      "parts": {
        "cpu": { ... },
        "gpu": { ... },
        "ram": { ... },
        "motherboard": { ... },
        "storage": { ... },
        "psu": { ... },
        "case": { ... }
      },
      "estimatedPerformance": {
        "gaming": 85,
        "workstation": 70
      }
    }
    // ... 2 more builds
  ]
}

Build Budget Allocation

The recommendation engine uses optimized budget allocation strategies:

Gaming Build

• GPU: 45%
• CPU: 20%
• RAM: 10%
• Motherboard: 10%
• Storage: 8%
• PSU: 5%
• Case: 2%

Workstation Build

• CPU: 35%
• GPU: 20%
• RAM: 20%
• Motherboard: 10%
• Storage: 10%
• PSU: 3%
• Case: 2%

General Use Build

• CPU: 25%
• GPU: 20%
• RAM: 15%
• Motherboard: 15%
• Storage: 15%
• PSU: 5%
• Case: 5%

Testing

Run the test suite:

npm test

Test Coverage:

• Part service data loading and caching
• Search query functionality
• Ranking algorithm correctness
• Pagination logic
• Build generation with budget constraints
• Currency conversion (USD → INR)

Development

Build for Production

npm run build

This creates:

• dist/spa/ - Frontend static files
• dist/server/ - Backend server bundle

Start Production Server

npm start

Type Checking

npm run typecheck

Code Formatting

npm run format.fix

Data Sources

The dataset includes components from:

• 566 CPUs (Intel, AMD)
• 903 GPUs (NVIDIA, AMD)
• 3,034 RAM modules (DDR4, DDR5)
• 725 Motherboards (ATX, Micro-ATX, Mini-ITX)
• 2,126 Storage devices (SSD, HDD)
• 611 Power Supplies (80+ certified)
• 1,014 Cases (Various form factors)

All prices are automatically converted from USD to INR at an approximate rate of 1 USD = 85 INR.

Contributing

This project was developed as part of a college assignment. Contributions are welcome!

License

MIT License - feel free to use this project for learning purposes.

---

Built with ❤️ using React, TypeScript, and Express