🖥️ PC Builder Application

👨‍💻 Built by: Krish Bhalerao (@NoTKrisHisOp)

A full-stack web application that helps users select compatible PC components and build their ideal computer configuration with real-time compatibility checking and cost calculation.

🌟 View Project Showcase | 🔗 Live on GitHub

Features

• Visual Component Selection with Images: Card-based selection UI with images for each part and summary preview.

• Live Price Comparison (Amazon/Flipkart): Compare current offers for each part via new endpoints. Works with mock data out of the box.

• Component Selection: Choose from various PC components including:

  • CPUs (Intel and AMD)
  • Motherboards
  • Memory (RAM)
  • Graphics Cards
  • Storage (SSD/HDD)
  • Power Supplies
  • Cases

• Compatibility Checking: Automatic validation to ensure selected components are compatible with each other

• Admin Panel: Administrative interface to manage components and view configurations (now supports image URLs)

• Database Integration: SQLite database to store component information and user configurations

Technology Stack

• Frontend: HTML, CSS, JavaScript
• Backend: Node.js with Express.js
• Database: SQLite3
• Additional: CORS enabled for cross-origin requests; optional Amazon PA-API and Flipkart Affiliate API for pricing (via env).

Installation

1. Clone the repository:

   git clone https://github.com/yourusername/pc-builder.git
   cd pc-builder

2. Install dependencies:

   npm install

3. Configure environment (optional but recommended):

   • Copy .env.example to .env and adjust values.
   • If you don't have Amazon/Flipkart API keys, leave them blank and keep PRICE_MOCK=1 for demo price comparisons.

4. Start the server:

   node backend/server.js

5. Open your browser and navigate to http://localhost:3001

Project Structure

pc-builder/
├── frontend/
│   ├── index.html          # Main user interface
│   ├── admin.html          # Admin panel
│   ├── app.js             # Frontend JavaScript
│   └── style.css          # Styling
├── backend/
│   ├── server.js          # Express server
│   ├── routes.js          # API routes
│   └── database.js        # Database operations
├── data/
│   ├── pcbuilder.db       # SQLite database
│   ├── schema.sql         # Database schema
│   └── compatibility.json # Component compatibility rules
└── README.md

API Endpoints (selected)

• GET /api/categories - List categories
• GET /api/components - List components (optional ?categoryId=)
• GET /api/components/:id - Get a component
• POST /api/components - Add new component (Admin; header x-admin-token)
• PUT /api/components/:id - Update component (Admin)
• DELETE /api/components/:id - Delete component (Admin)
• POST /api/build/validate - Validate a build (compatibility and budget)
• POST /api/build/suggest - Generate a suggested build for a budget/purpose
• GET /api/price-search?query=... - Search live prices by query (Amazon/Flipkart)
• GET /api/components/:id/prices - Search live prices by component name

Usage

For Users:

1. Visit the main page to start building your PC
2. Select components from different categories
3. The system will automatically check compatibility
4. Save your configuration when complete

For Administrators:

1. Access the admin panel at /admin.html
2. Add, edit, or remove components
3. View and manage saved configurations

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

This project is open source and available under the MIT License.

Author

Krish Bhalerao Email: krishbhalerao9@gmail.com