About the project

Inspiration

Our inspiration for CustomComputer.io stemmed from the desire to empower users to build their dream PCs without the complexities often associated with component compatibility and selection. We aimed to create a platform that simplifies the PC building process, making high-performance custom computers accessible to everyone, from casual gamers to professional content creators. We were particularly inspired by the lack of intuitive, all-in-one solutions that combine a robust builder, pre-built options, and comprehensive support.

What it does

CustomComputer.io is a professional PC building service platform that allows users to:

• Build Custom PCs: Utilize an interactive builder with real-time compatibility checking to select components and assemble a personalized PC.
• Explore Pre-built PCs: Browse a catalog of expertly crafted pre-built systems, categorized for various uses like gaming, workstation, and streaming.
• Manage Orders: Track order status, from processing to shipping, and view order details.
• User Authentication: Securely sign up, log in, and manage user profiles.
• Payment Integration: Seamlessly process payments through Stripe.
• Admin Dashboard: Provides administrators with tools to manage products, orders, users, and site settings.
• Custom Request System: Users can submit detailed requests for highly specialized builds.
• Gallery: Showcase past builds and inspire future creations.
• Newsletter: Keep users updated with the latest news, products, and promotions.
• Career Portal: List job openings and manage applications.

How we built it

CustomComputer.io was built using a modern and robust tech stack to ensure scalability, performance, and a rich user experience.

• Frontend: Developed with React and TypeScript, leveraging Vite for a fast development environment and Tailwind CSS for utility-first styling. React Router handles client-side navigation, and the Context API manages global state. Lucide React provides a comprehensive icon system.
• Backend: Powered by Supabase, serving as our Backend-as-a-Service. This includes PostgreSQL for the database, Row Level Security (RLS) for data protection, real-time subscriptions, and user authentication.
• Payment Processing: Integrated with Stripe for secure and efficient payment handling, including Checkout Sessions and Webhooks.
• Serverless Functions: Netlify Functions are used for backend logic, particularly for handling Stripe webhooks, creating checkout sessions, and processing orders. Supabase Edge Functions are also utilized for various backend operations like email sending and custom request handling.
• Email System: Resend is used for transactional emails, with templates managed directly in Supabase.
• Analytics: Google Analytics is integrated for tracking user interactions and site performance.

Challenges we ran into

During development, we encountered several challenges:

• Component Compatibility Logic: Implementing a robust system for real-time component compatibility checking within the PC builder was complex, requiring careful consideration of various hardware constraints.
• Stripe Integration: Setting up and securely managing Stripe webhooks and checkout sessions, especially ensuring proper data flow and error handling between Stripe, Netlify Functions, and Supabase, required meticulous attention to detail.
• Database Schema Design: Designing a flexible and scalable database schema in Supabase that could handle diverse product types (pre-built PCs, individual components), orders, user profiles, and custom requests, while maintaining strong RLS policies, was an iterative process.
• Real-time Updates: Ensuring that changes in the admin panel (e.g., product stock, order status) were reflected promptly and accurately across the application.
• Deployment and Environment Management: Configuring environment variables and deployment settings across Netlify and Supabase to ensure a smooth and secure production environment.

Accomplishments that we're proud of

We are particularly proud of:

• Seamless User Experience: Creating an intuitive and visually appealing interface for building custom PCs, making a complex process feel simple and enjoyable.
• Robust Backend Integration: Successfully integrating Supabase and Stripe to handle authentication, database operations, and secure payments efficiently.
• Comprehensive Admin Tools: Developing a functional admin dashboard that provides full control over the platform's content and operations.
• Scalable Architecture: Building the application on a serverless architecture that is designed to scale with user demand.
• Attention to Detail: Implementing thoughtful features like detailed product specifications, image galleries, and clear order tracking.

What we learned

This project provided valuable insights into:

• Full-stack Development with Modern Tools: Deepened our understanding of integrating React, TypeScript, Supabase, and Stripe to build a complete web application.
• Database Design and Optimization: Learned best practices for designing relational databases, implementing RLS, and optimizing queries for performance.
• Serverless Functions: Gained practical experience in deploying and managing serverless functions for specific backend tasks.
• Payment Gateway Integration: Understood the intricacies of secure payment processing and webhook handling.
• User Experience Design: Emphasized the importance of user-centric design, especially for complex tools like a PC builder, to ensure ease of use.

What's next for CustomComputer.io

For the future of CustomComputer.io, we plan to:

• Enhanced Compatibility Engine: Implement more advanced compatibility checks within the PC builder, including wattage calculations and physical dimension constraints.
• AI-Powered Recommendations: Integrate AI to suggest optimal components based on user budget, purpose, and preferences.
• Community Features: Add forums, user reviews for custom builds, and a marketplace for user-submitted build ideas.
• Expanded Product Catalog: Continuously update and expand the component and pre-built PC offerings.
• International Shipping: Explore options for expanding shipping to international customers.
• Mobile Application: Develop native mobile applications for iOS and Android to provide a seamless experience across devices.

Built With

• bolt
• netlify
• supabase