Przejdź do głównej zawartości
Codex13

13. Mini CRM

Cel projektu

Dział zatytułowany „Cel projektu”

Zbudujesz mini system CRM (Customer Relationship Management) do zarządzania kontaktami — dodawanie, edycja, wyszukiwanie i filtrowanie kontaktów z możliwością dodawania notatek i śledzenia historii interakcji.

Czego się nauczycie?

  • Zaawansowane formularze z walidacją (e-mail, telefon)
  • Wyszukiwanie wielopolowe (imię, firma, e-mail)
  • Zarządzanie relacją kontakty ↔ notatki
  • Sortowanie i grupowanie danych
  • Praca zespołowa — jeden robi zarządzanie kontaktami, drugi notatki i interakcje

Co ma robić aplikacja?

Dział zatytułowany „Co ma robić aplikacja?”

Główne funkcjonalności

Dział zatytułowany „Główne funkcjonalności”

  1. Lista kontaktów — imię, firma, stanowisko, telefon, e-mail, status

  2. Dodawanie i edycja — formularz z walidacją pól

  3. Szczegóły kontaktu — wszystkie dane + historia notatek

  4. Notatki — dodawanie notatek do kontaktu z datą

  5. Wyszukiwarka — globalna wyszukiwarka po imieniu, firmie, e-mailu

Struktura danych

Dział zatytułowany „Struktura danych”
{
  "contacts": [
    {
      "id": "ct-001",
      "firstName": "Jan",
      "lastName": "Kowalski",
      "email": "jan.kowalski@firma.pl",
      "phone": "+48 500 123 456",
      "company": "TechFirma Sp. z o.o.",
      "position": "CTO",
      "status": "active",
      "tags": ["klient", "VIP"],
      "notes": [
        { "id": "n-001", "text": "Spotkanie 15 marca o 10:00", "date": "2025-03-10" }
      ],
      "createdAt": "2025-01-15"
    }
  ]
}

Warianty realizacji

Dział zatytułowany „Warianty realizacji”
  • Lista kontaktów z podstawowymi danymi
  • Formularz dodawania kontaktu z walidacją (e-mail, wymagane pola)
  • Edycja i usuwanie kontaktu
  • Wyszukiwarka po imieniu i nazwisku
  • Routing: /, /contact/:id, /contact/new
Ocena: 3.0

Wskazówki implementacyjne

Dział zatytułowany „Wskazówki implementacyjne”

Walidacja formularza

Dział zatytułowany „Walidacja formularza”
src/utils/validators.js
export function validateContact(data) {
  const errors = {};


  if (!data.firstName?.trim()) errors.firstName = 'Imię jest wymagane';
  if (!data.lastName?.trim()) errors.lastName = 'Nazwisko jest wymagane';
  if (data.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email)) {
    errors.email = 'Nieprawidłowy format e-mail';
  }
  if (data.phone && !/^[\d\s\+\-\(\)]{9,}$/.test(data.phone)) {
    errors.phone = 'Nieprawidłowy format telefonu';
  }


  return { isValid: Object.keys(errors).length === 0, errors };
}


// W komponencie:
function ContactForm({ onSubmit }) {
  const [data, setData] = useState({ firstName: '', lastName: '', email: '', phone: '' });
  const [errors, setErrors] = useState({});


  function handleSubmit(e) {
    e.preventDefault();
    const { isValid, errors } = validateContact(data);
    if (!isValid) { setErrors(errors); return; }
    onSubmit(data);
  }


  return (
    <form onSubmit={handleSubmit}>
      <input
        value={data.firstName}
        onChange={(e) => setData({ ...data, firstName: e.target.value })}
        placeholder="Imię"
      />
      {errors.firstName && <span className="error">{errors.firstName}</span>}
      {/* ... */}
    </form>
  );
}

Zasoby

Dział zatytułowany „Zasoby”
HTMLElement: input event — MDN Obsługa zdarzeń formularzy.
Regular Expressions — MDN Walidacja e-mail i telefonu z regex.

Do dzieła!

Dział zatytułowany „Do dzieła!”

Powodzenia!

Mini CRM to projekt bardzo zbliżony do aplikacji biznesowych. Skupcie się na prawidłowej walidacji formularza — to będzie jedna z pierwszych rzeczy sprawdzanych podczas obrony. Czyste formularze z dobrym UX i komunikatami błędów to znak profesjonalizmu!