Goal

Create Portal with actual info regarding sports

  • Soccer
  • NBA
  • Tennis at first, and then others — MMA etc.

Figma

DataSources

Tech

We suggest splitting project to 3 parts.

  • Front: this is a part for end users, it uses some API and have aggressive caching, but mostly it's all about our users and UI.
  • Admin panel: here we can work with content, tags etc.
    • API mirroring for data provider API. We must allow storing of all data in some readable format, with option to optionally refresh information. But main point is that, we would like to be able to edit that information from CMS, thats why it should live here.
  • DataPrep: this is a separate service that allows us to fetch data and make some preparation, validation steps, then put that data to DB. Probably could be substituted with n8n node.

Front

This part uses fully custom design to provide the best user experience. We recommend to use Mobile-First approach in development. To separate external API from app data layer, we propose to use BFF layer (backend for frontend). Here shines SvelteKit and CloudFlare pages. The main benefit of such stack is a built-in integration of BFF layer into app, which allows using strongly typed autogenerated interface between BFF and frontend. In that case, it's easy to wrap any external API in BFF and decouple its shape from UI. Also, most of the data feed API provided with rate limits for making requests. In case of Cloudflare pages, we can use KV to cache API responses on the edge. For auth handling, we can use Lucia, which can store auth data inside KV directly (which is easy to implement in our case). For integration with strapi we have to build additional ts models, which could not be avoided.

Admin Panel

We suggest not to build custom admin panel for content. We have to build some interface to manage users, their verifications etc., but it could be done with some ready to go solution. For example strapi. Strapi is not designed for handling lots of requests, but we anyway have some caching layer at BFF layer. Strapi supports i18n for content. And yes, we have to host it as normal app, without CF Pages. The main goal of using a system like Strap is to avoid building an admin panel ourselves. In it, we can create data scheme with point and click, and then use it as data source. Danger: before recent there was no way to make normal backups in Strapi, but now there is CLI that allows to make normal backups that store both — schema and data.

API mirroring

We can store all external api data inside strapi, as json. Even more, we can write our own update schemas, with cron and other nice to have things. Unfortunately we will have to duplicate data schema twice. But in common strapi provides tooling, that allows to make something like — update on touch flow.

DataPrep

Here we must get some news from API and process them by ChatGPT and other tooling, and then store result in Admin Panel. It could be done as a separate server, but we think that it could be done with low code solution, like n8n. It has ChatGPT node and some examples, which are good starting point on understanding how it will be working. Also, n8n has Strapi node, that means that we could easily store results of processing into Admin Panel (as drafts for start)

Schema

Tech Stack

SvelteKit — frontend framework, Cloudflare Pages — hosing and CDN, CloudFlare KV — cache layer DB, Strapi — admin panel and API for content, N8N - low code platform for building data preparation flow, ChatGPT — language model used for data processing, OVH.ie — server hosting for N8N/Strapi.

Sports Data Feed API

We must provide our own Sports data API, actually we have to mirror its structure inside CMS. We want to benefit from Strapi flexible data model. In that case, we cover the case of API inaccessibility. If API is down, we can work with data mirror inside Strapi. But be aware that in normal case, data feed content should be prioritized over manual modifications. Strapi allowsextendingditss server with plugins, and mostly we will extend existing Strapi solution.

Functional blocks

Front Site

Registration

  • Oauth (Google)
  • Email
    • np authorization before confirmation
    • send confirm email
    • set password screen after confirm email
    • reset password screen
    • send reset password email
    • set password screen after email

Profile

  • public profile
  • private profile
  • edit profile

Profile picture

  • upload to cdn
  • upload window
  • crop tool
  • remove from profile

Favorite

  • leagues (add, remove, list)
  • teams (add, remove, list)
  • players (add, remove, list)

Notifications

  • Email
    • favourite team match todat
    • favourite league match today
  • Cron jobs (no support at kit, separate worker)

I18N

  • routing interceptor
  • all pages have the same slug in all languages
  • all pages always have lang in URL (/ redirects to → /ua )

SportAPI

  • custom fetch with cache support
  • different invalidation schemas for data
  • streamable promise support for not cached data

Routing

  • api based routing
    • no ids should be exposed
    • custom schema validation for path
    • pre-chare list routins
      • pagination support (try to avoid that)
  • strapi based routing
    • support uri prefixes
    • add caching for list operations
      • pagination support (try to avoid that)
  • install Meilisearch appliance
  • Integrate with Meilisearch

Admin panel

user list

  • block users
  • send reset password link for emails
  • last login date
  • show profile info
  • delete profile image

  • impersonate as user

cache management

  • expose cache stats
  • prune by key (all)

strapi instance

  • setup strapi
  • setup backups
  • check that restore from backups work
  • setup s3 (r2) integration for file upload
  • setup api access for modification
  • setup emails
  • setup plugins
    • i18n
  • provide content migration scripts

NodeJS Server

  • mirror data model
  • build custom updater for each model
  • write down hooks to update relations on object update inside strapi.

n8n

  • setup n8n
  • setup backups
  • setup strapi node
  • setup chat gpt workflow
  • setup news api workflow
  • help building n8n workflows

Dedicated Server

  • create and validate new OVH account
  • setup new server
  • setup control appliance
  • setup monitoring appliance
  • setup backups

Notes