Customized PC Planner | My Final Year Project

Introduction

This blog post is about my Final Year Project — a web-based application called Customized PC Planner. The idea behind this project came from something very personal: my love for gaming. I’ve always enjoyed watching gameplay videos and PC build content on YouTube.

Even though I never owned a proper gaming PC myself. That curiosity turned into a habit of researching components, watching reviews, and learning how gaming rigs are built. When it came time to choose a topic for my Final Year Project,

I thought — why not build something I’m genuinely passionate about? I had already spent a lot of time understanding PC components and how they work together, so this seemed like the perfect opportunity.

Problem Statement

When it comes to building a PC, users generally fall into two categories — technical and non-technical. The issue is that most existing platforms cater heavily to one group or the other. Some are filled with advanced specs and jargon that overwhelm beginners.

Another common problem is comparing components. Two CPUs or GPUs might be priced the same, but one may perform better in gaming while the other is more suitable for productivity tasks like video editing or machine learning.

For someone without a technical background, making the right choice becomes guesswork. They may end up spending the same amount of money on a component that doesn’t match their use case.

Compatibility is also a major pain point. Many users don’t know which CPUs work with which motherboards, or how bottlenecks can affect performance. There are tools out there for checking compatibility, benchmark scores, and bottleneck analysis.

Proposed Solution

To address these problems, I decided to build a responsive web application called Customized PC Planner, which works seamlessly on both desktop and mobile devices. The main idea was to make it accessible and useful for both technical and non-technical users.

For non-technical users, the platform includes a collection of pre-built PCs categorized by use case, such as gaming or productivity. Each build comes with relevant details, benchmark scores for CPUs and GPUs, and an estimated performance overview.

All shown on a single, easy-to-navigate page.

For technical users, there’s a Custom Build section that allows them to create a PC from scratch, choosing each component individually. A compatibility check runs in the background to ensure that selected parts work together.

The goal was to remove the need for users to bounce between multiple websites. Everything they need to make an informed decision is available in one place, whether they’re first-time builders or experienced PC enthusiasts.

Features of the Project

Pre-Built PC Catalog

• A collection of gaming and productivity PCs curated for different budgets and use cases.

• Each build includes components, total cost, and estimated performance.

Custom PC Builder & Component Compatibility Check

• Lets users build their own PC by selecting individual components.

• Automatically filters compatible parts (e.g., compatible motherboard after selecting a CPU).

• Real-time validation to ensure selected parts are compatible (e.g., CPU and motherboard sockets, RAM type, PSU wattage, etc.).

Benchmark Scores

Shows performance benchmarks for

• CPU

• GPU

Bottleneck Calculator

Calculates potential performance bottlenecks between CPU and GPU combinations.

Product Catalog

• Components are organized into categories like CPU, GPU, Motherboard, RAM, etc.

• Each category has its own page displaying products with pricing, discounts, and titles.

• Pagination is handled from the backend, ensuring scalability as the catalog grows.

• Filters are customized per component type (e.g., CPU socket type, stock cooler; motherboard form factor, memory type).

• Common filters like price, featured, and brand are also included.

User Profile Management

• Users can update their name and phone number from their profile.

• Order history section allows users to track past purchases and view related details.

• Users can add items to their cart or wishlist from any product page.

• Full cart management: add/remove single or multiple items, or clear the cart entirely.

• Wishlist supports similar functionality: add, remove, and clear items.

• Users can view order history along with product and order details.

Authentication System

• Sign-up and login functionality with email/password.

• Google authentication integrated.

• Forgot password and password reset features are available.

Admin Panel

• A comprehensive backend dashboard for managing all key areas of the platform.

Order Management

• View all orders along with key details like payment status, total amount, and shipping address.

• Ability to update order status (e.g., Pending, Confirmed, Shipped, Delivered).

• Search and filter orders by status, with pagination for handling large datasets.

User Management

• Access a table of all registered users with key details such as account status and email verification.

• Filter users by status (active/inactive) and email verification state.

• Admins can deactivate user accounts, which prevents login and order placement.

Product Management

• Add new products with component-specific form fields (e.g., CPUs, GPUs, motherboards, etc.).

• Forms are dynamically tailored based on component type, highlighting the platform's focus on PC hardware rather than general e-commerce.

• View a complete list of products with pagination and filters by category, product type, and status.

• Products can be edited or deleted directly from the admin panel.

My Role and Contributions

This project was originally started by me and my friend Farhan, and later Faisal joined us as the third member. At the end of our sixth semester, we submitted our project proposal together. Faisal had experience in backend development, so he suggested I handle the frontend.

At that time, I had no experience in web development — so I started from scratch, learning HTML, CSS, and then Tailwind CSS. I used these skills to build the static version of the entire website myself, without using any template. Most of this work was done during and after our semester break.

Once the seventh semester began, the static frontend was ready, and Faisal began working on the backend using Laravel. Meanwhile, I started learning React so I could manage the frontend more efficiently.

I didn’t stop there — I also began learning Node.js and Express so I could build a full-stack version of the project on my own. Eventually, I created a fully functional MERN version of the project. After comparing both versions.

My implementation turned out to be more complete and production-ready, so we agreed to submit my version for the final evaluation.

In the end, I contributed to multiple areas: I worked on some parts of the documentation, designed the database schema, handled the entire frontend in React, implemented the backend in Node.js and Express.js following the MVC architecture, and developed all the required REST APIs.

I also managed the deployment process — hosting the frontend on Netlify and the backend on Render. Overall, I took full ownership of the MERN stack version of the project from design to deployment.

Technologies Used

Customized PC Planner is built using the MERN stack and incorporates a variety of tools, libraries, and services to ensure a smooth, scalable, and feature-rich experience on both the customer and admin sides.

Frontend

• React 18 with Vite for fast performance and modern UI rendering

• Redux Toolkit and Redux Persist for state management and session persistence

• Tailwind CSS, Material UI (MUI), and Styled Components for styling

• React Router DOM for client-side routing

• Axios for API requests, Toastify for notifications, Swiper for sliders

• Chart.js for rendering benchmark data visually

• Fully responsive design ensuring smooth experience across devices

Backend

• Node.js and Express.js for building REST APIs

• MongoDB with Mongoose for database operations

• JWT and Firebase Authentication for secure login and protected routes

• Stripe API integration for handling payments

• Multer and Cloudinary for image uploads and storage

• Joi for backend validation

• Nodemailer for sending emails

• CORS for security hardening

• User passwords secured with bcrypt hashing

Testing & Security

• APIs tested with Postman

• Performance audits using Lighthouse

Challenges Faced

• Starting from Zero in Web Development
  At the beginning of the project, I had no prior experience in frontend or backend development. Learning HTML, CSS, and Tailwind from scratch while trying to build real UI pages was a big challenge early on.

• Balancing Learning and Implementation
  While the project progressed, I had to constantly switch between learning React, Node.js, Express, and implementing features on the go — which made time management and focus a constant struggle.

• Rebuilding the Entire Project Alone
  Initially, the backend was being developed in Laravel by another teammate. But when I started building the MERN version alone, I had to rewrite everything from scratch — frontend, backend, APIs, and database — while making sure it all worked together.

• Handling Complex Features as a Beginner
  Implementing compatibility logic, bottleneck calculations, and dynamic product filtering systems required critical thinking and a deeper understanding of how real-world systems work.

• Deployment Challenges
  Figuring out how to deploy both the frontend and backend with services like Netlify and Render, managing environment variables, and fixing build errors took a lot of trial and error.

Demo & Resource Links (Highly Recommended)

• 🔗 Live Demo: Customized PC Planner

• 📂 FYP Documentation: View on Google Drive

• 💻 Source Code: GitHub Repository

• 📽️ Video Explanation: LinkedIn Post

Conclusion

Working on Customized PC Planner has been one of the most valuable and challenging experiences of my degree. It pushed me to learn new technologies, think like a developer, and build something that solves a real-world problem. I hope this blog gives a clear picture of how the project evolved and what went into making it. I'm proud of what I’ve created, and I look forward to improving and expanding it further.

References

This project was developed as a Final Year Project under the supervision of Sir Fahad Amin at COMSATS University.
Team members: Hanzala Chaudhary, Farhan Amjad, and Faisal Hafeez.