Budżet: 10000 USD Termin: 1 dzień
Witaj. Mam duże doświadczenie z Next.js/Node.js. Jestem gotowy do współpracy.
Obowiązki
Prowadzenie projektowania architektury i wysokiej jakości wdrażania podstawowych projektów front-end, zapewniając wydajność, stabilność i łatwość konserwacji.
Dokładne odwzorowanie projektów Figma do pikseli, dostarczając wyjątkowe interakcje i szczegóły wizualne.
Projektowanie i wdrażanie skalowalnego komponentu UI oraz modułowego systemu rozwoju w celu poprawy wydajności i ponownego wykorzystania kodu.
Rozwój i optymalizacja funkcji związanych z Web3, zapewniając bezpieczne i stabilne interakcje z blockchainem.
Tworzenie interaktywnych, wysokowydajnych wykresów i wizualizacji danych za pomocą Canvas.
Ścisła współpraca z menedżerami produktu, projektantami i inżynierami back-end w celu dostarczenia projektów od koncepcji do uruchomienia.
Wymagania
Znajomość Next.js lub Nuxt.js, z praktycznym doświadczeniem w dużych projektach.
Znajomość Web3.js, Ethers.js lub podobnych frameworków, z doświadczeniem w rozwoju front-end DApp lub blockchain.
Silna wiedza w zakresie komponentyzacji UI i modułowego rozwoju, z doświadczeniem w projektowaniu architektury front-end.
Umiejętność pracy z Tailwind CSS z solidnym zrozumieniem modułowych i łatwych do konserwacji praktyk stylizacji.
Mistrzostwo w CSS i technikach układu, zdolność do osiągania wdrożenia idealnie dopasowanego do projektów Figma.
Znajomość rozwoju Canvas, zdolność do samodzielnego budowania wysokowydajnych interaktywnych wykresów i wizualizacji danych.
Silna świadomość jakości kodu, umiejętności optymalizacji wydajności oraz doświadczenie w adaptacji międzyplatformowej.
Miłe do posiadania
Wkład w projekty open-source lub blogi techniczne.
Znajomość Three.js, WebGL lub innych zaawansowanych technologii wizualizacji.
Doświadczenie w skomplikowanych wykresach, pulpitach danych lub projektach front-end finansowych.
Architektura UI Frontend
Struktura folderów komponentów
Umieść podstawowe komponenty UI, takie jak Przycisk, Pole tekstowe, Wybór i Rozwijane menu w dedykowanym katalogu ui/. Reprezentują one najbardziej fundamentalne elementy wizualne aplikacji. Komponenty specyficzne dla biznesu lub złożone powinny być umieszczone w katalogu components/. Te wyższe komponenty są budowane poprzez łączenie podstawowych elementów UI z folderu ui/ i mogą zawierać dodatkowe style, zachowania lub logikę biznesową. To rozdzielenie wyraźnie odróżnia wielokrotnego użytku prymitywy UI od implementacji specyficznych dla funkcji, poprawiając organizację kodu i łatwość konserwacji.
Metodologia Atomic Design
Przyjmij metodologię Atomic Design, aby strukturyzować interfejs użytkownika w hierarchiczny i skalowalny sposób. Dzieli ona UI na pięć poziomów szczegółowości:
Atom to najmniejszy element budulcowy — podstawowe elementy HTML lub prymitywne komponenty, takie jak Przycisk, Pole tekstowe lub Ikona.
Cząsteczki powstają poprzez łączenie wielu atomów w funkcjonalną jednostkę, na przykład, Pasek wyszukiwania składający się z Pola tekstowego i Przyciski.
Organizmy to bardziej złożone sekcje UI składające się z cząsteczek i/lub atomów, takie jak Nagłówek, Pasek boczny lub Karta użytkownika.
Szablony definiują układy na poziomie strony, określając strukturę i rozmieszczenie komponentów.
Strony to konkretne instancje szablonów wypełnione rzeczywistymi danymi, reprezentujące rzeczywiste widoki użytkowników.
W tym projekcie katalog ui/ odpowiada poziomowi Atomów, podczas gdy katalog components/ zazwyczaj reprezentuje Cząsteczki lub Organizmy.
System projektowania i biblioteka komponentów
Katalog ui/ służy jako wewnętrzny, prywatny system projektowania lub biblioteka komponentów projektu. Zapewnia spójną podstawę dla całego rozwoju UI w aplikacji. Standaryzując podstawowe elementy, zapewnia spójność wizualną, redukuje duplikację i przyspiesza rozwój. Wszystkie wyższe komponenty są budowane na tej wspólnej bibliotece, promując ponowne wykorzystanie i długoterminową skalowalność.
Komponenty prezentacyjne a komponenty kontenerowe
Zastosuj rozdzielenie między komponentami prezentacyjnymi a kontenerowymi, aby utrzymać czystą architekturę.
Komponenty prezentacyjne są odpowiedzialne tylko za renderowanie UI i stosowanie stylów. Otrzymują dane przez props i mają mało lub wcale nie mają logiki wewnętrznej. Komponenty w katalogu ui/ należą do tej kategorii.
Komponenty kontenerowe zajmują się pobieraniem danych, zarządzaniem stanem i logiką biznesową. Łączą komponenty prezentacyjne, aby stworzyć funkcjonalne, bogate w funkcje części aplikacji. To rozdzielenie obowiązków zapewnia, że UI i logika są od siebie oddzielone, co ułatwia testowanie, ponowne wykorzystanie i konserwację komponentów.
Wzorzec komponentów inteligentnych i głupich
Ten wzorzec ściśle odpowiada powyższemu konceptowi.
Inteligentne komponenty zarządzają stanem, interagują z API lub globalnymi magazynami (np. Redux) i używają Hooków React do obsługi logiki. Zazwyczaj są związane z danymi i zachowaniem.
Głupie komponenty są bezstanowe, czysto wizualne elementy, które renderują się wyłącznie na podstawie props. Są wielokrotnego użytku w różnych kontekstach i upraszczają testowanie oraz debugowanie.
Hooki i separacja UI
Używaj niestandardowych Hooków React (np. useForm, usePagination, useAuth), aby enkapsulować logikę biznesową, stan i efekty uboczne. Utrzymuj warstwę UI skoncentrowaną wyłącznie na prezentacji. Takie podejście pozwala programistom ponownie wykorzystywać logikę w różnych komponentach, jednocześnie utrzymując warstwę widoku prostą i przewidywalną.
Rozwój oparty na Storybook
Używaj Storybook do rozwijania, testowania i dokumentowania komponentów UI w izolacji. Napisz historie dla każdego komponentu, aby pokazać różne stany, props i wariacje. To umożliwia programistom front-end budowanie i debugowanie komponentów niezależnie od całej aplikacji. Korzyści obejmują szybszą iterację, lepszą współpracę z projektantami, poprawioną dokumentację i wsparcie dla testów wizualnych.
Rozwój oparty na komponentach (CDD)
Postępuj zgodnie z procesem opartym na komponentach, budując hierarchię UI od dołu do góry. Zacznij od atomów, łącz je w cząsteczki, składaj organizmy, a na końcu konstruuj szablony i strony. Ta metoda zapewnia spójność, redukuje prace do wykonania i dostosowuje rozwój do systemów projektowania, szczególnie podczas pracy z Figma lub podobnymi narzędziami.
Wzorzec Tailwind CSS i Headless UI
Wykorzystaj biblioteki komponentów bez stylów, oparte wyłącznie na logice, takie jak Headless UI lub Radix UI do interaktywnych elementów, takich jak rozwijane menu, modale i zakładki. Stosuj stylizację za pomocą Tailwind CSS, aby zachować pełną kontrolę nad projektem bez pisania niestandardowego CSS. Ten wzorzec całkowicie oddziela logikę interakcji od wizualnej prezentacji, umożliwiając szybki, elastyczny i spójny rozwój UI przy jednoczesnym zachowaniu dostępności i nawigacji za pomocą klawiatury.
Podsumowanie
Przyjmij modułową, skalowalną architekturę front-end opartą na następujących zasadach:
- Używaj Atomic Design do strukturyzacji komponentów UI według poziomu złożoności.
- Utrzymuj prywatną bibliotekę komponentów w katalogu ui/ dla elementów podstawowych.
- Rozdziel komponenty prezentacyjne i kontenerowe, aby wymusić czystą architekturę.
- Zastosuj wzorzec komponentów inteligentnych i głupich dla lepszego zarządzania logiką i UI.
- Enkapsuluj logikę za pomocą Hooków React.
- Rozwijaj komponenty UI w izolacji za pomocą Storybook.
- Postępuj zgodnie z procesem Rozwoju Opartego na Komponentach (CDD).
- Łącz biblioteki Headless UI z Tailwind CSS dla elastycznej, łatwej do konserwacji stylizacji.
- Opcjonalnie, użyj konfiguracji Monorepo, aby dzielić komponenty między wieloma projektami.
To podejście promuje ponowne wykorzystanie, spójność i długoterminową łatwość konserwacji, co czyni je idealnym dla aplikacji średniej i dużej skali.
Budżet: 10000 USD Termin: 1 dzień
Witaj. Mam duże doświadczenie z Next.js/Node.js. Jestem gotowy do współpracy.
Budżet: 1200 USD Termin: 5 dni
# Propozycja - Senior Frontend Developer (Web3 & Canvas)
**Cześć!**
Jestem Denys Hritsanov, senior fullstack developer z 15-letnim doświadczeniem i rolą Head of AI Transformation w Deloitte. Specjalizuję się w advanced frontend architecture i Web3 applications.
## Perfect Match dla Waszych Wymagań
**Next.js & Architektura Expertise:**
- **Enterprise-level Next.js** projects z advanced performance optimization
- **Atomic Design implementation** - dokładnie zgodnie z Waszą architekturą UI
- **Component-driven development** z Storybook i modular systems
- **Perfect Figma-to-code** accuracy - pixel-perfect implementations
**Web3 & Blockchain Development:**
- **DApp frontend development** z Web3.js i Ethers.js
- **Blockchain interactions** - secure i stable integrations
- **Crypto trading platforms** experience z real-time data
- **Smart contract integration** dla complex business logic
**Canvas & Data Visualization:**
- **High-performance interactive charts** z Canvas API
- **Financial dashboards** z real-time data visualization
- **Three.js expertise** dla advanced 3D visualizations
- **WebGL implementations** dla complex graphics
## Technical Stack Alignment
**Perfect Architecture Match:**
- **Tailwind CSS mastery** z Headless UI components
- **Atomic Design methodology** - ui/ i components/ structure
- **Smart/Dumb components** separation
- **Custom React Hooks** dla business logic encapsulation
- **Performance optimization** - Core Web Vitals expertise
**Advanced Capabilities:**
- **Monorepo setup** dla shared component libraries
- **Component testing** z Jest i React Testing Library
- **TypeScript expertise** dla type-safe development
- **CI/CD pipelines** dla automated testing i deployment
## Proven Experience
**Web3 Projects:**
- **DeFi platforms** z complex trading interfaces
- **NFT marketplaces** z blockchain integrations
- **Crypto analytics dashboards** z real-time charts
**Enterprise Frontend:**
- **Scalable component systems** dla large applications
- **Performance optimization** dla high-traffic applications
- **Cross-platform compatibility** i accessibility compliance
## Additional Value
**Open Source Contributions:** Active contributor to React i Web3 communities
**Technical Writing:** Experience z documentation i technical blogs
**Team Leadership:** Experience managing frontend teams i architectural decisions
**Gotowy dostarczyć pixel-perfect, high-performance Web3 frontend zgodnie z Waszą advanced architecture.**
Mogę zacząć
Budżet: 1200 USD Termin: 22 dni
Cześć!
Zobaczyłem twój projekt i jest dla mnie interesujący. Mam doświadczenie zarówno w outsourcingu, jak i w rozwoju produktów, i świetnie pracuję w zespole.
🔥 Moje kluczowe umiejętności:
✅ Rozwój SPA i aplikacji internetowych
✅ Optymalizacja wydajności
✅ Zarządzanie i wsparcie projektów
✅ Jakościowy i czysty kod
💻 Technologie: HTML, CSS, JavaScript, React, Vue, Git
Jeśli zależy ci na jakościowym i niezawodnym rozwiązaniu – jestem gotów omówić szczegóły. Można się skontaktować tutaj lub w dogodnym dla ciebie formacie.
Budżet: 3290 USD Termin: 29 dni
Dzień dobry!
Nazywam się Walenty, i reprezentuję Arctic Web Agency. Jesteśmy zespołem doświadczonych programistów, którzy specjalizują się w tworzeniu nowoczesnych i efektywnych rozwiązań internetowych dla biznesu. W wiadomościach prywatnych mogę przesłać przykłady naszych podobnych prac. Jesteśmy gotowi podjąć się realizacji Twojego projektu!
Z poważaniem
Zespół Arctic Web
Freelancehunt
Budżet: 1500 USD Termin: 30 dni
Cześć!
Zainteresował mnie Twój projekt — mam odpowiednie doświadczenie i jestem gotów podjąć się realizacji. Pracuję szybko, odpowiedzialnie i z uwagą na szczegóły.
🔹 Krótko o mnie: mam ponad 3 lata doświadczenia w programowaniu.
Mam doświadczenie w .NET Core, C#, ASP.NET MVC, Web API, JavaScript/CSS/HTML, React.js, Next.js, MS SQL, Git.
🔹 Gotowy: zacząć od razu, ustalić termin i budżet, wprowadzić poprawki w razie potrzeby.
Budżet: 1500 USD Termin: 30 dni
Cześć!
Zainteresował mnie Twój projekt — mam odpowiednie doświadczenie i jestem gotowa podjąć się realizacji. Pracuję szybko, odpowiedzialnie i z uwagą na szczegóły.
🔹 Krótko o mnie: mam ponad 3 lata doświadczenia w programowaniu.
Mam doświadczenie w .NET Core, C#, ASP.NET MVC, Web API, JavaScript/CSS/HTML, React.js, Next.js, MS SQL, Git.
🔹 Jestem gotowa: zacząć od razu, ustalić termin i budżet, wprowadzić poprawki w razie potrzeby.
Budżet: 1201 USD Termin: 30 dni
Dzień dobry!
Cieszę się, że mogę pomóc.
Mam duże doświadczenie w rozwoju stron internetowych i aplikacji mobilnych.
Budżet: 1200 USD Termin: 14 dni
Cześć!
Nazywam się Aleksiej, reprezentuję grupę deweloperów – NC-1.
W naszej drużynie jest specjalista (full stack, senior) z niezbędnym doświadczeniem i wiedzą dla Ciebie. Stawka za godzinę – 23 usd
Stos technologiczny: PHP, Symfony, Laravel, Yii2, Codeigniter. MySQL, OOP. LAMP stack, Javascript, testowanie jednostkowe, oAuth, Docker, HTML, CSS, TailWind CSS, Javasscript, Vue.js/Nuxt.js, React.js/Next.js. Rozwój API. GIT
Przykłady - https://1drv.ms/b/c/b7a0d31a9dae1bc5/EeH6JPdpBbpKtrkA1zFQOIMBAmqUcd_Ptx5tt5p9hBNG-g?e=wXDGHh
Portfolio – https://nc-one.com/case-studies
Z poważaniem, Aleksiej M.
Budżet: 1200 USD Termin: 30 dni
My w The Dev Company z radością składamy naszą aplikację na stanowisko Architekta Frontend/UI. Nasz zespół ma bogate doświadczenie w projektowaniu i wdrażaniu skalowalnych, wysokowydajnych architektur front-end dla złożonych aplikacji Web3, w tym pulpitów opartych na blockchainie, DApps i interaktywnych platform wizualizacji danych.
Specjalizujemy się w:
– Next.js / React z naciskiem na skalowalną architekturę komponentów przy użyciu Atomic Design, CDD i rozdzielenia komponentów prezentacyjnych i kontenerowych.
– Wdrożeniach Figma w perfekcyjnym pikselu z mistrzostwem w Tailwind CSS i praktykach stylizacji modułowej.
– Integracjach Web3 za pomocą Ethers.js i Web3.js, w tym bezpiecznych połączeniach portfela, interakcjach z blockchainem i śledzeniu transakcji.
– Wizualizacjach opartych na Canvas do budowania interaktywnych, wysokowydajnych wykresów i pulpitów analitycznych, w tym interfejsów użytkownika na poziomie finansowym.
– Wzorcach Headless UI (Radix UI, Headless UI) połączonych z Tailwind CSS dla elastyczności i łatwości utrzymania.
– Rozwoju napędzanego Storybookiem do budowy izolowanych komponentów, dokumentacji i testów wizualnych.
Relewantne Doświadczenie
Dostarczaliśmy projekty dla platformy DeFi, zbudowaliśmy pełny frontend dla projektu gry NFT Web-3 oraz narzędzi analitycznych — zawsze kładąc nacisk na wydajność, modułowość i bezpieczeństwo. Obejmuje to budowanie wielokrotnego użytku systemów UI, optymalizację renderowania dla dużych zbiorów danych oraz zapewnienie płynnej integracji z inteligentnymi kontraktami i interfejsami API blockchain.
Nasze Podejście
– Architektura UI — Atomic Design + prywatna biblioteka UI w ui/ dla elementów podstawowych.
– Rozwój napędzany komponentami — Budowanie od atomów do stron z przepływami pracy Storybook.
– Wydajność — Podział kodu, leniwe ładowanie, memoizacja i optymalizacja Canvas.
– Bezpieczeństwo — Bezpieczne zarządzanie interakcjami z blockchainem, walidacje transakcji i ograniczenia prędkości.
– Współpraca — Ścisła współpraca z zespołami projektowymi w celu zapewnienia bezbłędnej reprodukcji specyfikacji Figma.
Wierzymy, że nasza kombinacja wiedzy technicznej, doświadczenia w Web3 i najlepszych praktyk architektury UI idealnie odpowiada Twoim wymaganiom, i jesteśmy pewni naszej zdolności do dostarczenia wysokiej jakości, skalowalnego i łatwego w utrzymaniu frontendu dla Twojej platformy.
Chętnie omówimy Twój projekt w większych szczegółach.
Z poważaniem,
The Dev Company
Budżet: 1200 USD Termin: 30 dni
Cześć Dhe,
Z radością składam moją propozycję na stanowisko Starszego Inżyniera Front-End w [Nazwa Firmy]. Posiadając bogate doświadczenie w Next.js/Nuxt.js, Web3.js/Ethers.js oraz w rozwoju wydajnych interfejsów użytkownika, jestem pewny swojej zdolności do prowadzenia architektury front-end, wdrażania projektów w idealnej jakości oraz optymalizacji interakcji z blockchainem dla Twoich projektów.
Proszę o wiadomość prywatną, jeśli uważasz, że pasuję do tej roli
To niedopracowana wtyczka do After Effects: https://drive.google.com/drive/u/0/folders/1Nq9a672OK6ep9Com1lqelUhZxbx3_3f1 to, jeśli dobrze rozumiem, wtyczka CEP (Adobe Extension) do After Effects. To panel HTML/JavaScript przez Adobe CSXS, który współdziała z After Effects przez ExtendScript. Celem było zautomatyzowanie procesu tworzenia wideo w stylu "maze challenge", odniesienie na YouTube GOALRUSH-f8x lub analog. Wideo ręcznego montażu: https://drive.google.com/file/d/1Ylzvax6w2JGDwaBqeCdbD49jh5wB5buY/view?usp=sharing Plik jednego z projektów: https://drive.google.com/file/d/15vKd1L9VfHtDqK2wtLQdYEmDpH1d8Jvy/view?usp=sharing Oprócz "bugowatości" systemu przez vibe coding (dlatego vibe coderzy odpadają), nie odpowiadały takie szczegóły (rzeczywiste poprawki): https://docs.google.com/spreadsheets/d/18Svc6GoQ34PgLe1HY7gNX5tPLH0Cpv9E4mfjCRBCMFU/edit?gid=0#gid=0 Trzeba stworzyć system, który będzie generował projekty w After Effects ze wszystkimi niezbędnymi komponentami wideo, które są opisane w Baza.pdf, bardziej szczegółowa logika w formie zdjęć, dokumentu tekstowego oraz mapy myśli dla zrozumienia wszystkich możliwych wariacji na dysku: https://drive.google.com/drive/folders/1Uf4Pnw3SKmwpmhL7sjPZFnfAbN0arUjr?usp=sharing Jeszcze bardziej szczegółowo (z bardziej rozwiniętą częścią opisową oraz linkami do timestampów w referencjach) tzw. będzie formułowane w roboczej przestrzeni projektu Końcowy rezultat to system, który tworzy wideo: od 40 sekund do 1 minuty, całkowicie unikalna treść przy każdym tworzeniu, bez metadanych AI w pliku wideo, w nim powinien być zrozumiały fabuła (pułapki, ślepe zaułki, różne emocje postaci-celebrytów w wyniku jakichś zwrotów akcji w wideo), dźwięk projektowy pod fabułę (krzyki i inne emocje, wybuchy itd.), stylistycznie nie różniące się od wideo referencyjnego z kanału
Istnieje działająca strona produkcyjna z katalogiem produktów, kartami modeli i stronami informacyjnymi. Stos technologiczny frontend: — Next.js; — React; — TypeScript; — istniejący system komponentów; — środowiska staging i produkcyjne. Jest zatwierdzony kierunek wizualny i projekt nowej strony głównej. Należy go wdrożyć w istniejącym projekcie, dostosować do desktop/tablet/mobile i doprowadzić wszystkie główne typy stron do jednolitej, zaktualizowanej stylistyki. Pełny redesign produktu i zmiana logiki biznesowej nie są wymagane. OBOWIĄZKOWY ZAKRES 1. Nowa strona główna — zrealizować stronę główną według dostarczonego projektu; — zachować istniejącą funkcjonalność, linki i routingu; — poprawnie podłączyć zatwierdzone sekcje i CTA; — wykorzystać istniejące dane i API; — przewidzieć poprawne wyświetlanie dynamicznej treści. Główne typy sekcji: — nagłówek/nawigacja; — hero; — bloki informacyjne; — karty modeli/ofert; — bloki analityczne lub market insight; — sekcje CTA; — stopka. Dokładny skład sekcji zostanie dostarczony wybranemu wykonawcy wraz z makietą. 2. Responsywność Należy zrealizować: — desktop; — tablet; — mobile; — pośrednie rozdzielczości; — poprawne zachowanie siatek, kart, menu, przycisków i typografii; — brak poziomego scrolla i konfliktów wizualnych. 3. Typografia i ogólne style — wdrożyć nowe zatwierdzone czcionki; — doprowadzić rozmiary, wagi, line-height i odstępy do jednolitego systemu; — zaktualizować style przycisków, kart, pól, badge'ów i nagłówków; — w miarę możliwości wykorzystać wspólne design tokens lub zmienne CSS; — nie dublować stylów osobno dla każdej strony bez potrzeby. 4. Ujednolicenie istniejących stron Sprawdzić i doprowadzić do nowej stylistyki główne typy stron: — katalog; — karta modelu / PDP; — strony informacyjne; — nagłówek; — stopka; — formularze; — okna modalne; — istniejące CTA; — stany loading / empty / error, jeśli już występują w projekcie. Chodzi o wizualne ujednolicenie istniejących komponentów, a nie o pełny indywidualny redesign każdej strony. 5. Katalog Sprawdzić: — siatkę kart; — obrazy; — nazwę, referencję i cenę; — filtry i sortowania; — przyciski i linki; — wyświetlanie desktop/mobile; — stany loading i empty; — brak wizualnych przesunięć podczas ładowania. 6. PDP Sprawdzić: — galerię; — główny blok informacyjny; — cenę i CTA; — sekcje analityczne; — tabele i metryki; — About Watch; — układ desktop/mobile; — długie nazwy, referencje i brakujące dane. Należy zachować obecną funkcjonalność i istniejące kontrakty API. 7. Nagłówek i Stopka — jednolita stylistyka na wszystkich stronach; — responsywna nawigacja; — mobilne menu; — poprawne stany active/hover/focus; — brak rozbieżności między stroną główną, katalogiem i PDP. 8. Stany interfejsu Dla dynamicznych bloków sprawdzić: — loading; — puste dane; — błąd API; — niewystarczające dane; — brakujący obraz; — brakująca cena; — długi tekst; — mobilne wyświetlenie. Nie jest wymagane opracowywanie nowej skomplikowanej logiki biznesowej. Należy poprawnie wizualizować już istniejące stany. 9. Jakość i wydajność — nie pogorszyć SEO i bieżącej indeksacji; — zachować poprawne metadane i semantyczne HTML; — nie tworzyć krytycznych przesunięć układu; — optymalizować obrazy i czcionki; — uwzględnić reduced motion dla animacji; — sprawdzić podstawową dostępność: stany focus, kontrast, nawigacja klawiaturą; — nie podłączać ciężkich bibliotek bez uzasadnionej potrzeby. 10. Staging i QA — wdrożyć zmiany na staging; — sprawdzić główne typy stron; — sprawdzić desktop, tablet i mobile; — usunąć wizualne i responsywne błędy; — po akceptacji wykonać wdrożenie produkcyjne; — zapewnić poprawę błędów w zrealizowanym zakresie nie mniej niż 7 dni kalendarzowych po publikacji. WYNIK PRACY — Pull Request z kodem frontendowym; — zrealizowana nowa strona główna; — responsywne desktop/tablet/mobile; — jednolite czcionki, karty i podstawowe komponenty UI; — wizualnie zatwierdzone katalog, PDP i strony informacyjne; — wdrożenie staging; — poprawa znalezionych błędów wizualnych; — wdrożenie produkcyjne; — krótki opis zmienionych komponentów; — 7-dniowy okres naprawy błędów po akceptacji. KRYTERIA AKCEPTACJI 1. Strona główna odpowiada dostarczonemu projektowi. 2. Wszystkie sekcje poprawnie działają na desktop, tablet i mobile. 3. Nagłówek i stopka są jednolite na wszystkich stronach. 4. Katalog i PDP wizualnie odpowiadają nowemu systemowi. 5. Obecna funkcjonalność strony nie jest naruszona. 6. Kontrakty API i logika backendowa nie zostały zmienione bez uzgodnienia. 7. Brak poziomego scrolla i krytycznych przesunięć układu. 8. Czcionki i obrazy ładują się poprawnie. 9. Stany loading, empty i error są wyświetlane bez uszkodzenia układu. 10. Zmiany zostały sprawdzone na staging i wdrożone w produkcji. 11. Poprawiono błędy wizualne wykryte podczas akceptacji w ramach uzgodnionego zakresu. CO NIE JEST WYMAGANE — opracowanie backendu; — zmiana logiki biznesowej; — stworzenie nowego katalogu lub CMS; — opracowanie nowego API; — pełny redesign każdej strony informacyjnej; — nowe funkcje użytkownika, które nie są zawarte w makietach; — opracowanie skomplikowanego systemu designu od podstaw; — stworzenie nowego projektu zamiast dopracowania istniejącego; — zmiana struktury SEO bez osobnego uzgodnienia. WYMAGANIA WOBEC WYKONAWCY — pewna znajomość Next.js / React / TypeScript; — doświadczenie w pracy z istniejącymi projektami produkcyjnymi; — jakościowe responsywne cięcie; — doświadczenie w wdrażaniu projektów z Figma; — podejście komponentowe; — pewna praca z CSS / CSS Modules / Tailwind lub istniejącym systemem projektu; — zrozumienie Core Web Vitals; — Git / Pull Request workflow; — umiejętność pracy przez staging. W ODPOWIEDZI NALEŻY KONIECZNIE PODAĆ 1. Stała cena za pełny obowiązkowy zakres. 2. Czas realizacji w dniach roboczych. 3. Ocena w godzinach. 4. Kiedy można zacząć. 5. Linki do 2–3 odpowiednich projektów na Next.js/React. 6. Czy jest doświadczenie w pracy z katalogami, kartami produktów lub interfejsami analitycznymi. 7. Co będzie potrzebne do dokładnej oceny przed rozpoczęciem pracy. 8. Czy w cenę wchodzą: — staging; — responsywne QA; — wdrożenie produkcyjne; — poprawa błędów; — 7-dniowy okres naprawy błędów. Szablonowe odpowiedzi bez przeglądania wymagań i bez konkretnej oceny nie będą rozpatrywane. Dostęp do produkcji na pierwszym etapie nie jest udostępniany. Praca rozpoczyna się po ograniczonym przeglądzie kodu i wdrażana jest przez staging.
Istnieje działająca platforma produkcyjna z katalogiem i automatycznym aktualizowaniem zewnętrznych ofert i cen. Stos technologiczny: — Node.js / TypeScript; — PostgreSQL; — istniejąca usługa odświeżania cen i cron; — oddzielny gotowy moduł walidacji i wyboru ofert w Pythonie; — staging i produkcja. Konieczne jest punktowe dopracowanie istniejącego pipeline'u odświeżania cen bez pełnego przepisywania backendu. OBOWIĄZKOWY ZAKRES 1. Integracja modułu Python — Moduł Python pozostaje oddzielnym komponentem; — zwraca zorganizowany wynik: oferty, wybrana oferta, statusy i flagi ryzyka; — Node.js waliduje wynik i wykonuje zapis w bazie danych; — przewidzieć obsługę błędów i częściowych/nieudanych uruchomień; — pipeline dziedziczony nie jest wyłączany do zakończenia QA. 2. Uruchomienie odświeżania według listy Dodaj uruchomienie: — po jednym slug/id; — po przekazanej liście slug/id. Możliwe CLI lub istniejące API serwisowe. Nowy interfejs użytkownika nie jest wymagany. 3. Tryb Shadow Nowe wyniki powinny być zapisywane oddzielnie i nie wpływać na produkcję do QA. Wymagane pola shadow: — cena; — ID wybranej oferty; — bezpośredni URL; — status oferty; — flagi ryzyka/QA; — checkedAt; — engineVersion. 4. Rozszerzenie istniejącej tabeli ofert Dodaj: — źródło; — external_offer_id; — last_seen_at; — last_checked_at; — engine_version; — flagi ryzyka lub przechowywanie w istniejącym JSON; — unikalne ograniczenie dla ochrony przed duplikatami. Nie jest wymagane tworzenie nowego równoległego systemu ofert, jeśli istniejącą tabelę można bezpiecznie rozszerzyć. 5. UPSERT, STALE i transakcja DB Zamień obecną schemę DELETE → CREATE: — UPSERT istniejących i nowych ofert; — oferty, które nie występują w pełnym udanym snapshot, są przekazywane do STALE; — w przypadku błędu API, częściowego wyniku lub niedokończonego snapshot aktywne oferty nie powinny stawać się STALE; — aktualizacja ofert, metadanych wybranej oferty i pól shadow według jednego modelu odbywa się w ramach jednej transakcji DB; — w przypadku błędu wykonywany jest pełny rollback. 6. Bezpieczne odświeżanie kanoniczne Odświeżanie cen nie powinno zmieniać: — marki; — referencji; — modelu; — kolekcji; — nazwy/tytułu; — slug; — opisów; — obrazów; — pól SEO. Aktualizowane są tylko oferta, cena i dane shadow. 7. Zachowanie obecnej logiki cron Zachować: — istniejący cron; — rolling batches; — cooldown; — sprawdzenie PRICE_REFRESH_MIN_DAYS przed wywołaniem zewnętrznego API; — dziedziczony pipeline produkcyjny do zakończenia Shadow QA. 8. Audyt wyników Wystarczy jedna opcja: — kolumna shadow w istniejącej tabeli administracyjnej; lub — eksport CSV. Minimalne dane: — model/referencja; — cena produkcyjna; — cena shadow; — delta; — URL produkcyjny/shadow; — status; — flagi ryzyka; — checkedAt; — engineVersion. Nowy skomplikowany dashboard nie jest wymagany. 9. Staging i QA — migracje DB; — wdrożenie staging; — test dymny na 5 przekazanych modelach; — następnie Tryb Shadow na około 50 modelach; — naprawa błędów technicznych wykrytych podczas tych uruchomień; — krótka dokumentacja kontraktu Python → Node.js i procedura rollback. OPCJONALNIE OCENIĆ ODDZIELNIE Prosta promocja techniczna bez nowego UI: — promocja jednego modelu po slug; — promocja listy slug; — przeniesienie potwierdzonych wartości shadow do produkcji; — techniczna weryfikacja po rollout. WYNIK — Pull Request; — migracje DB; — działająca integracja Python → Node.js; — Tryb Shadow; — UPSERT, STALE i transakcyjne aktualizacje; — uruchomienie po slug/id; — wdrożenie staging; — wyniki testu dymnego; — krótka dokumentacja; — nie mniej niż 7 dni na poprawki błędów w zrealizowanym zakresie po akceptacji. W ODPOWIEDZI WSKAZAĆ 1. Stała cena za obowiązkowy zakres. 2. Oddzielny koszt mechanizmu promocji. 3. Termin. 4. Ocena godzin. 5. Kiedy gotowi do rozpoczęcia. 6. Doświadczenie z transakcjami PostgreSQL, migracjami i pipeline'ami wczytywania. 7. Jakie pytania należy wyjaśnić przed rozpoczęciem. 8. Czy wliczone są staging, QA, migracje i okres naprawy błędów. Szablonowe odpowiedzi bez konkretnej oceny nie będą rozpatrywane. Dostęp do produkcji na pierwszym etapie nie jest udostępniany. Praca zaczyna się od ograniczonego przeglądu kodu i stagingu.
Dzień dobry, 1) zaktualizować jQuery** do aktualnej wersji (3.x) z podłączeniem jQuery Migrate 2) Dokładnie przetestować funkcjonalność aplikacji 3) i usunąć możliwe błędy, aby skrypty były ze sobą kompatybilne pod względem wersji tutaj trzeba całkowicie przepisać https://filtry.in.ua/assets/libs/libs.js pod nową wersję jQuery, ponieważ tam jest stary Bootstrap i wiele funkcji niestandardowych zapisanych
Opis: Należy stworzyć skrypt JavaScript do rozszerzenia Tampermonkey. Skrypt będzie działał w wewnętrznym systemie CRM.Logika działania: Skrypt ma odczytywać unikalny tekstowy ID bieżącego aktywnego dialogu na stronie (jest 5–10 różnych ID). W zależności od ID, skrypt pobiera odpowiednią tekstową instrukcję (System Prompt) z ustawień. Mapę parametrów po ID należy przenieść do osobnego wygodnego okna ustawień skryptu. Po pojawieniu się nowej wiadomości w oknie czatu, skrypt wysyła ten tekst wraz z promptem przez API OpenAI (model gpt-4o-mini). Otrzymaną odpowiedź skrypt wstawia w pole wprowadzania tekstu i inicjuje wysyłkę z losowym opóźnieniem od 20 do 45 sekund, aby zasymulować naturalną pracę operatora.Praca wyłącznie z tekstem. Budżet — 6000 zł. Czekam na oferty od programistów z doświadczeniem w pracy z OpenAI API oraz pisaniu skryptów automatyzacji przeglądarki.