Skip to main content

Layout of the VKontakte Mini-Application Using React and VKUI

neurocoder

In previous articles, we created a mini-application for VKontakte using Deno, Supabase Edge Functions, OpenAI, and grammY. Now let's look at how to improve the interface of our application using React and the VKUI library. VKUI is a component library designed for creating interfaces that match the VKontakte style.

1. Flexbox Froggy Game​

What is Flexbox Froggy?​

Flexbox Froggy is an interactive game that will help you master Flexbox concepts using an engaging and visual approach. In the game, you will control frogs that need to reach their lily pads using Flexbox properties.

How to Play?​

In each of the 24 levels of the game, you are provided with CSS code that you need to complete to correctly position the frogs on the screen. The game offers hints and explanations, making learning more accessible and fun. For example, in the first level, you need to use the justify-content property to align the frogs in a row. You will be prompted to write code that helps them reach the lily pads.

#pond {
  display: flex;
  justify-content: space-between; /* Use this property to distribute the frogs */
}

Why Play?​

Flexbox Froggy helps you:

  • Understand the main Flexbox properties, such as flex-direction, justify-content, align-items, and others.
  • Learn to apply these properties in practice, which will significantly simplify your layout work.
  • Enjoy the learning process in a playful manner.

2. Layout of the VKontakte Mini-Application Using React and VKUI​

Basics of VKUI​

VKUI is a component library specifically designed for creating interfaces that match the VKontakte style. It provides ready-made components such as buttons, panels, cards, and other interface elements that will help you quickly and efficiently develop applications.

Applying Flexbox and VKUI Knowledge in Our Mini-Application Now, when we already have a mini-application, let's apply the knowledge of Flexbox and the VKUI library to improve the interface. Here are a few steps to get started:

Step 1: Installing VKUI​

If you haven't installed VKUI yet, run the following command in your project's terminal:

npm install @vkontakte/vkui

Step 2: Creating an Interface with Panel and VKUI Components​

Create a new component, for example, MainPanel.js, and use VKUI components to create the interface.

import React from 'react';
import { Panel, PanelHeader, Button, Group, Div } from '@vkontakte/vkui';

const MainPanel = () => {
  return (
    <Panel>
      <PanelHeader>Добро пожаловать!</PanelHeader>
      <Group>
        <Div>
          <h2>Ваше мини-приложение</h2>
          <p>Здесь вы можете взаимодействовать с ботом и получать ответы.</p>
          <Button size="l" mode="primary">Начать</Button>
        </Div>
      </Group>
    </Panel>
  );
};

export default MainPanel;

Step 3: Styling with Flexbox​

You can add styles to the MainPanel.css file if you want to use Flexbox for more complex layouts. For example:

.panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f2f2f2;
}

Conclusion​

Using React and the VKUI library in combination with the knowledge of Flexbox, obtained from the Flexbox Froggy game, will help you create more attractive and functional interfaces for your VKontakte mini-application. VKUI simplifies development by providing ready-made components that match the VKontakte style. Don't forget to experiment with Flexbox and VKUI components in your projects to solidify your understanding. Good luck with developing and styling your VKontakte mini-application!