The PalletPals client is written in React and Tailwind CSS, uses the frontend tooling of Vite and Vitest as test framework.
# install dependencies
npm install
# start dev environment
npm run dev
# build
npm run build
# run tests
npm run testUse the reverse proxy p3 in development.
The following checklist has to be fulfiled before a feature is completed.
- Localization is complete?
- Tests are written (at least 1 per feature)?
- Tests are passing (100%)?
- Implementation is congruent with specification (UC, SD, CP)?
- If not, is specification updated?
- Works on mobile device?
- No dead imports or similar?
Tests are automatically run by a GitHub Action for every commit and pull request on the main branch. Merging is prevented if a test fails.
flowchart LR
A[Commit to main] --> B[Run tests]
C[Pull request to main] --> B
B --> D{is failing?}
D-- Yes -->E[Stop]
D-- No -->F[Proceed]
Prettier is used to format the codebase. Additionally, Tailwind classes are sorted using the official Tailwind CSS Prettier plugin.
Unit tests are written using Vitest and Testing Library. Tests for a component are written in a ComponentName.test.jsx file inside the components directory to keep the source code and tests close to each other.
Tests can be run locally with the npm test command. Additionally, Github Actions are used to automatically run all test suites. On every push on the main branch and on each pull request, this test workflow is run automatically. In the case of a failure, merging is blocked and the commit is marked as failing. This solves the issue of "forgetting" to run tests and sends a notification / email to the contributors in case of a failure.
The client can be run inside a Docker container. This requires Docker to be installed on the host system. Docker Compose is used to start and stop the container.
# build & serve on :8080 (detached mode)
docker-compose up -d
# stop serving
docker-compose down| Abbreviation | Term |
|---|---|
| CP | Communications Protocol |
| SD | Sequence Diagram |
| UC | Use Case |