X5.io Websites

In early 2022 I was contacted by a couple of entrepreneurs who wanted to build a B2B platform with multiple SaaS products. The project was called bot.biz but later renamed to x5.io. I was hired as the lead frontend developer to build the admin dashboard with React and Next.js, integrate backend API with GraphQL and create multiple landing pages for the modules. I also designed a UI kit that works with React and a checkout dialog component for payments integrated with CloudPayments. The project was launched in 2023 but due to constant payment delays and abuse I had to find a new job. The client never paid me the full amount for my work, saying "You think only about money. This will end badly." and silently dropped me in late 2024 owing more than 1500€. In 2025, after more than a year of unsuccessfull attempts to contact them and get my money, I've decided to drop it and published all websites and their source code for free.

Ketoplan Diet Website

Ketogenic diet is a low-carb, high-fat diet that offers health benefits. The Ketoplan Diet Website was a questionnaire designed to create personalized paid keto diet plans for users based on their preferences and goals. It consists of a series of questions determining the user's dietary needs, followed by a tailored meal plan and recipes.

The frontend was built entirely by me using React and Next.js in a couple of days. The backend was created by a third-party developer. One of the challenges was to optimize the performance of webpage for mobile devices and slow connection. I achieved this by using Low Quality Image Placeholders and preloading assets for the next quiz step in the background before user reaches it.

Visit Ketoplan Diet website demo Open Ketoplan Diet website source code Open Ketoplan Diet website figma layout

Mental Health Quiz Website

Mental Health Quiz is a web application that provides users with a series of questions to assess their mental well-being. The quiz covers various aspects of mental health, such as stress levels, work-life balance, and emotional state. Based on the user's responses, the application generates a personalized report with insights and paid recommendations plan to improve their mental health.

The frontend was built entirely by me using React and Next.js in about one week. The backend was created by a third-party developer. The project uses a custom-built checkout dialog component mentioned below for payments.

Visit Mental Health Quiz website demo Open Mental Health Quiz website source code

Bot.biz landing

The first project I made for bot.biz/x5.io was a simple landing page in late 2021. It's a responsive and snappy single-page website built with React, Next.js, reveal transitions, custom Material UI components and CSS animations. It uses next-i18next for internationalization, redux for state management, optimized for five screen breakpoints and Safari. The project was made in a couple of days and I received 300€ for it.

Visit Bot.biz landing Open Bot.biz landing source code Open Bot.biz landing figma layout

Bot.biz frontend

The main dashboard frontend for bot.biz/x5.io was the second project I was building with React, Next.js and Material UI. It features responsive charts, custom UI kit, dynamic theming, internationalization. Requests are using GraphQL and Apollo Client for React with automatic schema generation using Swagger.

I was leading a team of two frontend developers, mentoring one junior developer and doing code reviews. I also implemented OAuth authorization with two providers. The project was remade several times.

While working on this project I learned basic workflow with Jira and GitLab, learned to work with Docker deployments and CI/CD pipelines.

I also implemented a frontend for wallet management that was used by customers to withdraw their earnings to their online bank accounts. Another challenge was to create a custom bulk sending UI with templates, variables and conditional formatting for each platform (VK, Telegram, e-mails).

While implementing charts I have learned to use D3.js and Recharts libraries. I created a custom plugin for Recharts to display gradient areas filled according to the Figma design. On top of that, I had to make it responsible for viewport size and support dark mode.

Open Bot.biz frontend homepage figma layout Open Bot.biz frontend wallet figma layout

Bot.biz Admin Dashboard Website

The next project was an admin dashboard for bot.biz CEOs and managers to keep track of business users, finances and provide support to B2B clients. The project was built with React and Next.js, initially using Material UI but later replaced with Shadcn/Ui components.

The dashboard features statistics with charts, user management with search and filters, transaction history.

Visit Bot.biz Admin Dashboard demo Visit old Bot.biz Admin Dashboard demo Open Bot.biz Admin Dashboard source code

Lovebot Website

Lovebot module was one of connectable modules for bot.biz clients to use to earn money on their customers using it. It allowed users to search their secret admirers on VK page using page visit data and post reactions.

The frontend was built by me using React and Next.js in about one week. The backend was created by a third-party developer.

Visit Lovebot website demo Open Lovebot website source code

Glassbot Website

Glassbot module was another connectable module for bot.biz clients to use to earn money on their customers using it. It achieved similar functionality to Lovebot. The client wanted me to copy an existing website made by a third-party developer using plain HTML, CSS and JavaScript. I was contracted to build an exact replica and then adapt it for the bot.biz backend.

The frontend was built by me using React and Next.js in about one week. The backend was created by a third-party developer.

Visit Glassbot website demo Open Glassbot website source code

Prankbot

Prankbot was a website designed for people to prank their friends with a phone call and get the recording audio. The website featured a grid of prank scenarios with descriptions and an example audio recording, categorized using tabs and automatically updated from the database using API through schema built automatically from Swagger.

The website had a plain email/password authentication and a simple profile page with history of orders and buttons to download recording.

The frontend was built by me using React and Next.js in about four days. The backend was created by a third-party developer.

Visit Prankbot website demo Open Prankbot website source code Open Prankbot website figma layout Open Prankbot landing figma layout

Checkout Dialog Component

In order to handle payments for all websites and modules, I was tasked with creating a reusable checkout dialog component that would work with CloudPayments API. The component had to be flexible enough to accommodate different use cases, such as subscriptions, one-time payments, and various pricing options. It also had to be easily adaptable to any theme and ensure compliance with different legal requirements.

I chose React and Next.js for building the component, as they seemed to be the most suitable tools for all the websites I have created with Next.js. The component exported an API allowing developers to customize color scheme, checkboxes, cryptographic signatures for secure CloudPayments initialization, and handle success and failure callbacks.

Visit Checkout Dialog demo Open Checkout Dialog source code Open Checkout Dialog figma layout

Flat UI Kit

I exported all the components I have created for bot.biz/x5.io into a separate library called Flat UI Kit. This way I could reuse them in all projects for bot.biz without copy-pasting and maintaining multiple versions of the same code.

Open Flat UI kit source code
Ketoplan website screenshot with a plate of food and a quiz question: "Select protein source"
Ketoplan website screenshot with text: "Your keto-diet plan is ready"
Ketoplan website screenshot with text: "Individual diet plan"
Mental health website screenshot with text: "How do you rate your stress level in your everyday life?"
Mental health website screenshot with text: "How do you rate your work-life balance?"
Mental health website screenshot with questionnaire results
Bot.biz landing made in 2021
Bot.biz dashboard frontend
Bot.biz admin dashboard screenshot with charts
Bot.biz admin dashboard screenshot with transactions list
Lovebot screenshot with text: "Lovebot module: module allows users to search their secret admirers on VK page using page visit data and post reactions"
Glassbot screenshot with landing page for B2B sales
Prankbot homepage screenshot with text: "Prank your friend with a phone call and get the recording audio"
Transaction checkout dialog with text "Purchase subscription" / 999 ₽ / Card number / Month and year / CVC / Email / [Checkbox] Foo bar / [Checkbox] Hello world / [Button] Pay 999 ₽
Flat UI kit demo with buttons, checkboxes, error messages and input fields