Skylarks-Next

New experimental website/progressive web app for the website of the Berlin Skylarks Baseball & Softball Club. Built with SvelteKit, Skeleton UI and Tailwind CSS.

Concept / Background

As of now, different types of data are being processed in different backends:

• The main backend Baseball & Softball Manager / BSM of the German Baseball & Softball Federation (DBV).

  • Everything related to organised play is processed there (clubs, games, leagues, teams, player, stats)
  • Accessed via REST API (provided by BSM - external)

• The current Skylarks website, served as a TYPO3 CMS website (PHP-based).

  • Processes mostly typical CMS content (articles, info pages), but also additional team data that is distinct from BSM data: club teams, player profiles (with more data than what is available in BSM), training times, game reports
  • Mainly displayed in the TYPO3 frontend directly, but is also partly accessible via REST API (custom - internal)

• To be added: A proper backend for custom business logic. Current plan is creating something Go-based, using Pocketbase as a framework.

Project goal

This project is intended as a pure frontend that collects data from various relevant sources and displays it in a user-friendly way. Since usage is expected to be predominantly mobile, focus is on providing a Progressive Web App with mobile-first design.

Project requirements

• basic familiarity with the concepts of SvelteKit and Svelte - there is an excellent official tutorial available
• Node.js v20 or higher
• access to Berlin Skylarks environment secrets and API keys

Local Development

1. Clone the repository

git clone git@github.com:tib-baseball-softball/skylarks-fe-next.git
cd skylarks-fe-next

2. Set up environment

cp .env.dist .env

• BSM API key (from BSM user account with at the club admin scope for Berlin Skylarks)
• API Auth Header (from .env on TYPO3 host server)
• PUBLIC_BACKEND_URL can either be set to a TYPO3 dev environment running locally or the production URL

3. Get project dependencies

npm install`
# yarn/pnpm/bun could also work, untested

4. Start the dev server (watches for file changes automatically)

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

Default local port is http://localhost:5173/

Deployment

Fully automated via GitHub Actions, deploys on every push to branch main, excluding documentation files and folders.

Server Setup / Manual Deployment

What the GitHub Action does:

1. npm ci && npm run build for production build output
2. sets static environment variables
3. copies build output to server via rsync
4. App is served as Node.js application listening on a specific port
5. Process is managed by PM2
6. The Caddy Webserver is used as reverse proxy.

Bugs and Problems

• Please open an issue in this repository.

Terms of use

Licensed under AGPL-3.

Explore other templates from The Good Docs Project. Use our feedback form to give feedback on this template.