main project image

Vibox

E-commerce platform for buying and selling gaming PCs with a custom PC builder module

project image
Client

Great Britain

Description

A web-based platform that allows users to purchase unique gaming computers. The platform has an CMS admin panel where admin can create information pages with filters based on budget, frames per second (FPS), games, processors, and other parameters.

Users can purchase a pre-built PC or customize their own configuration. The system checks the compatibility of components to ensure a smooth gaming experience.

The platform also integrates with FPS service, which helps users choose the best components for their specific games.

Computers are grouped by model, with flagship assemblies highlighted. Each model has a detailed description on a separate page, including animations and settings, which can be accessed through the admin panel.

Full order cycle is available, including creating and saving assemblies, adding items to cart, ordering, and managing status. Stripe payment service is enabled for payment.

What was the purpose of this project

The goal of the project is to develop a service with a smart computer configuration tool that ensures compatibility between all selected components and prevents incorrect setups from being assembled. It is also essential to create a platform that allows users to customize information pages, categorize products, and provides convenient data filtering. This is necessary to optimize the site for search engine optimization (SEO) and ensure the best possible user experience.

What challenges we faced

As part of the design and development process, we completed the following tasks:

  1. To design and develop a unique online store platform from concept to full implementation
  2. Implement a customizer for gaming computers, configured and integrated Stripe payment system
  3. Configure and integrate the Stripe payment system
  4. Create a tool for generating landing pages for each computer assembly
  5. Develop two admin panels: one to manage the online store (E-commerce admin panel) and website structure (CMS admin panel)
  6. Organize localization in five languages, with dedicated domains for each

Set up a scalable server on AWS (Amazon Web Services) platform

Technologies

Frontend: Nuxt 3, TS, Pinia, Scss

Backend: Django, drf, Wagtail, Oscar

Server: Amazon EKSr

project image
img 3 (big)

Home page

The main page of the website provides information about all the major sections, making it easy for users to understand which computer categories are available, how much the budgets start at, the latest model releases, reviews, and more. The entire page is divided into blocks that can be added, deleted, or modified through the CMS dashboard.

img 1-1

Gaming computers

A separate page dedicated to gaming computers has been implemented, which is managed through the CMS admin panel. The administrator can easily create and update game PC cards with detailed information: price, estimated delivery date, user rating and key technical characteristics.

A dedicated page for gaming computers has been created, which can be managed through the CMS admin panel. The admin can easily create and update gaming PC details with detailed information such as price, estimated delivery date, user ratings, and key technical specifications. 

For the convenience of users, the page provides functional pagination tools that allow you to comfortably navigate through a large catalog. Flexible filtering by various parameters and sorting of assemblies by different criteria (price, rating, delivery date, etc.) greatly simplify the search for the best option that meets the individual needs of gamers.

Each assembly comes with the ability to view detailed information about the product, allowing users to explore all features and configurations of the selected computer. Additionally, users can quickly add their preferred gaming PC to their shopping cart for later ordering.

img 1-2

Assembly categories

Within the CMS admin panel, we have provided the ability to create pages that allow users to select assemblies based on certain categories. These categories include budget, processor, color, and other characteristics that are available for assemblies created and displayed in the E-commerce admin area

Part of the CMS admin panel development, our team implemented flexible functionality that allows us to create specialized pages for highlighting assemblies in various categories. This makes it possible to group computers by key characteristics such as budget, processor, color, and other parameters that are specified and managed in the E-commerce admin panel.

For example, the Shop by Budget page provides a convenient classification of assemblies based on price ranges, while the AMD Ryzen 3 page highlights gaming PCs with AMD Ryzen 3 processors.

As a result, we have developed a scalable solution that offers maximum flexibility in presenting the product range. This allows us to adapt the content quickly to different marketing needs and customer requests.

categories

Create your perfect gaming PC - choose, customize, and win with a gaming build for true gamers!

Models

All the assemblies created in the E-commerce administration panel are grouped by model series. Each row includes the flagship model, the top-of-the-line with the best technical specifications.

Each model range is presented on a dedicated landing page, which features custom animations and a detailed overview of all the key features of the model.

Special attention has been paid to customization flexibility: through the CMS administration panel, administrators can completely customize the color scheme of the landing page, giving each page a unique look, as well as edit all content (text, images, videos).

Additionally, this landing page serves as a detailed page of each assembly, while the first section displaying a list of available models is only visible when viewing the entire model range. This creates a clear and logical navigation between general and individual product presentations.

img 1-4

Customizer

We have developed a Customiser page where users can select components for their custom PC build. The page uses custom animations and an intelligent decision tree to ensure compatibility between all selected components during each stage of assembly. This guarantees that all parts will fit seamlessly into the case and are fully compatible with one another.

A significant feature of the builder is the integration of third-party FPS (Frame Per Second) service. This allows users to evaluate the performance of key components, such as processors, motherboards, graphics cards, and more, in popular games. Users can set preferences for graphics settings, screen resolution, and specific games, and the system selects the optimal combination of Core-components to provide maximum FPS.

In addition, any user can use an existing build from the site and customize it further with the constructor. This is convenient as it allows users to create customized builds without starting from scratch

The user will always see the current total cost of selected components and an estimated delivery date. To make things more convenient, users can reset all selected parts or save their current assembly as a draft, which is accessible in their profile. This allows them to return to the assembly process at a later time.

img 1-3

Account

A modern and convenient personal account for the user has been created, which requires authorization by email. The user receives a confirmation link to verify their account. 

User can access his profile and update personal data at any time. Special attention is paid to the flexible management of delivery addresses — you can add up to 7 addresses and select one of them as the default address, which speeds up the order processing process.

A built-in referral system is implemented in the personal account: the user can share a unique referral link and receive an additional discount on the next order.

It is also possible to receive notifications about order status and platform news in your account.

To have full control over your purchases, convenient tools for managing drafts and viewing order history are available in your personal account. These tools allow you to plan and track all your purchases in one place.

img 1-6

Creating an order

We have created a comprehensive and user-friendly order processing system that provides a complete cycle for creating and processing purchases. The primary functionality of the checkout allows users to add both pre-assembled items and individual components to their shopping cart, creating their personalized order.

Upon navigating to the checkout section, users will see their shopping cart filled with selected items. At the bottom of the page, personalized recommendations are displayed to encourage additional purchases. Detailed information about the order, such as the total cost, order date, delivery date, tax amount, shipping costs, and a convenient field for entering a discount code, is displayed on the right.

The order date and delivery date are calculated in the backend, considering holidays and weekends received through the Google Calendar API.

After reviewing the shopping cart, the user proceeds to select a delivery address that makes the process as simple and transparent as possible. This is followed by a transition to the payment page, where the Stripe payment system is integrated. This system provides payment flexibility through support for bank cards and PayPal.

Upon a successful transaction, a purchase confirmation page is displayed, after which the user can monitor the order status in their account or receive notifications via email specified in their account settings.

img 1-5

Coupons and discounts

A comprehensive and flexible system for managing coupons and discounts has been developed, fully integrated into the E-commerce administration panel.

The functionality of the coupon system includes:

- Ability for administrators to create coupons by setting parameters such as the category of products that the discount applies to, the amount of discount, the country of validity for the coupon, and other settings.

- Application of coupons to the price of the product only, excluding additional costs like shipping, assembly, and taxes. 

- Implementation of a unique business rule at the request of clients: the coupon may only be applied to one item in the product category, provided that a complete assembly is in the cart. That is, users cannot receive a discount on a single product (e.g., a mouse) unless it is part of a complete assembly.

Additionally, the discount system allows administrators to set base prices and discount percentages for products.

For assemblies that consist of multiple components, the base price and discount are calculated dynamically. If the components have a discount, the base assembly price will be based on their quantity. If the components do not have a discount, the base cost will be taken into account.

Additionally, the administrator can manually set a discounted price for the entire assembly. This allows for flexible pricing management and special promotions.

coupons

Localization

Website is designed to support localizations to different languages. When we first published the project, we added 5 local versions - English, French, German, Italian, and Spanish.

When we make changes to a localized version, the website's domain name also changes. Using different domain names for each localization can greatly improve the convenience and effectiveness of user interaction with our site.

First, having individual domains for each language and region creates a sense of localized service for visitors. This increases trust and improves conversions. 

Secondly, it has a positive impact on SEO - search engines better index regional versions of our site, showing them specifically for the target audience in their native language and country.

In addition, different domains allow you to tailor local marketing campaigns, providing flexibility in promoting and customizing content to the cultural and legal aspects of each market. This is crucial for complying with local regulations and meeting user preferences. Therefore, using domains associated with language versions is a successful strategy for global business growth and enhancing the user experience.

localization

Currency

We have fully implemented support for two currencies, EUR and GBP. This allows users from any region or localization to view and purchase products in a convenient currency. This significantly improves the user experience and makes shopping for an international audience easier.

In our online store management system, prices in both currencies are set at once for all products, components, and models. This ensures accurate pricing regardless of the selected currency in the frontend.

The administration panel also has basic settings for each country, such as delivery costs, assembly costs, tax rates, and other important parameters. These are all specified separately for EUR and GBP, allowing for flexible adaptation of logistics and financial terms to each market's requirements.

Special attention is paid to the calculation of assembly costs: since assemblies are composed of a set of individual components with prices in both currencies, we have implemented two methods for calculating the final cost. 

The first method is automatic, where the assembly price is calculated as the sum of all component prices, ensuring transparency and speed in price updates. This method ensures accuracy and efficiency in the process.

The second method is manual, giving the administrator the ability to set the price of the assembled product independently, taking into account marketing and commercial considerations. 

Overall, this comprehensive approach to multi-currency provides convenience for users and flexibility for businesses. It allows businesses to operate effectively in multiple markets while ensuring accuracy and manageability of their data.

currency

Reviews and rating

Reviews are displayed on the Home page and the Landing page of the product. At the same time, the feedback system works as follows:

  • If a user has assembled a product based on a pre-made template, the review will be sent to the original product. You can only leave feedback for purchased products.
  • If the user created a product from scratch using a customizer, the review will appear on the main page.
  • For purchased pre-made products, the review will also be displayed on the product page and the detailed page.
reviews

FPS Service

We have developed a unique tool that allows users to choose configurations with optimal settings for specific games. The essence of this solution is to integrate an external FPS service that calculates and displays the estimated frames per second (FPS) for a given setup based on user-defined parameters (processor, graphics card, game). This helps players make informed decisions and choose the best system for their needs. 

The tool is available on two key pages of the website: the сustomizer, where users can configure their system according to their preferences, and the game pages, where we display recommended configurations based on the FPS data provided by the service.

Technically, we integrate the service at the E-commerce administration panel level. The backend regularly receives data from the external service and updates the database, after which we compare the characteristics with the game requirements. This ensures that our recommendations are always up-to-date and accurate.

fps

Data Import/Export functions

Within the E-commerce administrative panel, we have implemented the ability to import and export data in order to transfer information from the old website to the new one and maintain the internal processes of the company.

Using the import function, administrators can upload an .XLS or .CSV file containing information about products, models, components, categories, and other relevant data. The format for these files has been previously discussed with the client in order to ensure compatibility and avoid any issues during the data upload process.

On the other hand, the export function allows users to download data from our database, again in a format that has been agreed upon beforehand. This function enables administrators to export data on all computers, component prices, orders, and other important information.

import_export

Admin panels

We have implemented and updated a robust system of admin panels to ensure effective management of the online store and content. Two platforms were used to quickly and reliably complete key tasks:

  • Oscar, a powerful E-commerce admin panel, has taken over basic store functions such as managing product catalogs, categories, models, and orders. To fully meet our client's needs, we customized Oscar's internal logic to incorporate all necessary business processes. The customization process was smooth and efficient, resulting in reliable operation and easy administration.
  • CMS Wagtail is a flexible content management system that expands the capabilities of a website, giving clients full control over the informational aspect of the platform. Thanks to Wagtail, clients have the ability to independently create and edit an unlimited number of pages and content blocks, as well as organize their arrangement at their own discretion. This has significantly reduced the time it takes to respond to changes and decreased dependence on developers.
system_of_admin_panels

View other projects

Gamety
Games, Websites
Gamety Clicker
A Telegram clicker for distribute GTY tokens during the Airdrop phase
PartyLinkup-card
Mobile Apps, Websites
Party Linkup
A platform for organizing meetups, conferences, and other events
meta fighter small icon
Websites, Games, Mobile Apps
Metafighter
A multiplayer 3D fighting game for browsers and mobile devices
oraicle-card
Websites
ORAICLE
A website for the presentation of a new crypto exchange forecasting service
Miniteam-card
Games, Websites
Miniteam
Children's mobile app-game “Who is Max?" for preschool children and the Miniteam website
Debt Threat card
Mobile Apps, Websites
Debt Threat
Financial assistant, for those who want to learn how to properly allocate their financial resources and make a profit
SenpayTV
Websites
Senpai TV
Website for modern clothing for fans of Japanese culture
terragama-Card
Websites, Games
Terragama
A mobile game aimed at maintaining ecology in nature
Docmobile-card
Websites
DocMobil
A platform for providing medical services online
getblock-card
Websites
Get Block
Web Application for Checking Transactions Between Crypto Wallets
StellaAlMare-card
Websites
Stella Al Mare
A web platform for booking rooms and getting full information about the hotel
swealth_lab_small_icon
Mobile Apps, Websites
Swealth Flow
Web platform to sell CBD products
decoration imagedecoration imagedecoration imagedecoration image

By submitting your inquiry, you will receive:

  • A consultation with a manager
  • Gathering and formalization of your requirements
  • Recommendations and ideas based on your objectives
  • A commercial proposal tailored to your company
  • A final estimate with complete details of the work
decoration image