melt

Crowd-Sourced Reporting Map

This project is a crowd-sourced reporting map application built using Jinja, Next.js, vanilla JavaScript, and MapLibre GL. It allows users to report incidents or observations on a map, which can be viewed by others in real-time. The application is hosted on GitHub Pages and utilizes Supabase for backend services.

Project Structure

crowdmap-app
├── public
│   └── index.html          # Main HTML entry point
├── src
│   ├── components
│   │   └── MapLibreMap.js  # React component for MapLibre GL map
│   ├── pages
│   │   ├── _app.js         # Custom App component for Next.js
│   │   └── index.js        # Main landing page
│   ├── styles
│   │   └── globals.css     # Global CSS styles
│   ├── utils
│   │   └── supabaseClient.js # Supabase client configuration
│   └── templates
│       └── report_form.jinja # Jinja template for report submission form
├── .github
│   └── workflows
│       └── deploy.yml      # GitHub Actions workflow for deployment
├── next.config.js          # Next.js configuration
├── package.json             # npm configuration
├── README.md               # Project documentation
└── supabase
    └── schema.sql          # SQL schema for Supabase database

Best Practices

  1. Modular Components: Components are designed to be small and focused on a single responsibility, enhancing reusability and maintainability.

  2. State Management: Utilize React’s context or a state management library to manage global state, particularly for user authentication and report data.

  3. Responsive Design: The application is designed to be mobile-friendly using responsive design techniques in CSS.

  4. Localization: Implement internationalization (i18n) to support multiple languages for the reporting map.

  5. Error Handling: Robust error handling is implemented for API calls and user inputs to improve user experience.

  6. Security: The Supabase client is secured, ensuring proper authentication and authorization for users submitting reports.

  7. Version Control: Git is used for version control, maintaining a clear commit history.

  8. Documentation: The README.md is kept updated with clear instructions on setup, usage, and contribution guidelines.

  9. Testing: Unit and integration tests are written for components and utility functions to ensure reliability.

  10. Continuous Deployment: GitHub Actions are utilized for automated testing and deployment, streamlining the development workflow.

Getting Started

To get started with the project, follow these steps:

  1. Clone the repository: 
    git clone https://github.com/yourusername/crowdmap-app.git
  2. Navigate to the project directory: 
    cd crowdmap-app
  3. Install dependencies: 
    npm install

  4. Set up Supabase and configure the supabaseClient.js with your Supabase URL and API key.

  5. Run the development server: 
    yarn dev
  6. Open your browser and go to http://localhost:3000 to view the application.

Contributing

Contributions are welcome! Please submit a pull request or open an issue for any enhancements or bug fixes.