Projects using Flutter in KarachiProjects using Flutter in KarachiGPUStore: A Modern GPU Shopping and Discovery App
I designed GPUStore to make buying graphics cards feel less like decoding a spec sheet and more like exploring a well-organized catalog. Instead of overwhelming users with dense tables and inflated resale listings, I structured the product around what PC builders actually ask: which generation is this, what did it originally cost, and what will it do for me?
The visual identity pairs a dark charcoal interface with electric lime green accents. The green guides interaction. It marks active filter tabs, the Shop Now and Add to Cart buttons, the cart badge, saved hearts, and the NVIDIA brand label. Dark cards and high-contrast product renders give each card a premium, showroom feel while keeping specs and prices easy to read.
The home screen opens with a personal greeting, a search bar with a real example query ("RTX 4090"), and quick category chips for All, NVIDIA, AMD, Accessories, and Builds. A bold RTX 50 Series banner promotes new releases, followed by a "Featured GPUs" section. Each card shows the architecture, release year, launch price, and a one-tap cart button.
The All GPUs screen turns browsing into a timeline. Segmented filters (All, GTX, RTX, By Year) sit above a 2016 to 2026 range slider, so users can explore generations and their original launch prices (MSRP). Seeing the GTX 1080 at $599 next to the RTX 4090 at $1,599 makes a decade of pricing history readable at a glance.
The product detail screen prioritizes clarity. An image carousel with wishlist and share actions leads into the architecture and release date, then a dedicated MSRP panel. A compact Key Specifications table follows (Ampere architecture, 8,704 CUDA cores, 10 GB GDDR6X, 320-bit memory bus, 320 W TDP). A sticky quantity stepper and Add to Cart button stay within thumb reach. A short note clarifies that launch price shows original MSRP and actual market prices may vary.
The profile screen gives users a personal hub with their saved items, orders, builds, and member-since year. Wishlist, Orders, and Settings tabs keep everything in one place, and saved cards show the date each item was added. Across the app, a five-tab bottom navigation (Home, Browse, Wishlist, Orders, Account) keeps the structure predictable.
Frontend
I built the client as a cross-platform mobile app using React Native with TypeScript. React Navigation handles the bottom tabs and the stack flows between listing, detail, and cart. TanStack Query manages server data, caching, and loading states, while Zustand holds lightweight local state such as cart count, wishlist toggles, and active filters. The year-range slider and category filters update query parameters, so results refresh without a full reload. Reusable components (GPU card, spec row, filter chip, quantity stepper) are driven by a shared design-token file for the dark theme and green accent, keeping the UI consistent across screens.
Backend
The backend is a Node.js REST API (Express or NestJS) backed by PostgreSQL through Prisma. The core schema covers users, GPUs, wishlists, carts, cart items, orders, order items, and builds. Each GPU record stores brand, series (GTX or RTX), architecture, release date, MSRP, CUDA cores, memory size and type, bus width, and TDP. MSRP is stored separately from the live selling price, which matches the app's "launch price vs. market price" approach, and all money values are stored as integer cents to avoid rounding errors. Endpoints support search, brand, series, and year-range filtering (GET /gpus?series=RTX&yearFrom=2016&yearTo=2026), product details, cart and wishlist actions, and order history. Authentication uses JWT with refresh tokens, images are served through a CDN, and Stripe handles checkout.
The result is a GPU shopping experience that feels premium, informative, and easy to navigate, built for gamers and creators. 
