Projects

• Projects
  • Stack
  • Team tools
  • Getting started
  • Contributing
  • End-to-end testing
  • Unit Testing
  • Internationalization
  • Vue Style Guide
  • Typescript
  • Backend Endpoints and Schemas
  • Environments
• License

An annuary to display and manage projects related to the UN sustainable goals. This is the source running the frontend for the website projects.directory

Share your projects to increase impact, Fill your profile with your skills and goals, Use the Projects platform to showcase your projects, facilitate synergies and foster collaboration for common good.

Stack

this project depends on a few others (backend, websocket server), we provide a fullstack repository : projects-fullstack please refer to it for further documentation

Team tools

• Slack

Getting started

Ask the team for an administrator or user account.

Create a .env file from .env.sample:

cp .env.sample .env

And make sure to set the properly the variables.

Install app dependencies with yarn :

yarn install --pure-lockfile

Serve the app on https://localhost:8080 for development:

yarn dev

If you need a production build :

yarn build

Contributing

We use a mono-branch flow: Create a feature branch from main branch, work on it and push it. Create a pull request and ask for a code review before integrating your changes in main branch.

Husky has been set up to run the linter on staged files to ensure a coherent codebase before committing anything in a new branch.

Github CI checks that all unit tests are passing and that the app builds without errors.

End-to-end testing

For running test with open pages, add --headed after test commands.

Running all tests :

yarn test:play

Running one test :

yarn test:play <file>

Running test with specific browser:

yarn test:play:<browser> <file>

browser options : chrome, edge, mobilesafari, mobilechrome, webkit, firefox, chromium.

Running Codegen :

yarn test:gen

Unit Testing

Vitest is used to test store modules, components and functions. Testing is still quite new in our workflow, so if you find yourself working on a component that does not have any test consider adding one.

Run all unit tests:

yarn test:unit

Internationalization

We use vue-i18n which exposes a globally available $t function to manage our locales : fr - en

Vue Style Guide

We should refer in most of case to the official vue style guide and js clean code

We use the strongly recommended rules from vue style guide and a few other ones : eslint.rc.js

Typescript

Typescript is still not used in components, for the moment we just benefit from type safety in most of the files consumed by the components. The types and interfaces are kept in the models folder.

Backend Endpoints and Schemas

Swagger doc

Environments

The development environment is built on each push on the branch main, staging on each push of an auto_staging tag on main branch and the production on by pushsing a semver tag (i.e. v1.2.3) on the main branch.

License

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.