Notable features

🎭 E2E testing via Playwright for main happy paths

• Run in UI mode and uncollapse individual tests to understand primary app use-cases
• Test signed-in and signed-out states
• With data seeding
• With page objects
• Scripts for running in different modes (headless and UI modes being the most useful)
• Generates reports, useful for troubleshooting test errors in CI

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!

TODOs

• Use GitHub Markdown collapsibles: How to add a collapsible section in markdown.
• Add a screenshot of UI mode with states highlighted to the right
• Add a screenshot of a home page with seeded data
• Add a screenshot of generate report files in GitHub Actions

🌐 API testing via Playwright API testing for main happy paths

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

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

See API testing | Playwright.

🧪 Unit tests via Vitest and Svelte testing library

• 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 substuntially increases the speed of writing client and server unit tests

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

TODOs

• Include a screenshot with of a unit test with enabled Wallaby.js

🔄 CI/CD using GitHub Actions and Northflank Pipelines

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

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

TODOs

• Include a screenshot of all GitHub CI tasks
• Include a screenshot of Northflank Pipeline

🧹 Comprehensive linting setup

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

See lint* commands in package.json.

🚀 Deployment via Northflank

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, author is just a big fan of their platform 😋).

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

TODOs

• Include a screenshot of Northflank dashboard

🐳 Ability to easily run the whole stack locally with different Dockerization levels

• 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

Its 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!

📝 Centralized server app config

• 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.

🎨 Centralized design token management

• 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.

⚙️ Client works even without enabled JavaScript (with some exceptions)

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 😅

🛠️ Maintenance mode enabled during deployments

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

TODOs

• Include a screenshot of maintenance mode

🔀 Smart redirects for signed-in/sign-out states

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

📢 Standardized user notifications

• 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

🚫 Configured global error handling

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

🛑 Configured graceful server shutdown

Server part reacts to SIGINT and SIGTERM signals.

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

🩺 Includes healthcheck API endpoint

GET /api/healthcheck

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

💬 A lot of helpful comments in the codebase

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