Ruslan Rastehaiev
Zaproponuj Ruslan pracę nad swoim kolejnym zleceniem.
Prywatna wiadomość
Zaproponuj zlecenie
Charków,
Ukraina
7 godzin 5 minut temu
gotowy do podjęcia pracy
wiek 33 lata
w Serwisie 7 lat
Ranking
Zakończonych zleceń
Średnia ocena
Poziom znajomości języków obcych
Українська: native
English: poziom wyżej niż średni
Umiejętności i kwalifikacje
Programowanie
Portfolio
-
Migracja platformy sportowej na Next.js bez utraty SEO
Programowanie stron internetowych
Brytyjska platforma B2C, która agreguje informacje o wydarzeniach sportowych na całym świecie i daje użytkownikom możliwość przejścia do zakupu biletów przez partnerów.
Projekt już istniał i miał organiczny ruch, dlatego głównym zadaniem było nie tylko "przerobić stronę", ale przenieść ją na nowoczesny stos technologiczny, zaktualizować interfejsy, zwiększyć wydajność i jednocześnie zachować strukturę SEO, która już działała.
… === MOJE ZADANIE ===
Wziąć udział w migracji istniejącej platformy na Next.js, zrealizować nową funkcjonalność frontendową, zoptymalizować wydajność kluczowych stron i pomóc zachować strukturę wyszukiwania strony podczas przejścia na nowy framework.
=== CO ZOSTAŁO ZROBIONE ===
• realizowałem nowe strony i komponenty na podstawie zaktualizowanego projektu;
• opracowałem wysoko wydajną stronę wyszukiwania wydarzeń sportowych dla stabilnej pracy podczas szczytowych obciążeń;
• odtworzyłem strukturę bloga i treści SEO na nowym stosie;
• zaprojektowałem routingu tak, aby powtarzała istniejącą hierarchię adresów URL;
=== CECHY PROJEKTU ===
Główna trudność polegała na tym, że strona już miała organiczny ruch i wypracowane pozycje w Google. Dlatego migracja na Next.js musiała być ostrożna: trzeba było nie tylko przenieść strony, ale odtworzyć strukturę URL dla bloga, wiadomości i treści SEO tak, aby wyszukiwarki poprawnie odbierały zaktualizowaną wersję strony.
W tym celu użyłem Screaming Frog, analizowałem aktualną strukturę stron i zbudowałem routing na nowym stosie bez chaotycznych zmian w linkach.
Druga ważna część — strona wyszukiwania wydarzeń sportowych. W godzinach szczytu musiała wytrzymać bardzo wysokie obciążenia (200,000+ użytkowników jednocześnie), dlatego trzeba było uważnie pracować nad wydajnością: unikać zbędnych rerenderów, nie przeciążać DOM, prawidłowo obsługiwać duże listy wydarzeń i nie pogarszać doświadczeń użytkowników.
To był nie tylko projekt UI, ale techniczna migracja istniejącej platformy, gdzie trzeba było balansować między nowym projektem, wydajnością, SEO a stabilnością działania produktu.
=== WYNIK ===
Klient otrzymał zaktualizowaną część frontendową platformy na Next.js z nowoczesnym interfejsem, poprawioną wydajnością i zachowaną logiką struktury SEO. Strona wyszukiwania wydarzeń została zoptymalizowana do pracy z dużymi wolumenami danych i wysokim obciążeniem w godzinach szczytu.
Migracja pozwoliła przenieść istniejący produkt na nowoczesny stos technologiczny bez chaotycznej utraty ważnych stron, struktury URL i logiki SEO.
=== TECHNOLOGIE ===
Next.js, TypeScript, Material UI, React Hook Form, Redux, React Query, REST API, Screaming Frog
#NextJS #React #TypeScript #FrontendDevelopment #SEO #TechnicalSEO #Migration #WebApp #SportsPlatform #HighLoad #PerformanceOptimization #ReactQuery #Redux #MaterialUI #ReactHookForm #RESTAPI #FrontendOptimization #B2CPlatform
-
Frontend-rozwoju SaaS dla branży restauracyjnej
Programowanie stron internetowych
Platforma SaaS dla branży restauracyjnej na rynku Izraela.
Produkt miał obejmować dwie części: interfejs dla klientów restauracji oraz wewnętrzny system dla personelu. Klienci mogli rezerwować stoliki, składać zamówienia i je opłacać, a menedżerowie, kelnerzy, supervisorzy i administratorzy — zarządzać restauracją, pracownikami, zamówieniami, inwentarzem i zapasami.
… Zleceniodawca przyszedł z gotowym projektem w Figma oraz wstępną oceną czasów od innych deweloperów. Moim zadaniem było całkowite zrealizowanie frontendowej części produktu od podstaw i doprowadzenie jej do działającego MVP.
=== MOJE ZADANIE ===
Opracować architekturę frontendową produktu SaaS i zrealizować pełną część kliencką aplikacji webowej na React i TypeScript: od podstawowej struktury projektu do złożonej logiki biznesowej, funkcjonalności w czasie rzeczywistym, ról użytkowników, dostępu na podstawie subskrypcji oraz responsywnych interfejsów.
=== CO ZOSTAŁO ZREALIZOWANE ===
• zaprojektowałem architekturę całej frontendowej części aplikacji;
• zrealizowałem interfejs dla klientów restauracji: rezerwacja stolika, tworzenie zamówienia, przeglądanie menu i płatności;
• zrealizowałem interfejsy dla personelu restauracji: menedżerów, kelnerów, supervisorów i administratorów;
• zrealizowałem śledzenie zamówień, inwentarza i zapasów w czasie rzeczywistym za pomocą WebSockets;
• zbudowałem logikę dostępu do funkcji w zależności od roli użytkownika i planu subskrypcyjnego;
• zrealizowałem logikę opartą na subdomenach dla restauracji, aby różne restauracje mogły działać przez własne subdomeny;
• zrealizowałem cały UI z systemem designu Ant Design i TailwindCSS;
• odpowiadałem za wydajność, dostępność, bezpieczeństwo i jakość kodu frontendowego;
• pomagałem junior-deweloperowi: delegowałem zadania, przeprowadzałem przegląd kodu i wyjaśniałem podejścia do realizacji.
=== CECHY PROJEKTU ===
Główna trudność projektu nie leżała w poszczególnych ekranach, ale w logice biznesowej produktu. Należało zrealizować architekturę multi-tenant, gdzie każda restauracja ma swoją logikę, swoje dane i własną subdomenę, ale jednocześnie cały system działa jako jedyny produkt SaaS. Osobno trudną częścią była system dostępu. W produkcie należało uwzględnić nie tylko role użytkowników — menedżer, supervisor, kelner, administrator — ale także plan subskrypcyjny restauracji. Na przykład, część funkcji mogła być dostępna tylko dla określonej subskrypcji: dodawanie pracowników, śledzenie inwentarza w czasie rzeczywistym, rozszerzona analityka i inne możliwości.
Kolejnym ważnym zadaniem była realizacja płatności w warunkach cross-domain flow. Koszyk był tworzony na subdomenie restauracji, a płatność odbywała się przez główną domenę. W tym celu należało bezpiecznie przekazywać dane między różnymi domenami, nie łamiąc scenariusza użytkownika.
Projekt miał również ograniczenia czasowe. Należało szybko określić priorytety dla MVP i nie zaniedbywać rozwiązań architektonicznych dla dalszej skalowalności projektu.
=== WYNIK ===
Klient otrzymał w pełni działające MVP platformy SaaS dla branży restauracyjnej. Część frontendowa została zrealizowana od podstaw: z responsywnymi interfejsami dla klientów i personelu, aktualizacjami zamówień w czasie rzeczywistym, systemem ról, ograniczeniami na podstawie subskrypcji, logiką opartą na subdomenach dla restauracji i złożonym scenariuszem płatności między domenami. Projekt został doprowadzony do działającego MVP w krótkim czasie, pomimo zmiany wymagań i bardziej skomplikowanej rzeczywistej logiki, niż zakładano w początkowej ocenie.
=== TECHNOLOGIE ===
React.js, TypeScript, Redux Toolkit, RTK Query, Ant Design, TailwindCSS, WebSockets, pusher.js, laravel-echo, window.postMessage()
#React #TypeScript #FrontendDevelopment #SaaS #MVP #ReduxToolkit #RTKQuery #AntDesign #TailwindCSS #WebSockets #FrontendArchitecture #MultiTenant #Subdomains #AccessControl #RestaurantSaaS #RestaurantManagement #WebApp #JavaScript
-
Niemcy | Strona dla specjalisty od urody z SEO pod zapytania z Google
Układ HTML i CSS
Strona dla specjalisty od urody w Niemczech, który pracuje w swoim gabinecie i oferuje usługi makijażu permanentnego oraz laminowania rzęs.
Na początku klient miał stronę stworzoną w kreatorze. Należało przenieść ją na czystą, ważną strukturę, rozszerzyć stronę o osobne podstrony dla każdej procedury, dodać nowe sekcje oraz przygotować stronę do organicznego promowania w Google według kluczowych usług.
… === MOJE ZADANIE ===
Przekształcić stronę z kreatora na czystą, szybką i responsywną strukturę, zachowując główny styl marki, rozszerzyć strukturę strony o osobne podstrony dla usług oraz przygotować strony do SEO-promocji w Google.
=== CO ZOSTAŁO ZROBIONE ===
• przekształciłem stronę główną z kreatora na czystą strukturę HTML/CSS/JS;
• usunąłem zbędny kod kreatora i przepisałem funkcjonalność JS interaktywnych elementów;
• zachowałem główną wizualną stylistykę strony: kolory, nastrój, prezentację marki;
• opracowałem strukturę strony: strona główna, 7 stron dla osobnych procedur, strona polityki prywatności oraz informacje prawne;
• zrealizowałem sekcje zwiększające konwersje: dla kogo jest procedura, karta procedury, przykłady prac, galeria studia, opinie oraz FAQ;
• zrealizowałem unikalne interaktywne elementy: galeria prac w stylu Instagram feed, slider w stylu Instagram Stories, sekcja FAQ w formacie czatu online;
• przygotowałem responsywną strukturę dla desktopów, tabletów i urządzeń mobilnych;
• wdrożyłem politykę cookies zgodnie z europejskimi wymaganiami;
SEO
• przeprowadziłem analizę kluczowych fraz, według których użytkownicy szukają procedur w Niemczech, w mieście Kolonia;
• wspólnie z mistrzem przygotowałem teksty dla stron usług z uwzględnieniem odpowiednich kluczowych zapytań;
• dodałem oznaczenie schema.org dla lepszego zrozumienia usług przez wyszukiwarki;
• stworzyłem i skonfigurowałem profil Google Business dla wyświetlania gabinetu mistrza w Google Maps;
• podłączyłem Google Search Console do analizy indeksacji i stanu technicznego strony;
• zoptymalizowałem szybkość ładowania stron do zielonej strefy Google PageSpeed.
=== CECHY PROJEKTU ===
W projekcie nie było gotowego projektu w Figma, dlatego trzeba było pracować na już istniejącej stronie w kreatorze. Zachowałem główną paletę kolorów i styl, ale przeniosłem stronę na czystą, kontrolowaną i znacznie lżejszą strukturę bez zbędnego kodu kreatora. Oddzielnym wyzwaniem było przekształcenie strony głównej i nie utrata aktualnych pozycji w organicznych wynikach Google. Dlatego ważne było przeniesienie struktury, treści, kluczowych stron, technicznych elementów SEO i nie złamanie indeksacji. Jeszcze jednym ważnym punktem był content dla niemieckiej grupy docelowej. Sam mistrz nie pochodzi z Niemiec, dlatego strona miała nie tylko wyglądać ładnie, ale wzbudzać zaufanie lokalnych klientów: poprzez strukturę stron, wyjaśnienia procedur, przykłady prac, opinie, strony prawne oraz poprawną prezentację usług.
=== WYNIK ===
Klient otrzymał pełnoprawną, wielostronicową stronę zamiast strony w kreatorze: z czystą, ważną strukturą, szybkim ładowaniem, responsywnością dla wszystkich głównych urządzeń oraz osobnymi stronami SEO dla kluczowych procedur. Strona została przygotowana do organicznego promowania w Google, a strony topowych procedur zaczęły pojawiać się w organicznych wynikach wyszukiwania na odpowiednie zapytania, co dało mistrzowi dodatkowy kanał pozyskiwania klientów bez płacenia za reklamę.
=== TECHNOLOGIE ===
HTML5, SCSS, JavaScript, Gulp, CDN Image Service, schema.org, Google Search Console, Google Business Profile
#struktura #responsywnaStruktura #responsiveDesign #HTML #SCSS #JavaScript #SEO #SchemaOrg #GoogleSearchConsole #GoogleBusinessProfile #PageSpeed #stronaUrody #stronaDlaMistrza #stronaUsług
-
Adaptacyjna szata graficzna strony dla firmy zajmującej się elektroniką
Układ HTML i CSS
Firma zajmująca się rozwojem urządzeń elektronicznych, dronów, systemów śledzenia oraz innych rozwiązań inżynieryjnych potrzebowała strony internetowej do prezentacji usług, procesu rozwoju oraz zrealizowanych projektów.
Firma zamyka pełny cykl tworzenia urządzeń: od pomysłu, koncepcyjnego designu, wizualizacji i projektowania mechanicznego po rozwój elektroniki, części IT, prototypowanie, design przemysłowy oraz wsparcie produkcji seryjnej.
… === MOJE ZADANIE ===
Przygotować responsywną, wielobrowarową oraz animowaną szatę graficzną według projektu Figma dla strony głównej w formacie landing page oraz strony pojedynczego przypadku firmy.
Osobnym wyzwaniem było to, że w projekcie była tylko wersja desktopowa, dlatego responsywność dla tabletów i urządzeń mobilnych musiała być przemyślana i zrealizowana samodzielnie.
=== CO ZOSTAŁO ZROBIONE ===
• Zrealizowano stronę główną w formacie landing page;
• Zrealizowano stronę pojedynczego projektu / przypadku;
• Zrealizowano responsywną szatę graficzną dla desktopu, tabletów i urządzeń mobilnych;
• Przygotowano szatę graficzną do poprawnego wyświetlania na dużych ekranach, w tym na monitorach 9K;
• Zrealizowano pojawianie się treści z animacją podczas przewijania;
• Dodano animacje dla głównych bloków strony;
• Zrealizowano zapętlone animacje dekoracyjnych elementów tła;
• Skonfigurowano slidery i galerię;
• Napisano logikę JavaScript dla interaktywnych elementów;
=== CECHY PROJEKTU ===
Głównym zadaniem było nie tylko stworzenie szaty graficznej stron, ale także sprawienie, aby strona wyglądała na żywą, technologiczną i dynamiczną.
W tym celu zrealizowano system animacji: główne elementy pojawiały się podczas przewijania, a dekoracyjne elementy tła miały zapętlony ruch. Tworzyło to efekt „żywej” strony bez przeciążania interfejsu.
Osobnym wyzwaniem była adaptacja strony do bardzo dużych ekranów, w tym monitorów 9K. Aby interfejs nie wyglądał na mały lub uszkodzony przy takich rozdzielczościach, w szacie graficznej używano względnych jednostek miary oraz proporcjonalnego skalowania elementów.
W projekcie nie było gotowego designu mobilnego, dlatego responsywne zachowanie bloków musiało być wymyślone samodzielnie, zachowując logikę, styl, animację i wizualny charakter wersji desktopowej.
=== WYNIK ===
Klient otrzymał responsywną i wielobrowarową szatę graficzną strony, która poprawnie działa na różnych urządzeniach — od ekranów mobilnych po monitory 9K.
Strona zyskała płynne pojawianie się treści, żywą animację dekoracyjnych elementów, interaktywne bloki, slidery i galerię. Szata graficzna zachowała technologiczny charakter designu i była gotowa do dalszego rozwoju.
=== TECHNOLOGIE ===
HTML5, SCSS, JavaScript, BEM, Lightgallery.js, Swiper.js, GSAP.js, Gulp
#szataGraficzna #responsywnaSzatagraf #HTML #SCSS #JavaScript #BEM #GSAP #SwiperJS #Lightgallery #Gulp #landing #animacjaStrony #inżynieria #elektronika #drony #responsywnaSzatagraf
-
Adaptacyjna szata graficzna sklepu internetowego z biżuterią na WordPress
Układ HTML i CSS
Ukraińskiemu brandowi autorskich wyrobów jubilerskich potrzebny był niestandardowy sklep internetowy do prezentacji kolekcji, poszczególnych wyrobów, galerii oraz dalszej integracji z WordPress.
=== MOJE ZADANIE ===
… Przygotować responsywny, wielobrowarowy i interaktywny layout według projektu w Figma do dalszego przekazania deweloperowi WordPress.
=== CO ZOSTAŁO ZROBIONE ===
• zaprojektowano główne strony serwisu: Strona główna, Kolekcja, Slug kolekcji, Produkt, Pojedynczy obiekt, Galeria, Strona statyczna;
• zrealizowano responsywny layout dla desktopu, tabletu i mobile;
• przygotowano layout z uwzględnieniem przyszłej integracji z WordPress;
• zrealizowano logikę front-endową dla interaktywnych elementów;
• zrealizowano slidery, animacje i interaktywne bloki;
• przygotowano niestandardową siatkę produktów;
• zrealizowano animowane banery dla stron kolekcji;
• zoptymalizowano layout, aby makieta miała zielone wskaźniki w Google Speed Test.
=== CECHY PROJEKTU ===
Główną cechą projektu jest niestandardowe podejście designerskie do sklepu internetowego. To nie był typowy szablon e-commerce, a wizualnie wyrazista strona dla autorskich biżuterii z niestandardowymi siatkami, animacjami i oddzielną logiką wyświetlania kolekcji.
Szczególnie skomplikowana była strona kolekcji. Na desktopie została zrealizowana w formacie pełnoekranowego pionowego slidery z przewijaniem i animowanym pojawianiem się elementów banera. Na mobile ta sama logika została dostosowana do innego formatu UX: poziomy slider obrazów z opisem pod nim.
Osobno opracowano layout niestandardowego koszyka i checkout.
=== WYNIK ===
Klient otrzymał responsywny działający makietę wszystkich głównych stron sklepu internetowego z gotową funkcjonalnością front-endową do dalszej integracji z WordPress.
Layout zachował niestandardową wizualną koncepcję projektu, poprawnie działał na różnych urządzeniach i był przygotowany do przekazania deweloperowi WordPress.
=== TECHNOLOGIE ===
HTML5, SCSS, JavaScript, jQuery, BEM, Animate.css, Slick.js, layout gotowy do WordPress, Gulp
#layout #responsywnyLayout #HTML #SCSS #JavaScript #jQuery #WordPress #Figma #PixelPerfect #BEM #Gulp #sklepInternetowy #eCommerce #markaJubilerska #handmadeJewelry #SlickJS
-
Wykonanie szablonu WordPress dla aplikacji mobilnej firmy
Układ HTML i CSS
Adaptacyjna szata graficzna wielostronicowej strony internetowej dla firmy zajmującej się tworzeniem aplikacji mobilnych. Firma potrzebowała strony korporacyjnej do prezentacji usług, ekspertyz, przypadków, bloga, ofert pracy oraz zbierania zgłoszeń od potencjalnych klientów.
=== MOJE ZADANIE ===
… Przygotować czystą, adaptacyjną i wielobrowersową szatę graficzną według projektu w Figma do dalszej integracji w WordPress.
=== CO ZOSTAŁO ZROBIONE ===
• zaprojektowano główne strony serwisu: Strona główna, Ekspertyza, O nas, Przypadki, Przypadek, Blog, Artykuł, Kariera, Kontakt, Polityka prywatności, 404;
• zrealizowano pixel-perfect szatę graficzną;
• przygotowano pełną adaptację dla desktopów, tabletów i urządzeń mobilnych;
• napisano logikę JS dla interaktywnych elementów;
• zrealizowano burger-menu, suwaki, popupy, akordeony;
• skonfigurowano lazy loading dla filmów YouTube z opiniami;
• zrealizowano walidację formularzy z uwzględnieniem struktury wtyczki WordPress;
• przygotowano strukturę HTML/CSS/JS do przekazania programiście WordPress;
• zoptymalizowano szatę graficzną do zielonych wskaźników w Google Speed Test.
=== CECHY PROJEKTU ===
Osobnym wyzwaniem była adaptacyjna szata graficzna banerów dla przypadków. Każdy przypadek miał różne proporcje i formaty kluczowych obrazów, dlatego nie można było zastosować jednego uniwersalnego rozwiązania. Dla każdego banera osobno opracowywano adaptacyjne zachowanie, aby obrazy poprawnie wyglądały na różnych ekranach i nie psuły kompozycji projektu.
=== WYNIK ===
Klient otrzymał czystą, ważną, adaptacyjną i zoptymalizowaną szatę graficzną, gotową do dalszej integracji w WordPress.
=== TECHNOLOGIE ===
HTML5, SCSS, JavaScript, jQuery, BEM, Slick.js, Gulp
#szataGraficzna #adaptacyjnaSzatagraficzna #HTML #SCSS #JavaScript #jQuery #WordPress #Figma #PixelPerfect #BEM #Gulp #stronaKorporacyjna #stronaDlaFirmyIT #GooglePageSpeed
Aktywność
| Ostatnie oferty 10 | Budżet | Dodana | Terminy | Oferta | |
|---|---|---|---|---|---|
|
Универсальная верстка поп-ап для любого сайта
41 PLN
|
|||||
|
Оптимизация сss/html
246 PLN
|
|||||
|
Kalkulator z wielowymiarowymi zmiennymi, strona WordPress
33 PLN
|
|||||
|
Правки с джавой, вёрсткой
16 PLN
|
|||||
|
Верстка из Figma
164 PLN
|
|||||
|
Сайт студии массажа
164 PLN
|
|||||
|
Доработать одностраничный сайт
90 PLN
|
|||||
|
Napisz scenariusz dla Tildy
29 PLN
|
|||||
|
Адаптивная верстка сайта игрового ПО
984 PLN
|
|||||
|
Версталищик Фигма найдись
205 PLN
|
