🤝 Contributing to Expense Tracker Pro

First off, thank you for considering contributing to Expense Tracker Pro! It's people like you that make this project better for everyone. We welcome contributions from developers of all skill levels.

📋 Table of Contents

Code of Conduct
Getting Started
Types of Contributions
Development Workflow
Coding Standards
Testing Guidelines
Submitting Changes
Community

🌟 Code of Conduct

This project and everyone participating in it is governed by our commitment to creating a welcoming and inclusive environment. By participating, you are expected to uphold these values:

Be respectful - Treat everyone with respect and kindness
Be inclusive - Welcome newcomers and help them learn
Be constructive - Provide helpful feedback and suggestions
Be patient - Remember that everyone is learning
Be collaborative - Work together towards common goals

🚀 Getting Started

Prerequisites

Before you begin, ensure you have:

A modern web browser for testing
A text editor or IDE (VS Code recommended)
Git for version control
Basic knowledge of HTML, CSS, and JavaScript

Live Demo

Test the current version at: https://expense-tracker-one-wine.vercel.app/

Setting Up Your Development Environment

Fork the repository

# Click the "Fork" button on GitHub, then clone your fork
git clone https://github.com/YOUR-USERNAME/Expense-Tracker.git
cd Expense-Tracker

Set up the upstream remote

git remote add upstream https://github.com/AegisX-dev/Expense-Tracker.git
git fetch upstream

Create a development branch

git checkout -b feature/your-feature-name

Test the application

# Open index.html in your browser or use a local server
python -m http.server 8000
# Navigate to http://localhost:8000

🎯 Types of Contributions

We welcome various types of contributions:

🐛 Bug Fixes

Fix broken functionality
Resolve UI/UX issues
Improve error handling
Performance optimizations

✨ New Features

Add new functionality
Enhance existing features
Improve user experience
Add accessibility features

📚 Documentation

Update README and guides
Add code comments
Create tutorials
Improve examples

🎨 Design Improvements

UI/UX enhancements
Responsive design fixes
Theme improvements
Icon and visual updates

🧪 Testing

Add test cases
Improve test coverage
Performance testing
Cross-browser testing

🔄 Development Workflow

1. Issue First Approach

Before making changes:

Check existing issues for similar requests
Create a new issue if none exists
Discuss the approach in the issue
Wait for approval on significant changes

2. Branch Naming Convention

Use descriptive branch names:

feature/add-currency-converter
bugfix/fix-transaction-deletion
docs/update-installation-guide
style/improve-mobile-layout

3. Commit Message Format

Follow conventional commit format:

type(scope): description

[optional body]

[optional footer]

Examples:

feat(currency): add real-time exchange rate integration
fix(transactions): resolve deletion bug in filtered view
docs(readme): update installation instructions
style(dashboard): improve mobile responsiveness

Types:

feat: New features
fix: Bug fixes
docs: Documentation changes
style: Code style changes (formatting, etc.)
refactor: Code refactoring
test: Adding or modifying tests
chore: Maintenance tasks

📝 Coding Standards

JavaScript Guidelines

Use ES6+ features

// Good
const transactions = [...this.transactions];
const { income, expenses } = this.calculateTotals();

// Avoid
var transactions = this.transactions.slice();

Follow consistent naming

// Variables and functions: camelCase
const totalAmount = 100;
const calculateBalance = () => {};

// Classes: PascalCase
class ExpenseTrackerPro {}

// Constants: UPPER_CASE
const MAX_TRANSACTIONS = 1000;

Add meaningful comments

// Calculate percentage change between current and previous period
calculatePercentageChange(current, previous) {
    if (previous === 0) return current > 0 ? 100 : 0;
    return ((current - previous) / Math.abs(previous)) * 100;
}

Handle errors gracefully

try {
    const data = JSON.parse(localStorage.getItem('transactions'));
    return data || [];
} catch (error) {
    console.error('Error loading transactions:', error);
    return [];
}

CSS Guidelines

Use CSS custom properties

:root {
    --primary-color: #6366f1;
    --text-primary: #1e293b;
}

Follow BEM methodology

.transaction-list {}
.transaction-list__item {}
.transaction-list__item--selected {}

Mobile-first approach

.card {
    padding: 1rem;
}

@media (min-width: 768px) {
    .card {
        padding: 2rem;
    }
}

HTML Guidelines

Use semantic HTML

<main class="app-content">
    <section class="dashboard">
        <header class="dashboard-header">
            <h1>Financial Dashboard</h1>
        </header>
    </section>
</main>

Include accessibility attributes

<button aria-label="Delete transaction" onclick="deleteTransaction(123)">
    <i class="fas fa-trash" aria-hidden="true"></i>
</button>

🧪 Testing Guidelines

Manual Testing Checklist

Before submitting changes, test:

Core Functionality
- Add/edit/delete transactions
- Budget creation and management
- Currency conversion
- Data export/import
UI/UX
- Responsive design on mobile/tablet/desktop
- Theme switching (light/dark)
- Navigation between pages
- Form validation and error messages
Cross-Browser Testing
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
Performance
- Fast loading times
- Smooth animations
- Large dataset handling (100+ transactions)

Automated Testing

If you're adding automated tests:

// Example test structure
describe('Transaction Management', () => {
    test('should add new transaction', () => {
        // Test implementation
    });
    
    test('should delete transaction', () => {
        // Test implementation
    });
});

📥 Submitting Changes

Before Submitting

Sync with upstream

git checkout main
git pull upstream main
git checkout feature/your-feature-name
git rebase main

Test thoroughly
- Run through the manual testing checklist
- Test on multiple browsers
- Verify no console errors
Update documentation
- Update README if needed
- Add comments to complex code
- Update CHANGELOG if significant

Pull Request Process

Create a descriptive PR
- Use a clear title
- Describe what changes were made
- Include screenshots for UI changes
- Reference related issues

PR Template

## Description
Brief description of changes made.

## Type of Change
- [ ] Bug fix
- [ ] New feature
- [ ] Documentation update
- [ ] Style/UI improvement

## Testing
- [ ] Tested on Chrome
- [ ] Tested on Firefox
- [ ] Tested on mobile
- [ ] No console errors

## Screenshots (if applicable)
Add screenshots here

## Related Issues
Fixes #123

Review Process
- Be responsive to feedback
- Make requested changes promptly
- Ask questions if feedback is unclear

🎨 Design Contributions

UI/UX Improvements

When proposing design changes:

Create mockups or wireframes
Explain the user experience improvement
Consider accessibility implications
Maintain consistency with existing design

Color and Theme Guidelines

Current color palette:

/* Light Theme */
--primary-color: #6366f1;
--success-color: #10b981;
--warning-color: #f59e0b;
--error-color: #ef4444;

/* Dark Theme */
--bg-primary: #1e293b;
--text-primary: #f8fafc;

🌐 Internationalization

If contributing translations:

Create language files in /i18n/ directory
Follow the structure of existing language files
Test UI layout with different text lengths
Include RTL support considerations

📖 Documentation Standards

Code Comments

/**
 * Calculates the percentage change between two values
 * @param {number} current - Current period value
 * @param {number} previous - Previous period value
 * @returns {number} Percentage change (-100 to ∞)
 */
calculatePercentageChange(current, previous) {
    // Implementation
}

README Updates

Keep examples current
Update feature lists
Include new setup instructions
Add troubleshooting information

🚀 Release Process

Version Numbering

We follow Semantic Versioning (SemVer):

MAJOR.MINOR.PATCH
Major: Breaking changes
Minor: New features (backward compatible)
Patch: Bug fixes (backward compatible)

Changelog Updates

When making significant changes, update CHANGELOG.md:

## [2.1.0] - 2024-01-15

### Added
- Real-time exchange rate integration
- Advanced filtering options

### Fixed
- Transaction deletion bug in filtered view
- Mobile layout issues on small screens

### Changed
- Improved performance for large datasets

📞 Getting Help

Communication Channels

Issues: Best for bug reports and feature requests
Discussions: For questions and general discussion
Email: For security-related concerns

Common Questions

Q: How do I test currency conversion? A: Change currency in Settings and add test transactions to verify conversion rates.

Q: What browsers should I test on? A: Minimum Chrome 90+, Firefox 88+, Safari 14+, Edge 90+.

Q: How do I add a new chart type? A: Study the existing chart implementations in the updateDashboardCharts method.

🎉 Recognition

Contributors will be:

Listed in the README acknowledgments
Mentioned in release notes
Invited to join the maintainers team (for significant contributions)

📚 Resources

MDN Web Docs - Web development reference
Chart.js Documentation - For chart-related contributions
CSS Grid Guide - Layout reference
Accessibility Guidelines - WCAG reference

Thank you for contributing to Expense Tracker Pro! 🙏

Every contribution, no matter how small, helps make this project better for everyone. If you have questions or need help getting started, don't hesitate to reach out through the issues or discussions.

Happy coding! 🚀

FilesExpand file tree

CONTRIBUTING.md

Latest commit

History