The frontend for Stormgate World, a community website featuring leaderboards, players profiles, content, stats and more for the game Stormgate by Frost Giant Studios.
We're using Astro + Tailwind + SolidJS, writting in TypeScript. It's an easy to learn rendering framework optimized for static content and web pages. Styling is done through Tailwind. For our interactice UX we use SolidJs, a signal based UI Framework that should be easy to adopt to people familiar with React or JSX. For the more complex components we rely on Kobalte, an headless UI Library, to ensure accessbility.
| Astro | SolidJS | Tailwind | Kobalte |
|---|---|---|---|
 |
 |
 |
 |
| Web Framework | UI Framework | CSS Utilties | A11y Components |
| Docs | Docs | Docs | Docs |
This project uses a so called Island Based architecture, or Multi Page App. In other words, all routes are a single response (no client side routing or SPA), where some areas of the page can be interactive components or widgets. No data, complex processing or storage happens in this project. Instead, we directly consume the Stormgate World API (docs) and add more endpoints there if needed (due to the nature of the integration with Frost Giant Studios the API project source code is private). This architecture also means you can contributo simple pages without needing to know SolidJs.
A fully typed version of the API is included as a lib in the project and can be used like below
import { LeaderboardOrder, LeaderboardsApi, Race} from "../lib/api"
const leaderboard = await LeaderboardsApi.getLeaderboard({
order: LeaderboardOrder.MMR,
race: Race.INFERNALS,
count: 30
})Make sure to install PNPM and Node (v18.0+). Pull the project and run:
pnpm installto install dependenciespnpm devto run the project locally
Contributors are welcome! Take a look at the issues and feel free to make PRs. Project discussion currently is hosted in the Stormgate Playtest Discord.