diff --git a/README.md b/README.md index ce4902c..ebc9cc6 100644 --- a/README.md +++ b/README.md @@ -6,6 +6,115 @@ This is the frontend of [Disfactory](https://disfactory.tw), a platform for repo For the backend, please refer to [Disfactory](https://github.com/Disfactory/Disfactory) repository. +## Getting Started + +### Prerequisites + +Before you begin, ensure you have the following installed on your system: + +- **Node.js**: Version 16 or higher (we use Node.js 16 as specified in `.nvmrc`) + - You can download it from [nodejs.org](https://nodejs.org/) + - Or use a version manager like [nvm](https://github.com/nvm-sh/nvm) +- **npm**: Comes with Node.js (version 7+ recommended) +- **Git**: For version control + +### Quick Start + +1. **Clone the repository** + ```bash + git clone https://github.com/Disfactory/frontend.git + cd frontend + ``` + +2. **Install dependencies** + ```bash + npm install + ``` + +3. **Set up environment variables** + ```bash + cp .env.example .env + ``` + + The `.env` file contains configuration for the API endpoints. The default values should work for development. + +4. **Start the development server** + ```bash + npm run serve + ``` + + The application will be available at `http://localhost:8080` + +### Available Scripts + +| Command | Description | +|---------|-------------| +| `npm run serve` | Starts the development server with hot-reload | +| `npm run build` | Builds the app for production | +| `npm run test` | Runs the unit tests | +| `npm run test:watch` | Runs tests in watch mode | +| `npm run lint` | Lints and fixes files | +| `npm run typecheck` | Type-checks the code without emitting files | + +### Project Structure + +``` +src/ +├── components/ # Vue components +├── lib/ # Utilities and libraries +├── api/ # API related functions +├── types.ts # TypeScript type definitions +└── main.ts # Application entry point +docs/ # Documentation +public/ # Static assets +``` + +### Development Environment + +- **Framework**: Vue.js 2.7 with Composition API +- **UI Library**: Vuetify 2.x +- **Map Library**: OpenLayers +- **Language**: TypeScript +- **Testing**: Jest with Vue Testing Library +- **Linting**: ESLint with TypeScript support + +### Troubleshooting + +**Node.js version issues** +```bash +# If you're using nvm, switch to the correct version +nvm use 16 +``` + +**Port already in use** +```bash +# Kill processes using port 8080 +lsof -ti:8080 | xargs kill -9 +# Or specify a different port +npm run serve -- --port 3000 +``` + +**Build or dependency issues** +```bash +# Clear npm cache +npm cache clean --force +# Remove node_modules and reinstall +rm -rf node_modules package-lock.json +npm install +``` + +### Contributing + +1. Fork the repository +2. Create your feature branch (`git checkout -b feature/amazing-feature`) +3. Make your changes following the coding standards +4. Run tests and linting (`npm run test && npm run lint`) +5. Commit your changes (`git commit -m 'Add some amazing feature'`) +6. Push to the branch (`git push origin feature/amazing-feature`) +7. Open a Pull Request + +For more detailed development information, check out [docs/development.md](./docs/development.md). + ## High Level Design Check out the [Design](./docs/design.md) document for more information.