Skip to content

Latest commit

 

History

History
99 lines (71 loc) · 6.2 KB

CONTRIBUTING.md

File metadata and controls

99 lines (71 loc) · 6.2 KB

Contributing to Tracking Maps with React.js, Vite, and Tailwind CSS

Thank you for your interest in contributing to the "Tracking Maps" project! We're excited to have you on board. This document provides guidelines and information to help you get started with contributing to this interactive map application.

Code of Conduct

This project adheres to a Code of Conduct to ensure a welcoming and inclusive environment for all contributors. Please take a moment to read the full text to understand the expectations for participation.

Our Development Process

We use GitHub to manage our project, track issues, discuss feature requests, and review pull requests. Our process is designed to be transparent and collaborative, ensuring that every contribution is valuable and aligns with the project's goals.

Getting Started: Setting Up Your Development Environment

Before you can start contributing, you need to set up the project on your local machine. Please follow the detailed setup instructions in the main README.md file. Here's a quick checklist with a few additional development-specific steps:

  1. Fork and Clone the repository to your local machine.
  2. Install Dependencies by running npm install.
  3. Set Up Map API Key (Crucial):
    • This project likely uses a third-party map service (like Google Maps, Mapbox, or Leaflet with a provider).
    • You will need to obtain your own API key from the respective provider.
    • Create a .env file in the root directory of the project and add your API key. Never commit your .env file or expose your API key in your code.
    • Example .env file: 
      VITE_MAP_API_KEY=your_api_key_here
  4. Run the Application with npm run dev to ensure everything is working correctly.

How to Contribute

We welcome contributions in various forms, including bug fixes, new features, documentation improvements, and UI/UX enhancements. Please follow the steps below for a smooth contribution process.

1. Fork the Repository and Create a Branch

  • Fork this repository to your GitHub account.
  • Create a new branch from the main branch for your work. Use a descriptive name for your branch, for example: feature/add-location-search or fix/marker-popup-bug.

2. Make Your Changes

  • Component-Based Structure: The application is built with React. Identify the correct component(s) to modify. Look for folders like src/components or src/features.
  • Styling: We use Tailwind CSS. Please use utility classes for styling to maintain consistency. Avoid writing custom CSS unless absolutely necessary.
  • State Management: Use React Hooks (useState, useEffect, etc.) for managing state within components.
  • API Integration: When working with map functionalities, ensure you are using the API key from the .env file via import.meta.env.VITE_MAP_API_KEY.

3. Test Your Changes Thoroughly

Before submitting a pull request, it's crucial to test your changes to ensure they work as expected and don't introduce new issues. Please verify the following:

  • Map Rendering: Does the map load and display correctly?
  • Interactions: Test all interactive elements like zooming, panning, and clicking on markers.
  • New Features: If you added a new feature (e.g., search), test it with various inputs to ensure it's robust.
  • Responsiveness: Check if the map and its controls adapt correctly to different screen sizes.
  • Console Errors: Open the browser's developer console and check for any errors or warnings.
  • Build Process: Run npm run build to ensure your changes do not break the production build.

4. Submit a Pull Request (PR)

  • Commit Your Changes: Write clear and concise commit messages that describe your changes.
  • Push to Your Fork: Push your changes to the feature branch on your forked repository.
  • Open a Pull Request: Navigate to the original repository on GitHub and open a new pull request against the main branch.
  • PR Description: Provide a clear and detailed description of your changes in the PR. Explain the problem you're solving or the feature you're adding, and link to any relevant issues. Include screenshots or videos if your change is visual.

We will review your pull request and provide feedback as soon as possible. Thank you for your contribution!

Reporting Issues

If you find a bug or have a suggestion for a new feature, please open an issue on GitHub. When reporting a bug, please provide:

  • A clear and descriptive title.
  • Detailed steps to reproduce the issue.
  • The expected behavior versus the actual behavior.
  • Information about your environment (e.g., OS, browser, Node.js version), as map rendering can sometimes be platform-specific.
  • Any relevant error messages or screenshots.

Areas of Contribution

If you're looking for ideas, here are some areas where we would particularly appreciate contributions:

  1. Core Map Features:
    • Implementing a location search bar that allows users to find places.
    • Adding directions and routing between two or more points.
    • Building a real-time tracking feature to display a moving point on the map.
    • Implementing map style switcher (e.g., satellite, terrain, street view).
  2. UI/UX Improvements:
    • Designing better info popups for location markers.
    • Adding loading indicators while the map or data is loading.
    • Creating a more intuitive and responsive control panel for map settings.
  3. Performance Optimization:
    • Implementing marker clustering to improve performance when displaying a large number of markers.
    • Optimizing component re-renders to ensure a smooth user experience.
  4. Data Visualization:
    • Adding support for different marker shapes and icons based on data type.
    • Implementing heatmaps to visualize data density.
  5. Testing:
    • Setting up a testing framework (e.g., Vitest, Jest) and writing unit/integration tests for the components.

License

By contributing to this project, you agree that your contributions will be licensed under the Apache License 2.0. See the LICENSE file for the full terms.