Skip to content

CONTRIBUTING.md

Latest commit

 

History

History
159 lines (114 loc) · 3.62 KB

CONTRIBUTING.md

File metadata and controls

159 lines (114 loc) · 3.62 KB

Contributing to Asper Beauty Shop

Thank you for your interest in contributing to Asper Beauty Shop! This document provides guidelines and instructions for contributing.

🚀 Getting Started

Prerequisites

  • Node.js 18+ or Bun
  • npm, yarn, or bun
  • Git

Setup

  1. Fork the repository
  2. Clone your fork: 
    git clone https://github.com/YOUR_USERNAME/asperbeauty.git
cd asperbeauty
  3. Install dependencies: 
    npm install
  4. Start the development server: 
    npm run dev

📝 Development Workflow

Branch Naming

Use descriptive branch names:

  • feature/add-product-filters - New features
  • fix/cart-quantity-bug - Bug fixes
  • docs/update-readme - Documentation updates
  • style/header-redesign - UI/styling changes

Commit Messages

Follow conventional commit format:

type(scope): description

[optional body]

Types:

  • feat: New feature
  • fix: Bug fix
  • docs: Documentation
  • style: Styling/formatting
  • refactor: Code refactoring
  • test: Adding tests
  • chore: Maintenance

Examples:

feat(cart): add quantity selector to cart items
fix(search): resolve dropdown not closing on blur
docs(readme): update installation instructions

🎨 Code Style

TypeScript

  • Use TypeScript for all new code
  • Define proper types and interfaces
  • Avoid any type when possible

React Components

  • Use functional components with hooks
  • Keep components small and focused
  • Extract reusable logic into custom hooks

Styling

  • Use Tailwind CSS utility classes
  • Follow the design system tokens defined in src/index.css
  • Use semantic color tokens (e.g., text-foreground, bg-primary)
  • Never use hardcoded colors directly

File Structure

src/
├── components/       # Reusable components
│   └── ui/          # shadcn/ui base components
├── pages/           # Route pages
├── hooks/           # Custom hooks
├── lib/             # Utilities
├── stores/          # Zustand stores
└── contexts/        # React contexts

🔍 Code Review Guidelines

Before Submitting

  • Code builds without errors (npm run build)
  • Code follows the project's style guidelines
  • Components are responsive (mobile, tablet, desktop)
  • RTL support is maintained for Arabic language
  • No console errors or warnings

Pull Request Process

  1. Create a pull request with a clear title and description
  2. Link any related issues
  3. Wait for review from maintainers
  4. Address any requested changes
  5. Once approved, your PR will be merged

🐛 Reporting Bugs

When reporting bugs, please include:

  1. Description: Clear description of the issue
  2. Steps to Reproduce: How to trigger the bug
  3. Expected Behavior: What should happen
  4. Actual Behavior: What actually happens
  5. Screenshots: If applicable
  6. Environment: Browser, OS, device

💡 Feature Requests

For feature requests, please provide:

  1. Problem Statement: What problem does this solve?
  2. Proposed Solution: How should it work?
  3. Alternatives Considered: Other approaches you've thought about
  4. Additional Context: Mockups, examples, etc.

📚 Resources

📧 Contact

For questions or support:

  • Create an issue in this repository
  • Join our community on Discord

Thank you for contributing! 🙏