Rozpoczynanie nowego projektu - Cursor

Scenariusz

Zostałeś poproszony o stworzenie nowej aplikacji do zarządzania zadaniami dla małego zespołu. Wymagania są celowo mgliste: “Potrzebujemy czegoś jak Trello, ale prostszego, skupionego na codziennych standupach.” Masz dwa dni na stworzenie działającego prototypu.

Cele edukacyjne

Po ukończeniu tej lekcji opanujesz:

• Używanie AI do wyjaśniania niejasnych wymagań
• Generowanie kompleksowej architektury projektu
• Bootstrapping z nowoczesnym stosem technologicznym
• Efektywne konfigurowanie środowiska deweloperskiego
• Tworzenie początkowych funkcji z pokryciem testami
• Ustanawianie wzorców dla przyszłego rozwoju

Wymagania wstępne

• Cursor z ukończoną konfiguracją szybkiego startu
• Node.js 18+ i npm/yarn zainstalowane
• Podstawowa znajomość React i Node.js
• Git zainicjalizowany w pustym katalogu

Wyzwanie

Przekształć niejasne wymagania w działającą aplikację, która zawiera:

• Uwierzytelnianie użytkowników
• Tablicę zadań z kolumnami
• Aktualizacje w czasie rzeczywistym
• Responsywny design na urządzeniach mobilnych
• Podstawowe API z bazą danych

Wskazówka

Ta lekcja demonstruje moc rozwoju sterowanego AI. To, co tradycyjnie zajmuje dni, może być osiągnięte w godziny z właściwym podejściem.

Implementacja krok po kroku

Faza 1: Wyjaśnianie wymagań

1. Stwórz początkowy PRD

Otwórz Cursor w swoim pustym katalogu projektu i zacznij z trybem Ask:

"Muszę zbudować aplikację do zarządzania zadaniami 'jak Trello ale prostszą,
skupioną na codziennych standupach'. Pomóż mi stworzyć szczegółowy PRD
zadając pytania wyjaśniające."

2. Proces wyjaśniania przez AI

AI zapyta o rzeczy takie jak:

• Kim są główni użytkownicy?
• Jaki jest rozmiar zespołu?
• Jakie są kluczowe funkcje dla codziennych standupów?
• Czy potrzebujesz współpracy w czasie rzeczywistym?
• Jaki jest cel wdrożenia?

3. Wygeneruj dopracowany PRD

Po odpowiedzeniu na pytania:

"Na podstawie naszej dyskusji, stwórz kompleksowy PRD dla tablicy zadań
codziennych standupów w docs/requirements/standup-board.md"

Faza 2: Planowanie architektury

1. Wybór technologii

Przełącz się na tryb Agent:

@docs/requirements/standup-board.md
"Przeanalizuj ten PRD i zarekomenduj nowoczesny stos technologiczny, który:
- Pozwala na szybkie prototypowanie
- Wspiera aktualizacje w czasie rzeczywistym
- Dobrze współpracuje z rozwojem Cursor/AI
- Ma dobrą dokumentację dla kontekstu AI"

2. Projektowanie architektury

"Stwórz szczegółowy dokument architektury technicznej zawierający:
- Framework frontend i strukturę
- Projekt API backend
- Schemat bazy danych
- Podejście do uwierzytelniania
- Strategię komunikacji w czasie rzeczywistym
- Architekturę wdrożenia"

3. Generowanie struktury projektu

"Na podstawie architektury, stwórz kompletną strukturę projektu
ze wszystkimi niezbędnymi katalogami i początkowymi plikami konfiguracyjnymi"

Faza 3: Bootstrap implementacji

1. Inicjalizacja projektu

"Skonfiguruj projekt z:
- Next.js 14 z App Router dla frontend
- Express + Socket.io dla backend
- PostgreSQL z Prisma ORM
- Uwierzytelnianie JWT
- Tailwind CSS do stylizacji
Dołącz wszystkie pliki konfiguracyjne i package.json"

2. Schemat bazy danych

"Stwórz schemat Prisma dla:
- Użytkowników (z polami uwierzytelniania)
- Tablic (dla różnych projektów/zespołów)
- Kolumn (todo, w trakcie, zrobione, niestandardowe)
- Zadań (ze wszystkimi niezbędnymi polami)
- Komentarzy i śledzenia aktywności"

3. Konfiguracja środowiska

"Stwórz konfigurację środowiska deweloperskiego zawierającą:
- Docker compose dla PostgreSQL
- Szablon zmiennych środowiskowych
- Skrypty deweloperskie w package.json
- Początkowe dane testowe do bazy"

Faza 4: Implementacja podstawowych funkcji

1. System uwierzytelniania

@prisma/schema.prisma @docs/requirements/standup-board.md
"Zaimplementuj kompletny system uwierzytelniania:
- Rejestracja z email/hasło
- Logowanie z tokenami JWT
- Chronione trasy API
- Kontekst uwierzytelniania frontend
- Strony logowania/rejestracji ze stylizacją Tailwind"

2. UI tablicy zadań

@components @types
"Stwórz główny interfejs tablicy zadań:
- Przeciąganie i upuszczanie między kolumnami
- Dodawanie/edycja/usuwanie zadań
- Aktualizacje w czasie rzeczywistym z Socket.io
- Responsywny design na urządzenia mobilne
- Stany ładowania i błędów"

3. Endpointy API

@backend/src @prisma/schema.prisma
"Zaimplementuj endpointy RESTful API:
- CRUD dla tablic, kolumn i zadań
- Transmisja zdarzeń w czasie rzeczywistym
- Middleware obsługi błędów
- Walidacja wejścia
- Dokumentacja API"

Faza 5: Testowanie i jakość

1. Konfiguracja zestawu testów

"Skonfiguruj kompleksowe testowanie:
- Jest + React Testing Library dla frontend
- Supertest do testowania API
- Narzędzia testowe bazy danych
- Fabryki danych testowych
- Konfiguracja gotowa na CI/CD"

2. Początkowe testy

@src
"Wygeneruj testy dla:
- Przepływu uwierzytelniania (rejestracja, logowanie, wylogowanie)
- Operacji CRUD zadań
- Funkcjonalności przeciągania i upuszczania
- Walidacji endpointów API
- Połączeń WebSocket"

3. Dokumentacja

"Stwórz początkową dokumentację:
- README z instrukcjami konfiguracji
- Dokumentacja API
- Rejestr decyzji architektonicznych
- Wytyczne kontrybuowania
- Przewodnik wdrożenia"

Kluczowe zaprezentowane techniki

Technika 1: Iteracyjne udoskonalanie

Zacznij szeroko i udoskonalaj:

// Początkowy prompt
"Stwórz tablicę zadań"

// Lepszy prompt
"Stwórz tablicę zadań jak Trello dla codziennych standupów"

// Najlepszy prompt
@docs/requirements/standup-board.md
"Zaimplementuj tablicę zadań zgodnie z naszym PRD z aktualizacjami w czasie rzeczywistym"

Technika 2: Budowanie kontekstu

Warstwowo dodawaj kontekst:

// Najpierw: Wymagania
@docs/requirements/standup-board.md

// Potem: Architektura
@docs/requirements/standup-board.md @docs/architecture.md

// W końcu: Implementacja
@docs/requirements/standup-board.md @docs/architecture.md @prisma/schema.prisma
"Zaimplementuj funkcję tworzenia zadań"

Technika 3: Strategia punktów kontrolnych

Twórz punkty kontrolne przy głównych kamieniach milowych:

"Stwórz punkt kontrolny: Podstawowa struktura projektu ukończona"
"Stwórz punkt kontrolny: Uwierzytelnianie działa"
"Stwórz punkt kontrolny: Podstawowa funkcjonalność tablicy"

Typowe pułapki i rozwiązania

Nadmierna inżynieria

Problem: AI proponuje zbyt złożoną architekturę

Rozwiązanie: Dodaj ograniczenia do promptów:

"Zachowaj prostotę - potrzebujemy działającego prototypu w 2 dni"

Niespójne wzorce

Problem: Różne style kodowania w różnych plikach

Rozwiązanie: Stwórz zasady wcześnie:

"Wygeneruj .cursor/rules/coding-standards.md na podstawie
pierwszych kilku komponentów, które stworzyliśmy"

Brakujący kontekst

Problem: AI zapomina specyfiki projektu

Rozwiązanie: Odwołuj się do kluczowych dokumentów:

@docs/requirements/standup-board.md @prisma/schema.prisma
"Zawsze bierz to pod uwagę przy implementacji funkcji"

Rozszerzone wyzwanie

Teraz gdy masz podstawową aplikację, rozszerz ją o:

1. Zaawansowane funkcje

   • Wzmiankowanie użytkowników w zadaniach (@nazwa_użytkownika)
   • Terminy wykonania z powiadomieniami
   • Szablony zadań dla typowych elementów standupu
   • Wsparcie dla sprintów/iteracji

2. Integracje

   • Powiadomienia Slack dla aktualizacji zadań
   • Integracja z kalendarzem dla terminów
   • Eksport do CSV/PDF dla raportów
   • Synchronizacja z GitHub/GitLab issues

3. Optymalizacja wydajności

   • Implementacja wirtualnego scrollowania dla dużych tablic
   • Dodanie warstwy cache Redis
   • Optymalizacja połączeń WebSocket
   • Funkcje Progressive Web App

Mierzenie sukcesu

Twoja implementacja jest udana, gdy:

• ✅ Aplikacja działa lokalnie ze wszystkimi funkcjami
• ✅ Uwierzytelnianie działa bezpiecznie
• ✅ Zadania mogą być tworzone, przenoszone i aktualizowane
• ✅ Aktualizacje w czasie rzeczywistym działają w wielu przeglądarkach
• ✅ Responsywny design funkcjonuje prawidłowo
• ✅ Pokrycie testami przekracza 70%
• ✅ Dokumentacja jest kompleksowa
• ✅ Kod podąża za spójnymi wzorcami

Kluczowe wnioski

1. Zacznij od jasnych wymagań: Nawet mgliste pomysły mogą stać się jasne PRD z pomocą AI
2. Planuj przed kodowaniem: Planowanie architektury oszczędza czas i zmniejsza refaktoryzację
3. Używaj stopniowego ulepszania: Zacznij prosto, dodawaj złożoność incrementalnie
4. Wykorzystuj mocne strony AI: Pozwól AI obsłużyć kod szablonowy, podczas gdy ty skupiasz się na logice biznesowej
5. Utrzymuj kontekst: Dobra dokumentacja i zasady zapewniają spójną pomoc AI

Analiza czasu

Tradycyjne podejście: 2-3 dni Z Cursor AI: 3-4 godziny

• Wyjaśnianie wymagań: 30 minut (vs 2 godziny)
• Planowanie architektury: 30 minut (vs 3 godziny)
• Początkowa konfiguracja: 20 minut (vs 2 godziny)
• Podstawowe funkcje: 90 minut (vs 8 godzin)
• Testowanie i dokumenty: 40 minut (vs 4 godziny)

Następne kroki

Nauczyłeś się jak zbootstrapować kompletną aplikację od podstaw. Gotowy na kolejne wyzwanie?

Wypróbuj warianty

Użyj tych samych technik do zbudowania innego typu aplikacji (blog, e-commerce, social)

Skaluj to

Dodaj bardziej złożone funkcje jak role, uprawnienia i zaawansowane workflow

Wdróż to

Użyj Cursor do konfiguracji CI/CD i wdrożenia do produkcji

Kontynuuj do Refaktoryzacja starszego kodu →

Notatka

Zapisz udane prompty i wzorce z tej lekcji. Będą cennych szablonów dla przyszłych projektów. Rozważ przekazanie ich do biblioteki promptów społeczności.