This project was archived on the 02.09.2025. A new Repository was created that combines both the Frontend and the backend of the "Project Metadata Platform". It can be found here: https://github.com/appsfactorygmbh/project-metadata-platform

Appsfactory "Metadata Platform" Frontend

Overview

This project is a Vue 3 web application with TypeScript integration, utilizing modern tools like Vite, ESLint, Prettier, and Vitest for development and testing.

Getting Started

Prerequisites

• Node.js (v16+)
• Corepack (manages package managers like Yarn)
• Yarn

Installation

1. Clone the repository:

   git clone <repository-url>
   cd frontend

2. Enable Corepack and install dependencies:

   corepack enable
   yarn install

Scripts

Development:

yarn dev

Runs the app in development mode.

Build:

yarn build

Builds the app for production.

Preview:

yarn preview

Previews the production build.

Lint:

yarn lint

Lints the codebase with ESLint. Recommended to execute before committing.

Format:

yarn format

Formats the codebase with Prettier. Recommended to execute before committing.

Test:

yarn test

Runs unit tests with Vitest.

Test UI:

yarn test:ui

Runs the Vitest UI.

Project Structure

• public: Static public files like favicon or fonts
• src: Source files
  • assets: Static assets like images
  • components: Vue reusable components
  • models: TypeScript models
  • router: Vue router configuration
  • services: API services
  • store: Pinia stores
  • views: Vue views/pages

Environment Variables

...

Development with Backend Service

To use the backend service during development, one needs to run the backend service locally. This can easily be done with docker.

1. Install Docker and Docker Compose: https://docs.docker.com/get-docker/ and https://docs.docker.com/compose/install/

2. Download the latest version of docker-compose-local.yml from the backend repository: https://github.com/appsfactorygmbh/project-metadata-platform-backend/blob/main/docker-compose-local.yml

3. Run the backend service by running these commands in the same directory as the downloaded docker-compose-local.yml file (You may need to add - between docker and compose):

   docker compose -f docker-compose-local.yml pull
   docker compose -f docker-compose-local.yml up --remove-orphans

4. The backend service should now be available at http://localhost:8090. This URL is already configured in the .env file of the frontend. Simply use import.meta.env.VITE_BACKEND_URL + "/<your-endpoint>" to access the api. For example:

   const response = await fetch(import.meta.env.VITE_BACKEND_URL + '/projects');

5. The env files are already configured to use the correct backend URLs in the staging and production environments. No further changes are necessary after local development is over.

6. The Swagger UI of the backend service is available at http://localhost:8090/swagger/index.html.

7. To stop the backend service, hit Ctrl+C in the terminal where the service is running.