Techniczne zadanie na rozwój landing page z osobistym kontem, płatnościami i systemem losowań na podstawie gotowego projektu w figma
- Ogólne informacje
Zmodyfikowaliśmy nasze wcześniejsze wymagania techniczne:
na dzień dzisiejszy nie jesteśmy związani z żadnymi konkretnymi technologiami ani językami programowania.
Rozważymy wszystkie możliwe opcje realizacji — od WordPress, Laravel, Webflow, Tilda lub innych rozwiązań CMS/no-code do pełnoprawnego rozwoju customowego na Go i Next.js. Najważniejsze jest, aby w przyszłości móc edytować teksty i zmieniać zdjęcia na stronie przez panel administracyjny.
Technologie Go (Golang) i Next.js (React) są pożądane, ponieważ główny projekt w przyszłości będzie oparty na tym stosie. Jednak jesteśmy gotowi przyjmować propozycje z wykorzystaniem innych technologii, jeśli zapewniają stabilność i szybkość rozwoju.
Celem jest stworzenie nowoczesnego, szybkiego i bezpiecznego landing page z osobistym kontem, płatnościami i systemem losowań, który stanie się częścią przyszłego dużego projektu.
UWAGA! KIERUJEMY SIĘ WYŁĄCZNIE PROJEKTEM (z projektu osobistego konta potrzebna jest tylko minimalna ilość funkcjonalności wskazana w zadaniu technicznym poniżej i omówiona osobiście, dostarczony projekt osobistego konta z głównego projektu)
2. Struktura umiejscowienia
Strona ma być umieszczona na subdomenach głównej domeny w formacie:
- https://nazwastrony.com/landing/ — strona pre-sale (prezentacja projektu, zbieranie kontaktów lub wniosków inwestycyjnych);
- https://nazwastrony.com/losowanie/ — strona losowań (informacje o bieżących/przeszłych losowaniach, formularz uczestnictwa, wprowadzanie kodów).
3. Opis projektu
Trzeba opracować landing page z zintegrowanymi kluczowymi funkcjami:
- rejestracja i autoryzacja użytkowników;
- osobiste konto użytkownika;
- płatność online;
- system losowań, w którym użytkownicy wprowadzają otrzymane kody (numery) za zakupy towarów lub usług.
Projekt zostanie dostarczony w Figma.
4. Cele i zadania
- Stworzyć dwie powiązane główne strony plus pomocnicze z jednolitym brandingiem i designem.
- Zapewnić maksymalną konwersję dzięki przemyślanemu UX.
- Zrealizować osobiste konto, integrację płatności oraz system losowań.
- Zapewnić responsywność, SEO-optymalizację, analitykę oraz połączenie z CRM (w razie potrzeby).
- Stworzyć architekturę, którą można skalować i rozwijać w przyszłości.
5. Główna funkcjonalność
Landing page (/landing)
- Główny ekran: logo, opis, przycisk CTA (“Weź udział”, “Zapoznaj się” itp.).
- Opis projektu, jego zalety i wartość.
- Jak to działa — krok po kroku schemat lub wideo.
- Blok “Partnerzy / Zespół”.
- Wezwanie do działania + formularz zbierania kontaktów.
- Stopka z kontaktami, mediami społecznościowymi, polityką prywatności.
Strona losowań (/losowanie)
- Informacje o bieżących losowaniach (nazwa, opis, warunki, nagrody).
- Formularz uczestnictwa (imię, email lub telefon, zgoda).
- Wprowadzanie kodów do uczestnictwa w podanym przez nas formacie.
- Sprawdzanie ważności kodu.
- Automatyczny lub ręczny wybór zwycięzców (prawdopodobnie nie będzie potrzebny, ponieważ planujemy korzystać z zewnętrznych, niezależnych zasobów dla przejrzystości przeprowadzania losowań, ale rozważymy możliwości w tym kierunku zaproponowane przez Ciebie, jeśli takie będą).
Rejestracja i autoryzacja
- Rejestracja przez email lub telefon.
- Potwierdzenie email/SMS (w miarę możliwości), lub lepiej przez pocztę.
- Bezpieczna autoryzacja przez JWT lub inny mechanizm tokenów.
Osobiste konto użytkownika
- Przegląd profilu, historii zakupów, kodów i uczestnictwa w losowaniach.
- Mechanizm wprowadzania kodów.
- Powiadomienia o wygranych.
- Historia płatności.
- Opcjonalnie — program lojalnościowy lub status uczestnika.
Płatności
- Podłączenie systemu płatności (LiqPay, Fondy lub inne – wybierzemy jedną najprostsza prawdopodobnie LiqPay).
- Możliwość płatności za uczestnictwo lub zakupy online.
- Wyświetlanie historii transakcji w koncie użytkownika.
Panel administracyjny
(można zrealizować na gotowym frameworku lub CMS)
- Zarządzanie użytkownikami, losowaniami, kodami, płatnościami.
- Przegląd statystyk i raportów.
- Edytowanie treści landing page.
6. Wymagania techniczne
Frontend
- Pożądane: Next.js (React) — dla zgodności z głównym projektem.
- Alternatywnie: wszelkie nowoczesne technologie lub CMS (WordPress, Webflow, Tilda, Vue.js, inne).
- Responsywne, nowoczesne układanie (mobile-first).
- Optymalizacja szybkości, struktura SEO, integracja analityki.
- Projekt — z Figma.
Backend
- Pożądane: Go (Golang) — jako główna technologia głównego projektu.
- Alternatywnie: Laravel, Node.js, PHP, Python, inne.
- API: REST lub GraphQL.
- Baza danych: PostgreSQL lub MySQL.
- Bezpieczna autoryzacja (JWT, ochrona CSRF/XSS).
- Integracja z systemami płatności, analityką, usługami email/SMS.
7. Panel administracyjny
- Prosty i wygodny interfejs zarządzania treścią, użytkownikami, losowaniami, płatnościami.
- Można wykorzystać gotowe rozwiązania (React Admin, Refine, WordPress Dashboard itp.).
8. Wynik pracy
- Całkowicie gotowy, przetestowany MVP:
- osnovnuydomen.com/landing/ — strona pre-sale;
- osnovnuydomen.com/losowanie/ — strona losowań;
- osobiste konto użytkownika;
- panel administracyjny do zarządzania.
- Dokumentacja z opisem architektury i instrukcją uruchomienia.
- Przekazanie plików źródłowych i dostępów oraz umieszczenie na głównej domenie + sprawdzenie działania.
9. Wymagania wobec wykonawcy
- Doświadczenie w tworzeniu landing page, kont użytkowników i integracji płatności.
- Znajomość bezpiecznych praktyk pracy z danymi.
- Atutem będzie doświadczenie z Go i Next.js.
10. Orientacyjne terminy
- 2–3 tygodnie (w zależności od wybranych technologii i zakresu prac – nie jest to pilne).
11. Co wskazać w odpowiedzi
- Przykłady zrealizowanych projektów.
- Doświadczenie w integracji systemów płatności.
- Propozycje dotyczące architektury (jaki stos uważasz za optymalny i dlaczego).
- Orientacyjne terminy i koszt realizacji.