↓Zum Hauptinhalt springen
  1. Portfolio/

Svelte5 Team App

·517 Wörter·3 min
Autor
Kees Fluitman
I am a pedagog, hobbyist, allrounder and self-taught beginning software engineer. I am also a privacy advocate and enjoy privacy enhancing technologies.
Inhaltsverzeichnis

As explained in my Websites portfolio entry, I wanted to bring together player, tournament and match-format info of my soccer team. I saw and use Upsnap frequently. It uses Svelte and Pocketbase. I discovered Svelte was a framework growing in popularity, and I chose to use it for this Team App. My goal is to learn more about:

  • Webapp Design
  • General Web app Frameworks
  • Multilanguage
  • Form Validation
  • Data Structuring
  • Javascript

graph TD; A[Svelte WebApp] --> B[Pocketbase] C[FastAPI] --> B D[sfv.ch] --> C E[turnieragenda.ch] --> C
General Structure of Data flow

Data
#

It would have been easiest if i had access to the forementioned websites to gain user data, tournament info etc. Aless, they would not allow me access to it. Unless for loads of money of course. SFV gave me a legimitate answer, that they were working on their own improved app. Yet that would still twart me to get tournament data of the private websites like turnieragenda.ch. So I chose pyppeteer and python as the easiest way to login, and scrape my team’s specific tournament data.

Limitations
#

The above recognition, led me to believe that this project would never rise to prominence and mass use. As it requires direct authentication info of each trainer that would want to use my app. So I considered this project as a personal Portfolio adventure. Nothing more.

  • Scraped Data is limited to trainer specific authentication
  • General Limitations of scraping

Pros
#

The pros are clear to me. I practice data structure, API best practices, and would learn Svelte5

  • I will use a modular component CSS framework like shadcn-svelte, so creating the UI would be a real treat.
  • Learn Pocketbase for future small personal projects
  • Practice the fastest python API library fastAPI
  • Eventually, use Superforms for proper validation of forms (and learn how validation works)

Plan
#

Authorization and Authentication
#

  • Invitation Links
  • Users own Players or Teams

UI Plan
#

  • Player specific dashboard with easy Calendar overview of Tournaments in card format. Similar to other team Apps like heja.
  • Event specific Modals for more details on an event like a tournament.
  • Forms to add custom events, trainings or player specific data.

Scraping
#

  • Tournament and Player data is scraped from sfv.ch and turnieragenda.ch
  • Pocketbase data structures are used for the eventual upload to pocketbase
  • This process is automated and refreshed frequently (probably on daily bases and request by admin)

Pocketbase
#

  • Data is structured

Data Structure
#

erDiagram users { string name string avatarUrl string avatar } players { string name file avatar bool active date birthdate } teams { string category string team string name number Age } users ||--o{ players : controls users ||--o{ teams : controls players ||--o{ teams : belongs_to
erDiagram players { string name file avatar bool active date birthdate } teams { string category string team string name number Age } tournaments { date date_time string organizer string location url location_url number limit bool active json participants } trainings { date date_time bool active string description } players ||--o{ teams : belongs_to tournaments ||--o{ teams : has_many trainings ||--o{ teams : has_many