Website https://coh3stats.com/
We are looking not only for developers but anyone who would like to contribute in building the best site with most info for Company of Heroes 3. All the data will be open source for anyone to use! We need people to get the data from the game / organize the data. Come up with layouts and much more.
Anyone can put a hand in building this site. Please consider joining our Discord.
We have open sourced our underlying data https://coh3stats.com/other/open-data
- Leaderboards, Matches << which we scrape and get from Relic API
- Data (definitions / images ) which << which we get from the game files
Master branch is deployed to https://dev.coh3stats.com/
First install dependencies:
yarn install
Run the development server:
yarn dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying pages/index.tsx
. The page auto-updates as you edit the file.
Before making an MR please create an issue describing what you want to change and how you want to change it so we can have some discussion. Furthermore, it avoids multiple people working on the same thing.
Feel free to create a fork and make an MR. Before PR you can test your code with yarn build
to make sure it builds.
Also make sure the prettier is right yarn fix
and yarn test
Development conventions:
- Name the files with
-
instead of camelCase. Egcolor-scheme-toggle.tsx
- Try not to add any more eslint warnings (Don't worry if you don't know how to solve it though, we can solve on MR)
- Prettier and eslint should cover the rest (Don't forget to run it)
- We are using Mantine component library
Maps are specified in https://github.com/cohstats/coh3-stats/blob/master/src/coh3/coh3-data.ts#L284
You can use the function getIconsPathOnCDN where you can pass the image name or the full path and it should automatically resolve it on our hosting https://github.com/cohstats/coh3-stats/blob/master/src/utils.ts#L22 If the image is not found there, you can always add it to the /public folder.
- Go to https://github.com/cohstats/coh3-data and generate the new data as per readme
- Create a new tag in coh3-data as per readme
- Update config.ts in the root 4. Add the patch into object patches 5. Update latestPatch variable with the key of the new patch
- Run the project and verify that all pages work as expected
We should also run this after the patch update.
- Run
yarn build
- Run
yarn sitemap
- Check changes in
public/sitemap.xml
- If the pages are not there, you can add them manually in
next-sitemap.config.js
- Commit the changes
For more info see readme at https://www.npmjs.com/package/next-sitemap
We have a special script for that.
- You need Node 19
- Run
npx ts-node --compiler-options "{\"module\":\"commonjs\"}" scripts/unit-paths.ts > paths.txt
- Copy the content of
paths.txt
and paste it intonext-sitemap.config.js
https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props.
Example pages:
- Home Page
- Player Cards
- Leaderboards
- ...
- Generally any page which loads data from DB or API
Example pages:
- Unit Stats
- ...
- Generally any page which doesn't load any data from API
- Because it's a public website, SSR pages will be much better read by search engines and it will provide an overall better experience.
- All the data fetching (from DB, cloud functions and other) should happen in SSR, so that we can offer site avaliabily everywhere, as GCP services are blocked in some countries ( China, Russia).
- The SSR functions have the capability to connect to public APIs, retrieve data from Firestore, and invoke cloud functions when necessary.
- The SSR functions should remain lightweight. For extensive data computations, utilize Cloud Functions on GCP, enabling performance control.
- The complete source code for our Next.js frontend will be available in this repository and will be open source.
- The BE of the CF will be closed source because, we will most likely connect to sensitive APIs.
App platform:
- Firebase
Frontend:
- NextJS (React) as main technology used
- Edgio as a hosting platform
- Mantine as a component library
Backend:
- GCP Cloud
- Firebase Cloud Functions - in TypeScript
- Database:
- Firestore - stats, players, matches
- GCP Storage (leaderboards, matches)
- cdn.coh3stats.com - Contains all the images | hosted on Firebase hosting
- storage.coh3stats.com - Contains matches and leaderboards | hosted on GCP Storage
- cache.coh3stats.com - Cache for API calls
- data.coh3stats.com - CDN for the data files hosted at Github - coh3-data repo
To learn more about Next.js, have a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.