Inspiration
Building a custom PC is an intimidating financial and technical risk for most users. One minor oversight—like matching an AMD Ryzen processor with an Intel-socket motherboard, or buying DDR5 RAM for a DDR4 board results in loss of hundreds of dollars and time. Traditional compatibility tools are flat, boring, and text-heavy checklists. I was inspired to turn this frustrating, anxiety giving blueprint into a highly visual, tactile, and interactive building experience that makes hardware assembly riskproof.
What it does
RigForge is an interactive, custom PC building platform and e-commerce store. Instead of filling out endless form fields, users configure their dream machine visually. The core feature is a side profile visualizer of a PC case interior. As users select a CPU, GPU, or Motherboard, the components dynamically materialize inside the case in their exact slots.
How I built it
I engineered RigForge with a highly modular JavaScript/MERN architecture: FRONTEND : Built using React.js and styled with TailwindCSS. The live visualizer utilizes direct inline React SVGs with conditional rendering logic tied to the application's configuration state. BACKEND : Powered by Node.js, implementing a strict JWT (JSON Web Token) authentication architecture using secure HTTP-only cookies for session protection. DATABASE : MongoDB and Mongoose handle our parts inventory, compatibility matrices (socket types, dimensions, wattage configurations), and user cart data.
Challenges I ran into
The toughest roadblock was avoiding external, heavy graphic files for the live building engine while ensuring it updated flawlessly. Managing dozens of static PNG images for every combination would have wrecked network performance. I solved this by creating a purely code-driven visualizer using inline SVGs, where component visibility, bounding coordinates, and labels alter dynamically based on state arrays.
MeDo Specific Challenges
During development cycles on MeDo.dev, the platform's AI code generator frequently injected unnecessary Chinese comments, variable aliases, and localized syntax strings directly into our backend files. At several points, the multi-turn chat assistant completely shifted into Chinese..
Accomplishments that I am proud of
I am incredibly proud of building a highly visual, interactive interface that feels enterprise-grade while maintaining an absolute minimum footprint using zero external image assets or bloated canvas libraries for the rendering canvas. Seeing a GPU or CPU snap into place instantly based on dropdown states while the app concurrently flags power supply wattage warnings feels incredibly satisfying. I never added any specifications of any hardware components, be it, processors, GPUs, or RAM sticks. The AI pulled all the data accurately from publicly available data on the internet.
What I learned
This hackathon pushed me to rethink how MeDo.dev as a platform handles web app building, media and data visualization. I was astonished to see how the platform harnessed the power of AI to build a full stack website at a very high speed when given a perfectly crafted prompt or a message.
What's next for RigForge
The foundation of RigForge opens up massive opportunities. Next, I want to expand the compatibility logic into a full-scale thermal dynamic script that estimates a rig's internal airflow, fan orientation efficiency, and temperature bottlenecks before the user buys. I also plan to update the 2D SVG layout into an isometric or full 3D interactive building environment using Three.js, alongside introducing collaborative "Build Rooms" via WebSockets where more that one person can build and customize a single PC workspace together in real time. I am also planning on adding specifications of more hardware components and create custom rig visualizers based on the brand and model.
Log in or sign up for Devpost to join the conversation.