diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..88466dc --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,9 @@ +# Contributing + +We want to invite the vast community of developers to contribute to our mission and improve MapSwipe web app. + +## Contributions + +We welcome any contributions that help improve the application. Before you start hacking, please read through [README](README.md) and the issues on GitHub to find the best fit for your skills. If you find a task that you are confortable working on, simply fork the repo and submit a PR (to the `main` branch) when you are ready! + +If you are thinking of a change that is not trivial, we suggest you first [open an issue](https://github.com/mapswipe/mapswipe-web/issues) to discuss your proposed changes. This may save you a lot of time, as other people may be working on similar (or conflicting) changes. diff --git a/README.md b/README.md index 4b3dde9..9c72cdc 100644 --- a/README.md +++ b/README.md @@ -1,25 +1,16 @@ -# crowdmap-webapp +# MapSwipe Web App -This template should help get you started developing with Vue 3 in Vite. +Welcome to [MapSwipe4Web](https://web.mapswipe.org). This web application complements the existing [mobile app](https://github.com/mapswipe/mapswipe) and allows users to contribute to [MapSwipe](https://mapswipe.org) from their browser. It was initially developed by [HeiGIT](https://www.heigit.org) with the support of the [Humanitarian OpenStreetMap Team](https://www.hotosm.org/). -## Recommended IDE Setup +## Developing, Building, and Contributing to MapSwipe -[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). +If you'd like to modify and improve the MapSwipe web app, read through the following to get familiar with the project. Please also read [CONTRIBUTING](CONTRIBUTING.md). -## Type Support for `.vue` Imports in TS +## Technology Used -TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. - -If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: - -1. Disable the built-in TypeScript Extension - 1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette - 2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` -2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. - -## Customize configuration - -See [Vite Configuration Reference](https://vitejs.dev/config/). +The app is written in [Vue](https://vuejs.org). It uses the same backend as the mobile app: +1. Firebase provides the backend database. It is protected with security rules so that users and contributors to this open source project can not cause damage. +1. The [workers](https://github.com/mapswipe/python-mapswipe-workers) on the backend are running on Google Cloud and handle pre-processing and post-processing the data. ## Project Setup @@ -33,39 +24,27 @@ yarn yarn dev ``` -### Type-Check, Compile and Minify for Production +### Lint with [ESLint](https://eslint.org/) ```sh -yarn build +yarn lint ``` -### Run Unit Tests with [Vitest](https://vitest.dev/) +### Format with [prettier](https://prettier.io) ```sh -yarn test:unit +yarn format ``` -### Run End-to-End Tests with [Playwright](https://playwright.dev) +### Pre-commit hook + +Automate linting and formatting as pre-commit hook (from repo root): ```sh -# Install browsers for the first run -npx playwright install - -# When testing on CI, must build the project first -yarn build - -# Runs the end-to-end tests -yarn test:e2e -# Runs the tests only on Chromium -yarn test:e2e --project=chromium -# Runs the tests of a specific file -yarn test:e2e tests/example.spec.ts -# Runs the tests in debug mode -yarn test:e2e --debug +ln -fs ../../pre-commit-hook .git/hooks/pre-commit +chmod ug+x .git/hooks/* ``` -### Lint with [ESLint](https://eslint.org/) +### Deployment -```sh -yarn lint -``` +On any push to the main branch of this repository, the most recent **tagged** version **and** the latest version are built and deployed to [web.mapswipe.org](https://web.mapswipe.org) and [web.mapswipe.org/dev](https://web.mapswipe.org/dev) respectively (see [deployment workflow](.github/workflows/deploy.yml)). diff --git a/package.json b/package.json index ff64393..57d3c32 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "crowdmap-webapp", + "name": "mapswipe-web", "version": "0.0.0", "private": true, "scripts": {