Jaki problem rozwiązywał ten projekt?

Klient hostingu nie chce pisać do supportu po to, żeby zrestartować serwer, wgrać plugin albo sprawdzić fakturę. Potrzebuje panelu, w którym kupi usługę, od razu nią zarządza i sam rozwiąże typowe problemy, a firma hostingowa potrzebuje, żeby ten panel wyglądał jak jej własny produkt.

Sklep z jedną ofertą na usługę, pakietem zasobów i kwotą widoczną przed płatnością; Serwery gier: konsola na żywo, pliki, SFTP, kopie przyrostowe, mody i wersje z panelu; VPS-y z wyborem systemu, kluczy SSH i lokalizacji, a obok strony, domeny i poczta; Wykresy usług co sekundę, z percentylami i zdarzeniami na osi; Portfel, odnowienia, faktury w PDF, polecenia i zrzutka graczy na serwer; Zgłoszenia, czat i baza wiedzy, a na koncie 2FA, klucze passkey i lista sesji.

Ile kosztuje projekt taki jak Panel klienta Flaem?

Każdy projekt wyceniamy indywidualnie, bo dwa projekty o tej samej nazwie potrafią różnić się zakresem kilkukrotnie. Przy ogólnym zarysie podajemy widełki, a wycena jest bezpłatna.

Jak długo trwa taki projekt?

Zależy od zakresu. Termin podajemy w wycenie razem z etapami, a każdy etap odbierasz na wersji testowej, zanim trafi do ludzi.

Czy zobaczę projekt, zanim powstanie kod?

Tak. Makietę pokazujemy na naszym serwerze i poprawiasz ją, zanim powstanie kod, więc zmiany na tym etapie są szybkie.

Twój. Po odbiorze i opłaceniu całości przechodzą na Ciebie autorskie prawa majątkowe do kodu i materiałów stworzonych dla Ciebie.

Panele i dashboardy

Panel klienta Flaem

Q: Na czym zbudowany jest Panel klienta Flaem?

Typ: Panel klienta hostingu; Frontend: React 19, TypeScript, Tailwind 4; API: Rust; Aplikacja: PWA z powiadomieniami push; Marka: Operatora albo resellera.

Panel, w którym klient firmy hostingowej kupuje i sam prowadzi swoje usługi: serwery gier z konsolą na żywo, plikami i kopiami, VPS-y, strony, domeny i pocztę. Portfel, faktury, polecenia, zgłoszenia i ustawienia bezpieczeństwa są w tym samym miejscu, a wykresy pokazują zużycie co sekundę. Panel nosi markę operatora albo resellera, pod której domeną klient wszedł.

TypPanel klienta hostingu

FrontendReact 19, TypeScript, Tailwind 4

APIRust

AplikacjaPWA z powiadomieniami push

MarkaOperatora albo resellera

Wprowadzenie

To ta część Flaem, którą widzą klienci firmy hostingowej: miejsce, w którym kupują serwer gry, VPS, stronę, domenę albo pocztę i od razu nimi zarządzają. Klient nie musi wiedzieć, że pod spodem jest Flaem. Widzi markę operatora albo resellera, od którego kupił, z jej logo, kolorami i domeną.

Panel projektowaliśmy pod ludzi, którzy nie są administratorami. Właściciel serwera Minecraft nie chce czytać logów, chce wiedzieć, dlaczego serwer padł i jak to naprawić. Dlatego każda rzecz, która zwykle wymaga zgłoszenia do supportu, ma tu swój przycisk, a zgłoszenie zostaje na sprawy, których naprawdę nie da się załatwić samemu.

Zakup, który kończy się działającą usługą

Sklep pokazuje jedną ofertę na rodzaj usługi, na przykład serwery Minecraft, z pakietami zasobów, a silnik, wersję gry i dodatki klient wybiera w koszyku. Kwotę do zapłaty widzi przed płatnością, rozbitą na pakiet, promocję, kod rabatowy, opłatę instalacyjną i dodatki, i jest to ta sama kwota, która stanie na fakturze. VPS konfiguruje w jednym kroku: pakiet, system, klucz SSH albo hasło, nazwa hosta, lokalizacja i dodatki, z podsumowaniem zamówienia obok.

Po płatności usługa startuje sama i od razu pojawia się w panelu. Nie ma maila z danymi do przepisania ani czekania, aż ktoś z zespołu kliknie "uruchom".

Serwer gry bez pisania do supportu

Serwer gry ma w panelu konsolę na żywo, menedżer plików z edytorem, dostęp przez SFTP do większych porcji danych, kopie przyrostowe i harmonogram restartów, który najpierw odlicza na czacie gry, żeby gracze zdążyli zapisać postęp. Mody i modpacki klient instaluje z katalogów, wersję gry i Javy wybiera z listy, a ustawienia startowe widzi jako formularz z opisami zamiast surowych zmiennych. Na Minecrafcie zasady świata ustawia przełącznikami, a graczy z telefonów i konsol wpuszcza jednym przełącznikiem.

Gdy serwer padnie, właściciel dostaje zdanie po ludzku w swoim języku, artykuł pomocy i przycisk naprawy, na przykład zmianę wersji Javy albo akceptację EULA. Gdy brakuje mu zasobów, widzi propozycję większego pakietu z dopłatą liczoną co do sekundy, która została do końca okresu.

proration.rs · rust

pub fn prorate(full_term_difference: i64, remaining_seconds: i64, term_seconds: i64) -> i64 {
    if term_seconds <= 0 || remaining_seconds <= 0 {
        return 0;
    }
    let numerator = i128::from(full_term_difference) * i128::from(remaining_seconds);
    let denominator = i128::from(term_seconds);
    let half = denominator / 2;
    let rounded = if numerator >= 0 {
        (numerator + half) / denominator
    } else {
        (numerator - half) / denominator
    };
    i64::try_from(rounded).unwrap_or(if rounded > 0 { i64::MAX } else { i64::MIN })
}

Dopłata to różnica ceny za cały okres pomnożona przez ułamek sekund, które jeszcze zostały. Mnożenie idzie na liczbach 128-bitowych, więc nie przepełni się przy długim okresie, a zaokrąglenie do najbliższego grosza działa tak samo w obie strony: przejście na większy i na mniejszy pakiet liczy się symetrycznie.

Wykresy co sekundę, ze szczytami

Każda usługa jest mierzona co sekundę, a w każdym okresie panel trzyma średnią, minimum, maksimum i percentyle, więc krótki skok nie znika w uśrednieniu. Klient widzi procesor, pamięć, dysk i sieć swojego serwera, przełącza się między widokiem na żywo a ostatnimi dniami i ma na osi znaczniki zdarzeń: restart, aktualizację, kopię zapasową, alert. Alert o przekroczonym progu przychodzi na kanały, które klient wybrał w preferencjach: do panelu, e-mailem, SMS-em, pushem, na Telegram albo Discord.

Pieniądze klienta w jednym portfelu

Klient wpłaca na portfel w dowolnym momencie, BLIK-iem bez wychodzenia z panelu, kartą albo przelewem, a każda usługa pobiera opłatę w swoim dniu odnowienia, jeśli klient włączył odnowienie z salda. Na portfel wracają zwroty, rekompensaty i nagrody z poleceń, a każdy ruch ma swój dokument. Faktury i korekty klient pobiera jako PDF. Przed terminem dostaje przypomnienie, a bez wpłaty usługa jest zawieszana, nie kasowana, i wraca sama po opłaceniu.

Gracze mogą składać się na serwer we wspólnej zrzutce. Gdy zebrana kwota nie pokryje kolejnego okresu, osoby, które się dorzuciły, dostają ostrzeżenie przed terminem, a nie po nim. Program poleceń daje klientowi kod, link i kod QR, a nagrody trafiają na saldo portfela.

Pomoc i konto pod kontrolą

Zanim klient wyśle zgłoszenie, panel podpowiada artykuły pasujące do tego, co pisze. Zgłoszenia i czat na żywo są w tym samym miejscu, a baza wiedzy działa w pięciu językach panelu. Personel, który odpisuje, widzi obok rozmowy usługi i faktury klienta, więc nie dopytuje o rzeczy, które system już zna.

Na koncie klient ma weryfikację dwuetapową, klucze passkey, kody odzyskiwania, listę aktywnych sesji z wylogowaniem wszędzie, historię logowań, klucze API, dane do faktury i eksport swoich danych. Panel działa też jako aplikacja na telefonie, z nazwą i ikoną marki oraz powiadomieniami push.

Jaki jest finalny efekt?

Klient kupuje usługę i od razu ją prowadzi: restartuje, instaluje mody, przywraca kopię, zmienia pakiet, płaci i pobiera fakturę, a w razie awarii wie, co się stało i co kliknąć. Do supportu pisze wtedy, kiedy naprawdę potrzebuje człowieka, a zgłoszenie od razu ma obok jego usługi i faktury.

Firma hostingowa dostaje panel, który wygląda jak jej własny produkt, w jej barwach i pod jej domeną, i który zdejmuje z zespołu powtarzalne pytania. Każda liczba, którą klient widzi, od salda po wykres, pochodzi z tego samego systemu, który rozlicza usługę i nią steruje.