docs: update README

README.md

@@ -1,49 +1,25 @@
 # Disfactory frontend
 
-## Links
-
-- Staging Server: https://dev.disfactory.tw (latest `master` branch)
-- Production server: https://disfactory.tw (`production` branch)
-- [JD](./docs/JD.md)
-- [Disfactory_UI_design - Figma](https://www.figma.com/file/nTYqE10obqYSy2x9zY6Oer/Disfactory_UI_design?node-id=244%3A648)
-
-## Project setup
-
-```bash
-cp .env.example .env
-npm install
-```
+![screenshot of disfactory](./docs/images/screenshot.png)
 
-### Compiles and hot-reloads for development
+This is the frontend of [Disfactory](https://disfactory.tw), a platform for reporting illegal factories in Taiwan.
 
-```bash
-npm run serve
-```
+For the backend, please refer to [Disfactory](https://github.com/Disfactory/Disfactory) repository.
 
-### Compiles and minifies for production
+## High Level Design
 
-```bash
-npm run build
-```
+Check out the [Design](./docs/design.md) document for more information.
 
-### Run your tests
+## Development
 
-```bash
-npm run test
-```
+Check out development guide in [docs/development.md](./docs/development.md).
 
-### Lints and fixes files
-
-```bash
-npm run lint
-```
-
-### Run your unit tests
+## Links
 
-```bash
-npm run test:unit
-```
+- Production server: [https://disfactory.tw](https://disfactory.tw) (auto-deployed from `production` branch)
+- Staging Server: [https://dev.disfactory.tw](https://dev.disfactory.tw) (auto-deployed from `master` branch)
+- [Disfactory_UI_design - Figma](https://www.figma.com/file/nTYqE10obqYSy2x9zY6Oer/Disfactory_UI_design?node-id=244%3A648)
 
-### Customize configuration
+## License
 
-See [Configuration Reference](https://cli.vuejs.org/config/).
+This project is licensed under the MIT License - see the [LICENSE](./LICENSE) file for details.

docs/design.md

@@ -0,0 +1,21 @@
+# Design
+
+## Overview
+
+The Disfactory frontend uses [Vue.js 2.x](https://v2.vuejs.org/) as the main framework. It is a single-page application (SPA) that communicates with the [backend](https://github.com/Disfactory/Disfactory) API server.
+
+For the map, we use [OpenLayers](https://openlayers.org/) as the map library. The map is rendered in the [`Map.vue`](./src/components/Map.vue) component, with [`map.ts`](./src/lib/map.ts) as the main logic for the map.
+
+## Libraries
+
+- [Vue.js 2.x](https://v2.vuejs.org/)
+  - Vue composition API
+- [OpenLayers](https://openlayers.org/)
+- [Vuetify 2.x](https://v2.vuetifyjs.com/): Material Design component framework for Vue.js. Most of the UI components are built with Vuetify.
+
+## Directory Structure
+
+- `public/`: Static files
+- `src/`: Main source code directory
+  - `components/`: Vue components
+  - `lib/`: Libraries and utilities

docs/development.md

@@ -0,0 +1,29 @@
+# Disfactory Development Guide
+
+## Pre-requisites
+
+- Node.js 16
+
+## Project setup
+
+```bash
+cp .env.example .env
+
+# Install dependencies
+npm install
+```
+
+### Start development server
+
+```bash
+
+```bash
+# Compiles and hot-reloads for development
+npm run serve
+```
+
+## Compiles and minifies for production
+
+```bash
+npm run build
+```