Frontend Developer Skill

React components, UI library, state management ve user experience geliştirir.

When to Use

• React component oluştururken veya düzenlerken
• State management (Zustand) implementasyonu yaparken
• Form handling (React Hook Form + Zod) eklerken
• Data fetching (TanStack Query) implementasyonu yaparken
• Loading states ve skeleton screens eklerken
• Empty states ve error boundaries yazarken
• Responsive design (Tailwind CSS) yaparken
• PWA features geliştirirken
• Accessibility (ARIA) iyileştirmeleri yaparken

Instructions

Görevler

• React component development (ui, shared, features)
• State management (Zustand stores)
• Form handling (React Hook Form + Zod)
• Data fetching (TanStack Query)
• Loading states ve skeleton screens
• Empty states ve error boundaries
• Responsive design (Tailwind CSS)
• PWA features (manifest, service worker)
• Accessibility (ARIA labels, keyboard navigation)

Kurallar

• Components functional components olmalı
• TypeScript strict mode kullan
• Tailwind CSS class names organized (use clsx + tailwind-merge)
• Component props TypeScript interfaces ile tanımlı
• No prop drilling (use Zustand or React Context)
• Error boundaries critical components'lerde
• Loading states tüm async operations'da
• Turkish language strings (no hardcoded English)

Kod Kalitesi

• Component names PascalCase
• File names kebab-case (my-component.tsx)
• Props destructuring
• useMemo ve useCallback optimization için
• Consistent naming conventions
• Reusable components (DRY principle)
• Accessibility best practices

Dosya Yapısı

src/components/
├── ui/              # Radix UI components
│   ├── button.tsx
│   ├── input.tsx
│   ├── dialog.tsx
│   └── ...
├── shared/          # Shared application components
│   ├── data-table.tsx
│   ├── stat-card.tsx
│   ├── empty-state.tsx
│   └── ...
└── features/        # Feature-specific components
    ├── members/
    ├── donations/
    └── social-aid/

Component Example

tsx
1import { cn } from "@/lib/utils";
2
3interface StatCardProps {
4  title: string;
5  value: string | number;
6  description?: string;
7  icon?: React.ReactNode;
8  trend?: "up" | "down" | "neutral";
9  className?: string;
10}
11
12export function StatCard({
13  title,
14  value,
15  description,
16  icon,
17  trend,
18  className,
19}: StatCardProps) {
20  return (
21    <div
22      className={cn(
23        "rounded-lg border bg-card p-6 shadow-sm",
24        className
25      )}
26    >
27      <div className="flex items-center justify-between">
28        <p className="text-sm font-medium text-muted-foreground">
29          {title}
30        </p>
31        {icon && (
32          <div className="text-muted-foreground">{icon}</div>
33        )}
34      </div>
35      <div className="mt-2">
36        <p className="text-2xl font-bold">{value}</p>
37        {description && (
38          <p className="text-xs text-muted-foreground mt-1">
39            {description}
40          </p>
41        )}
42      </div>
43    </div>
44  );
45}

TanStack Query Example

tsx
1import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
2
3// Fetch members
4export function useMembers() {
5  return useQuery({
6    queryKey: ["members"],
7    queryFn: async () => {
8      const res = await fetch("/api/members");
9      if (!res.ok) throw new Error("Üyeler yüklenemedi");
10      return res.json();
11    },
12  });
13}
14
15// Create member mutation
16export function useCreateMember() {
17  const queryClient = useQueryClient();
18  
19  return useMutation({
20    mutationFn: async (data: CreateMemberInput) => {
21      const res = await fetch("/api/members", {
22        method: "POST",
23        headers: { "Content-Type": "application/json" },
24        body: JSON.stringify(data),
25      });
26      if (!res.ok) throw new Error("Üye oluşturulamadı");
27      return res.json();
28    },
29    onSuccess: () => {
30      queryClient.invalidateQueries({ queryKey: ["members"] });
31    },
32  });
33}

Zustand Store Example

typescript
1import { create } from "zustand";
2import { persist } from "zustand/middleware";
3
4interface SidebarState {
5  isOpen: boolean;
6  toggle: () => void;
7  setOpen: (open: boolean) => void;
8}
9
10export const useSidebarStore = create<SidebarState>()(
11  persist(
12    (set) => ({
13      isOpen: true,
14      toggle: () => set((state) => ({ isOpen: !state.isOpen })),
15      setOpen: (open) => set({ isOpen: open }),
16    }),
17    {
18      name: "sidebar-storage",
19    }
20  )
21);