The PC Builder is a modern, user-friendly web application that enables users to build their own PCs. It uses a visual builder where components such as CPU, GPU, RAM, and storage can be selected. The application is targeted towards tech enthusiasts, gamers, and students who want to customize their ideal PC setup.
- Login and registration via Supabase Auth
- Profile page with saved builds
- Browse components like CPU, GPU, Motherboard, RAM, SSD, PSU, Case, Cooling
- Filter by brand, price, and other specifications
- Sort by various attributes
- Intuitive selection for each component
- Live price calculation
- Dynamic preview of your build
- Users can save builds in their profile
- Share via a unique link
- Automatic compatibility checking between components
- Warnings for conflicts (e.g., wrong socket or insufficient wattage)
| Component | Depends on | Check |
|---|---|---|
| Processor | Motherboard | Socket must match |
| Motherboard | Processor, Memory, Case | Socket, RAM type (e.g., DDR4/DDR5), form factor |
| Memory | Motherboard | RAM type (e.g., DDR4 vs DDR5) and slots (optional) |
| GPU | Case, Motherboard | PCIe slot, GPU length vs case max GPU length |
| Storage | Motherboard | SATA vs M.2 availability |
| PSU | GPU, Case | Wattage capacity, PSU form factor |
| Case | Motherboard, GPU, PSU | Motherboard form factor, GPU length, PSU size |
- Admin can manage components
- Logs for builds and activity
- Option to compare components
- Wishlist for future purchases
- External API used to fetch real-time component data (price, specs, availability)
- Component Details could display an image of the corresponding part that's fetched through an API.
- Profile customization
- Uploading profile images
- Dynamic management of components (builds & profile)
- For example more checks like watt usages, RAM slot size, GPU length, etc...
- Better handling compatibility
- Framework: Next.js 13+ (App Router)
- Styling: Tailwind CSS with Shadcn/ui
- Database & Auth: Supabase
- Language: TypeScript
- Form Handling: React Hook Form
- Icons: Lucide React
Contributions are welcome! Please read our contributing guidelines to get started.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
For detailed developer documentation, including project structure, component architecture, and styling guidelines, see the DEVELOPER_GUIDE.md.
The application is deployed on Vercel. You can view a live demo at https://pc-builder-app-tau.vercel.app/.
This project is licensed under the MIT License - see the LICENSE file for details.
Please file feedback and issues over on the GitHub issue page.