Hint: Press ▶ to reveal hidden sections (usually contain screenshots).

• Run in UI mode and uncollapse individual tests to understand primary app use cases
• With page objects
• Scripts for running in different modes (headless and UI modes being the most useful)

Test signed-in and signed-out states

Screenshot: Playwright UI mode

With seed data

Screenshot: Home page with seeded data

Generates reports, useful for troubleshooting test errors in CI

Screenshot: Location of Playwright report files in GitHub Actions

See ./scripts/local/*/playwright/e2e/*.js scripts. Do npm ci (also make sure Docker Compose is installed) and run ./scripts/local/infra-app/playwright/e2e/ui.js to see awesome Playwright UI mode screen!

Done primarily for learning, not really needed for this project.

See ./scripts/local/*/playwright/api/*.js scripts.

See API testing | Playwright.

• Inspect *.node-test.ts and *.dom-test.ts files to understand use-cases of each code part
• Useful as a reference of how to unit test specific parts of a SvelteKit app
• Ability to generate test coverage reports for client and server code
  • Used extensively by the author to ensure good coverage of client and server code using Vitest
• Contains reusable utilities useful for testing parts of a SvelteKit app

Includes configs for Wallaby.js, which substantially increases the speed of writing client and server unit tests (not sponsored, author is just a big fan of their products 😋)

Screenshot: Passing component unit tests in VSCode with enabled Wallaby.js

See test:unit:* commands in package.json.

GitHub Actions CI tasks required for merging PRs

• Run all linting tasks
• Run FE unit tests
• Run BE unit tests
• Run API tests
• Run E2E tests
• Lint unwanted commit message patterns
• Lint unwanted TODO-style comments

GitHub Actions screenshot

Screenshot: Passing jobs inside `ci` GitHub Actions workflow

See ./.github/workflows/ci.yml file.

Northflank Pipelines CI/CD tasks

See Set up a pipeline | Getting Started | Northflank Application docs.

• Docker image building
• Enable Maintenance mode
• Database backup
• Database migration
• Docker image deployment

Northflank Pipeline run screenshot

Screenshot: Successful Production `release` flow Pipeline run

• TypeScript type checking
• Svelte Code Checker linting
• Prettier opinionated formatting
• ESLint TS/JS linting
• Stylelint style linting

See lint* commands in package.json.

A powerful option for hosting Dockerized apps. Pipelines (CI/CD) and Templates (quick infrastructure stack replication via IaC) are their killer features. See Features — Northflank for more details (not sponsored, the author is just a big fan of their platform 😋).

Northflank project dashboard screenshot

Screenshot: Northflank project dashboard

Visit https://code-snippet-sharing.nodeexx.com to access the deployed version.

• Dockerization levels ranging from everything running outside of Docker Compose to everything running inside of it
• Production-ready SvelteKit app Dockerfile with security in mind

It's possible to run the whole local stack with only Node.js, Docker and Docker Compose installed. For example, just run ./scripts/stack/local/all/infra-app/infra-app-seed.js to start the whole stack and seed the database with some data. Then visit localhost:3000 🚀. No need for npm ci or other setup to try out the app locally!

• Central location for storing app-wide configuration values
• The only location for accessing values of environment variables

See ./src/lib/server/core/config/index.ts file.

• Using Tailwind CSS config as a source of truth regarding allowed design token values
• Added comments regarding design tokens provided by Skeleton

See tailwind.config.ts file.

The only exceptions that require enabled JavaScript to work:

• Google Auth page itself
• Copy button on the View code snippet details page

Enabled JavaScript improves the UX though 😅

Displays a user-friendly message to the user during deployment while a user is unable to interact with the app. Useful during automated database backup and migration procedures.

Screenshot of enabled Maintenance mode

Screenshot: Enabled Maintenance mode

For example, when a signed-out user requests a page that requires authentication, the app first redirects the user to the sign-in page. After the user successfully signs in, the app redirects them back to the originally requested page.

• Toasts when JavaScript is enabled
• When JavaScript is disabled
  • Alerts for notifications on the same page
  • Page message at the top of the page for notifications that happened after page redirection

• 404 and 500 HTTP status error pages
• Toast notification on no Internet connection when requesting data from server with JS

The server part reacts to SIGINT and SIGTERM signals.

See ./src/hooks.server.ts file.

GET /api/healthcheck. Useful for knowing if the server part is up and running.

See ./src/routes/api/healthcheck/+server.ts file.

UI should work with screens as narrow as 320px.

Screenshot: Home page displayed on 320x480 screen

See template files in ./.vscode folder.

Take them as subjective opinions and observations though, not universal truths 🙂