Niedawno realizowaliśmy projekt dwóch stron internetowych dla kanadyjskiej firmy CeeCam, zajmującej się produktami do ochrony i nadzorowania placów budowy.
Wykorzystane narzędzia i technologie
Design
W lipcu rozpoczęliśmy design warstwy graficznej pierwszej strony. Mieliśmy do zaprojektowania 2 strony internetowe, stronę główną CeeCam i stronę CeeCam Integrated. Część podstron pokrywa się w kwestii treści, dlatego żeby projektowanie było efektywne założyliśmy, że układamy je według podobnego schematu, ale w zależności od strony nadajemy inny styl, tak aby CeeCam Company nadać przyjazny dla użytkownika, prosty i odrobinę nieformalny charakter, a CeeCam Integrated bardziej korporacyjny, techniczny i profesjonalny, ponieważ jest to strona nastawiona na budowanie współpracy z innymi firmami. Obie wersje wizualne wykorzystują dwa odcienie koloru morskiego zaczerpniętego z logo i istniejącej identyfikacji wizualnej firmy (materiałów wideo, starej strony, nowego logo, wizytówek). Klient był w swoich oczekiwaniach konkretny i starał się na bieżąco dostarczać nam treści na stronę, dzięki czemu mogliśmy pracować na treściach, którymi strona będzie docelowo wypełniona i projektować układ podstron dokładnie pod potrzeby Klienta.
Development - stack technologiczny
Zdecydowaliśmy się na stack technologiczny Next.js 13 + Headless CMS Strapi. Pozwoliło nam to w błyskawicznym tempie napisać strony, które aktualizują dane niemalże natychmiast, kiedy użytkownik zmienia je w CMSie, zachowując przy tym racjonalny poziom wydajności i szybkości działania. Właściwie każdy element (poza kilkoma ikonkami, napisami czy formularzami) musiał być customizowalny z poziomu CMSa. Poniżej w sekcji nagłówkowej modyfikowalne są oba zdjęcia oraz napisy w białej ramce.
Pierwsza strona - CeeCam Integrated Solutions
Zaczęliśmy od CeeCam Integrated Solutions. Z makiet pobraliśmy kolory i style do komponentów. Dokonaliśmy konfiguracji projektu i przeszliśmy do implementacji pierwszych widoków. Skonstruowaliśmy widoki, formularze i odpowiednie typy zawartości w CMS Strapi, tak, aby zawartością strony zarządzało się w przejrzysty sposób.
W trzecim tygodniu sierpnia wprowadzaliśmy ostatnie usprawnienia na prośbę Klienta. Zaimplementowaliśmy bloga z funkcjonalnością generowania artykułów ze zdjęciami z pomocą GPT. Poniżej jedna ze zmian na prośbę klienta, nowy design rozwijanego menu:
Druga strona - CeeCam Company
Druga strona była bardziej wymagająca w kwestiach stylistycznych - dodane zostały różne elementy urozmaicające wygląd. Na szczęście design został poprowadzony w sposób umożliwiający ponowne wykorzystanie komponentów z Integrated, co znacząco przyspieszyło pracę. Pod koniec sierpnia strona była gotowa do recenzji Klienta.
Decyzje technologiczne
W toku rozwoju projektu podjęliśmy kilka decyzji odnośnie doboru i użycia technologii:
- Next.js 13 i App Router - użyliśmy najnowszej wersji Next.js, tak aby kod był utrzymywalny i czytelny przez długi czas po zakończeniu projektu. Nowa architektura App Routera pozwoliła nam również na odświeżanie danych niemalże w czasie rzeczywistym.
- Strapi + PostgreSQL - CMS Strapi w połączeniu z tą bazą danych jest stackiem, który bardzo dobrze zaspokaja potrzeby Klientów w kwestii zarządzania stroną. Masa dostępnych pluginów (także tych naszych, customowych) pozwala na szybki i bezproblemowy development oraz wygodne i stosunkowo tanie wdrożenie.
- Google Invisble reCAPTCHA v2 - API Google pozwoliło nam na szybkie i pewne zabezpieczenie formularzy kontaktowych przed spamem, tak, aby Klient był pewny, że dane które otrzymuje w swoich systemach są autentyczne.
Podsumowanie
Produkt działa szybko, posiada planowane funkcjonalności, a dzięki pracy teamu UX/UI jest także miły dla oka. Projekt we współpracy z CeeCam pokazuje, że można zaufać BoringOwl w kwestii developmentu stron internetowych.