The first prototype was a bare bones website—just a look to see how it would pan out. Designed as a minimalist proof of concept, it featured a simple two-panel layout. On the left, users could browse through categories of computer components such as CPUs, GPUs, RAM, storage, motherboards, power supply units (PSUs), and cases, each with various options and their respective prices. For example, under the CPU section, users could choose from options like the Intel Core i5-12400F for $180 or the AMD Ryzen 5 5600X for $200. Similarly, the storage section offered a range of options from 1TB NVMe SSDs to 4TB HDDs, catering to different storage needs and budgets.
The right panel, labeled "Current Build," was initially empty, serving as a placeholder for users to select and add components to their custom PC configuration. The total cost dynamically updated to reflect the sum of selected components, providing immediate feedback on the financial aspect of the build. This feature allowed users to experiment with different combinations and see how their choices impacted the overall cost.
At this stage, there were no advanced features like a PC configurator with compatibility checks or user accounts—just the essentials to gauge interest and functionality. The prototype’s primary focus was on testing the core concept: Could users intuitively select and price out components for a custom PC build?
The goal was to quickly test the waters, gather initial feedback from a small group of users, and identify any major roadblocks before investing more time and resources into development. While it lacked polish and advanced functionality, the prototype served its purpose by giving us a tangible starting point and a clearer vision for where we wanted to take the project next.
This initial version was deliberately stripped down to focus on the fundamental interaction: selecting parts and seeing the total cost. It was a critical first step in validating whether users found the concept of building a custom PC online appealing and feasible.
The V2 prototype expands the original bare-bones system by introducing a custom build tab, transforming the single-path experience into a flexible two-mode interface. While maintaining its core philosophy—a streamlined tool that generates PC build quotes with minimal user effort—the V2 now empowers users to either accept a pre-configured recommendation or manually curate their own system component by component. This dual-mode approach serves both casual gamers seeking quick solutions and power users prioritizing specific hardware choices.
Architecturally, the prototype retains its minimalist, single-page design while adding a tabbed navigation system with two distinct content panels: one for game presets and another for custom builds. Each panel shares a unified quote-generation interface. Tab buttons use data-tab attributes to identify modes, with JavaScript dynamically toggling the active class to control visibility—ensuring only the relevant form appears at any time and preventing visual clutter.
The custom build form organizes components into logical rows (CPU/GPU, RAM/storage, PSU/case) to improve readability and guide users through selection without overwhelming them. Each dropdown features user-friendly labels that map to programmatic values, enabling JavaScript to calculate prices and generate accurate quotes.
Styling builds upon the original's uncluttered aesthetic with subtle visual cues that enhance usability without distracting from functionality. Tab navigation uses a clean, horizontal layout with a bottom border to indicate the active selection, while the custom build form mirrors the presets' minimalist design with consistent spacing and typography.
The form's responsive layout groups components into rows for optimal readability across devices. A dedicated ZIP code input calculates shipping costs, aligning with the presets' existing shipping and tax logic. All interactive elements maintain visual consistency with the original prototype for a cohesive experience.
The JavaScript logic was significantly updated to handle both modes modularly. When "Generate My Quote" is clicked, the system checks the active tab: referencing the gamePresets object for presets or summing custom component prices via the partPrices object. The quote-generation function then applies shipping/tax estimates, formats the total price, and displays a detailed breakdown in the same structured format as presets.
Under the hood, the V2 prototype maintains a clean separation of concerns: HTML handles structure, CSS ensures cohesive styling, and JavaScript manages state and logic. This separation enables easy extension—adding new tabs or components requires minimal changes. The custom build feature introduces scalability: new parts can be added to partPrices without disrupting logic, and the tab system accommodates future modes. Event delegation handles tab switching efficiently, while form validation ensures required components are selected before quote generation.
Ultimately, the V2 prototype achieves its goal of providing a more versatile, user-centric experience while retaining the original's simplicity. By bridging quick recommendations with personalized hardware selection, it becomes a practical tool for a wider audience. The interface guides users naturally from selection to quote generation with clear visual feedback, and the tab system provides immediate context about the active mode while the consistent quote format reduces cognitive load.