It is a TypeScript / React project, serving the Otohime front-end and the bookmarklet to trigger the update.
Register and set:
- Firebase Auth connecting with Google
Make sure the server is up with docker-compose and .env set correctly.
In order to import the score correctly, please check documents of the server.
Then create src/firebase.ts with contents like:
export default {
apiKey: ".......",
authDomain: "project-name.firebaseapp.com",
databaseURL: "https://project-name.firebaseio.com",
projectId: "project-name",
storageBucket: "project-name.appspot.com",
messagingSenderId: "............",
appId: ".........",
measurementId: ".....",
}Install the dependencies:
npm install
Run the dev server with:
npm start
Firebase Auth requires HTTPS, so the dev server is set to use HTTPS by default. If you have the server Docker Compose Project running at the same machine, the whole site should work out of the box.
- urql and gql.tada for GraphQL The gql.tada TypeScript generation should work when server Docker Compose is running.
- React Aria Components - Providing Headless React Components
- Open Props for CSS Styling
Bookmarklet is a long story, basically, it will use the src/go.js as the entry, injecting an <iframe> (for live-loading and style resets) loading src/bookmarklet/entry.tsx, and use window.parent to fetch the scores to bypass most CORS issues.
go.js has some development addition, so live reloading shall work with the Dev Server. (it may be changed after Vite updates)
Copyright (c) 2018 - 2025 Otohime Team (Hsiao-Ting Yu and others)
Licensed under MIT license, see LICENSE.md.
Artworks in public/favicon.ico, src/logo, src/dx_intl/images/course_ranks and src/dx_intl/images/class_ranks, src/dx_intl/images/ratings are released separately:
(C) 2021-2023 Akanyan, released under CC-BY 4.0 International
Logos are generated with RealFaviconGenerator.net.