Stage 1: Design, interactive prototype, and database architecture design

Cost: 12,000 UAH
Estimated time: 7 days
Result: ready design of main screens, clickable prototype, and database/project structure scheme to avoid reworking logic during development.

What is included in the stage
Analysis of the current specifications and mockups

At the start, I go through all screens, game logic, payments, Gifts, MegaBoom, profile, market, and admin panel.
I fix which screens are needed in the first version, which states need to be laid out immediately, and which modules will be connected in the following stages.

Design of main screens of Mini App

Within the first stage, the design of the main user screens is prepared:

main PvP screen without active game;
main PvP screen during active game;
screen for purchasing cards in packs;
Add Gift screen;
TON / Stars top-up screen;
user profile;
Market / Gifts;
MegaBoom;
How to Play;
basic popup/modal states.

So at this stage, it’s not just about "drawing the main screen," but assembling a complete visual foundation for the Mini App.

Interactive prototype

After the design, a clickable logic of transitions is created:

from the main screen to top-up;
from the main screen to card purchase;
from the main screen to Add Gift;
from the main screen to Profile;
from the main screen to Market;
from the main screen to MegaBoom;
from the main screen to How to Play;
basic transitions between game states.

This is necessary to make it clear before coding how the user actually navigates through the app.

Designing the database structure

At this stage, the database structure for the main entities is also designed:

users;
balances;
transactions;
matches;
match_players;
cards;
game_actions;
gifts;
market_listings;
megaboom;
referrals;
settings/admin_config.

This is not a complete backend implementation, but rather a schema to ensure that stages 2-6 do not conflict with each other.

Designing the main architecture of backend/frontend

It is fixed how the project will be built:

frontend Telegram Mini App;
backend API;
WebSocket server;
database;
payment handlers;
game engine;
admin panel;
market module.

It is also determined which parts of the logic will be on the server and which will only be displayed on the frontend. For the game, this is important because the match result, deck, random, winner, and payouts must be calculated on the backend.

Description of main user flows

In the first stage, the main scenarios need to be fixed:

the user enters the Mini App;
tops up the balance;
buys cards;
adds Gift;
joins a game;
waits for a match;
plays a turn;
loses or wins;
receives the result;
views history;
opens Market;
watches MegaBoom;
enters the profile.

This will help avoid chaos during the development stage.

Preparation of UI-kit / styles

To speed up the layout process later, a basic visual set is prepared in the first stage:

colors;
fonts;
buttons;
cards;
modals;
inputs;
button states;
icons;
styles for cards;
styles for player slots.

This is not a separate "design for the sake of design," but a base for quick layout in stage 4.

How many screens/states are included in the first stage

Approximately, the first stage includes 12-15 screens/states:

Main PvP screen - no active game.
Main PvP screen - active game.
Matchmaking / waiting for players.
Purchasing cards in packs.
Confirming card purchase.
Add Gift.
Empty state Gifts.
Top-up TON / Stars.
Profile.
Transaction history / history block.
Market / Gifts.
MegaBoom.
How to Play.
Win/result screen basic state.
Basic error/empty states.

The 1st screen is the main one when there are no people; the 2nd is also the main one when a person tops up TON; the 3rd is when they add gifts; the 4th changes the language; the 5th is three dots.

The 6th is how to play; the 7th is the most important when a person tops up TON or gifts, their cards automatically appear, which is also a separate screen.

The 8th screen is when the game is already in progress, and the person sees this game but sees the history of the cards that come out.

Tournaments now have the main screen to participate in my matches. Well, match history. You might also think of how to optimize all this; maybe there will be more screens here.

Market screen for gifts to buy; the second tab is my gifts. And here, in principle, there could be a tab to withdraw gifts, or better yet, maybe even create an icon where the gift is to withdraw, that is, such an icon. Well, and the profile. In principle, as many screens as we sent you, which are included in it.



The main thing is the cards - to make it comfortable for people to play.

And details, that is, how many cards people have, the deck size.

7 cards

Make the queue mode so that the line that is playing lights up.

Logo to be made more qualitatively.

That is, everything should be done qualitatively.


Approximately the same number of screens, but there may be more if something is forgotten.