Skip to content

CONTRIBUTING.md

Latest commit

 

History

History
234 lines (189 loc) · 4.89 KB

CONTRIBUTING.md

File metadata and controls

234 lines (189 loc) · 4.89 KB
Raw

🤝 Contributing to AlgoViz

AlgoViz projesine katkıda bulunduğunuz için teşekkürler! Bu rehber size nasıl katkıda bulunabileceğinizi gösterir.

🚀 Başlarken

  1. Fork edin
  2. Clone edin: git clone https://github.com/omercsbn/algoviz-platform.git
  3. Dependencies yükleyin: npm install
  4. Development server başlatın: npm run dev

📋 Katkı Türleri

🐛 Bug Reports

  • Detaylı açıklama yapın
  • Reproduksiyon adımlarını ekleyin
  • Beklenen vs gerçek sonuç
  • Screenshots/videos ekleyin

✨ Feature Requests

  • Özelliğin detaylı açıklaması
  • Use case'ler
  • Mockup/wireframe (varsa)
  • Implementation önerileri

🔧 Code Contributions

  • Clean ve readable kod
  • TypeScript kullanın
  • Comment'ler ekleyin
  • Test edin

📝 Coding Standards

TypeScript

// Interface'ler PascalCase
interface AlgorithmNode {
  id: number
  value: number
}

// Function'lar camelCase
const generateArray = () => { }

// Constants UPPER_SNAKE_CASE
const MAX_ARRAY_SIZE = 100

React Components

// Functional components with TypeScript
export function SortingVisualizer(): JSX.Element {
  // State tanımlamaları
  const [isRunning, setIsRunning] = useState(false)
  
  // useEffect'ler
  useEffect(() => {
    // Side effects
  }, [])
  
  // Event handlers
  const handleStart = () => {
    // Handler logic
  }
  
  return (
    // JSX
  )
}

CSS/Styling

  • Tailwind CSS kullanın
  • Responsive design (sm:, md:, lg:)
  • Dark mode support (dark:)
  • Consistent spacing

🌟 Yeni Algoritma Ekleme

1. Visualizer Component

// components/new-algorithm-visualizer.tsx
export function NewAlgorithmVisualizer() {
  // Algorithm logic
  // Visualization
  // Controls
}

2. Algorithm Implementation

const newAlgorithm = async () => {
  // Algorithm steps
  // State updates
  // Animations
}

3. Integration

  • Sidebar'a ekleyin
  • Main content'e entegre edin
  • Context'i güncelleyin

🎨 UI Component Guidelines

Button States

<Button 
  onClick={handleAction}
  disabled={isRunning}
  className="flex items-center gap-2"
>
  <Icon className="h-4 w-4" />
  Action Text
</Button>

Loading States

{isLoading && (
  <div className="flex items-center gap-2">
    <Spinner />
    <span>Loading...</span>
  </div>
)}

Error Handling

try {
  // Risky operation
} catch (error) {
  console.error("Operation failed:", error)
  toast.error("User-friendly error message")
}

🧪 Testing

Manual Testing

  • Tüm algoritmaları test edin
  • Farklı parametrelerle test edin
  • Edge case'leri kontrol edin
  • Mobile/desktop compatibility

Performance Testing

  • Large datasets ile test edin
  • Memory usage kontrol edin
  • Animation performance

📦 Pull Request Process

1. Branch Naming

feature/add-heap-sort
bugfix/fix-merge-sort-animation
improvement/optimize-tree-rendering
docs/update-readme

2. Commit Messages

feat: add heap sort visualization
fix: resolve merge sort key conflicts
docs: update contributing guidelines
style: improve button hover states

3. PR Template

  • What: Ne değişti?
  • Why: Neden bu değişiklik gerekli?
  • How: Nasıl implement edildi?
  • Testing: Nasıl test edildi?
  • Screenshots: Görsel değişiklikler varsa

4. Code Review

  • Clean code practices
  • Performance implications
  • User experience
  • Documentation updates

🏗️ Project Structure

algoviz-platform/
├── app/                    # Next.js app directory
│   ├── globals.css        # Global styles
│   ├── layout.tsx         # Root layout
│   └── page.tsx          # Home page
├── components/            # React components
│   ├── ui/               # Shadcn/ui components
│   ├── *-visualizer.tsx  # Algorithm visualizers
│   └── *.tsx            # Other components
├── hooks/                # Custom React hooks
├── lib/                  # Utility functions
├── public/              # Static assets
└── styles/              # Additional styles

🚀 Deployment

Vercel Deployment

npm run build    # Test production build
npm run start    # Test production server

Environment Variables

# .env.local
NEXT_PUBLIC_APP_URL=http://localhost:3000

💬 Communication

  • Issues: Bug reports ve feature requests
  • Discussions: Genel sorular ve öneriler
  • Pull Requests: Code contributions

📖 Resources

🎉 Teşekkürler!

Her katkınız AlgoViz'i daha iyi hale getirir. Sorularınız varsa issue açmaktan çekinmeyin!

Happy coding! 🚀