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.

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 / how you want to change it. So we can have some discussion, also it avoids multiple people working on the same thing.

Feel free to create fork and make MR. Before PR you can test your code with yarn build to make sure it can be build. Also make sure the prettier is right yarn fix and yarn test

Development conventions:

• Name the files with - instead of camelCase. Eg color-scheme-toggle.tsx
• Try not to add anymore eslint warnings if possible (Don't worry if you don't know how to solve it though)
• Prettier and eslint should cover the rest

Maps are specified in https://github.com/cohstats/coh3-stats/blob/master/src/coh3/coh3-data.ts#L284

You can use 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.

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 public website, SSR pages will be much better readed by search engines and generally it will provide better experience
• All the data fetching (from DB, cloud functions and other) should happen in SSR, because GCP services are blocked in some countries ( China, Russia), that way we can offer site avaliabily everywhere.
• The SSR functions can connect to some public APIs and will fetch the data from Firestore and may call some cloud functions
• The SSR functions should be "light weight" if we need to run some big data computations we should do so Cloud Functions on GCP where we can control the performance
• The whole source code for NextJS will be in this repo and will be open source
• The BE of the CF will be closed source because, we will most likely connect to sensitive APIs

1. Go to https://github.com/cohstats/coh3-data and generate the new data as per readme
2. Create a new tag in coh3-data as per readme
3. Update config.ts in the root 4. Add the patch into object patches 5. Update latestPatch variable with the key of the new patch
4. Run the project and verify that all pages work as expected

We should also run this after the patch update.

1. Run yarn build
2. Run yarn sitemap
3. Check changes in public/sitemap.xml
4. If the pages are not there, you can add them manually in next-sitemap.config.js
5. Commit the changes

For more info see readme at https://www.npmjs.com/package/next-sitemap

We have special script for that.

1. You need Node 19
2. Run

npx ts-node --compiler-options "{\"module\":\"commonjs\"}" scripts/unit-paths.ts > paths.txt

3. Copy the content from paths.txt and paste it into next-sitemap.config.js

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 - for basic data
  • Other DB? We might need a different DB for storing the info - as we might expect high amount of reads / writes -- not perfect for FireStore
  • Big Query - for stored matches (we need to do pricing calculations on this)

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.