AoM.gg offers real-time leaderboards, in-depth game statistics, and user-generated content such as game replays and YouTube guides. Players can track rankings, analyze match data, and engage with the vibrant strategy gaming community.
Next.js, Vercel, TypeScript, Tailwind CSS, MongoDB, AWS S3, Lambdas
The landing page of AoM.gg features leaderboard statistics, with the ability to filter by game mode or player name. Leaderboard data is refreshed every 3 minutes by a Lambda service that is extracting leaderboard data from the Athens API (see aom-lambda). Top Reddit posts are queried via the Reddit API from r/AgeOfMythology. Featured YouTube Videos are fetched via the YouTube Data API v3, returning 6 of the top viewed Age of Mythology videos from the last 7 days. Live broadcasts and YouTube shorts are filtered out via post processing.
Players can click on their name on the leaderboard to navigate to their profile. Here they can view their personal game stats and match history. Historical match data is extracted via the Athens API and stored in MongoDB by aom-lambda. Since launch in September of 2024, AoM.gg has captured and analyzed over 1 million games!
Players are able to upload recorded game files (.mythrec) that can be downloaded and viewed by other users via the AoM game client. Uploaded files are stored in AWS S3 storage, and are downloaded via signed URLs. Filter options include text search, god selection, map selection, and patch number.
Users can easily share links to uploaded games by clicking on the link button in the bottom right. Games files can also be downloaded, incrementing the total download count. The videos that are downloaded the most are featured on the home page for hightened discovery.
When uploading a file, a sidebar form is displayed to the user.
Users must be signed in via their Steam or Xbox account to upload games. Sign in options include Steam and Xbox via oauth.
Various game statistics are available with filters by skill level and path number. Stats are updated once a day by the and stored to MongoDB (see aom-lambda).
The resources page provides additional information such as hotkey configurations and a taunt repository. This is the home for statically rendered data.
- Download MongoDB Compass from the MongoDB Compass Download Page.
- Install Compass by following the provided instructions.
- Open MongoDB Compass.
- In the connection window, enter your connection string:
- For a local instance, use:
mongodb://localhost:27017 - For a remote instance, use your provided connection string (e.g.,
mongodb+srv://<username>:<password>@cluster.mongodb.net/<dbname>).
- For a local instance, use:
- Click "Connect" to establish the connection.
- Once connected, you can create a new database by clicking on "Create Database" and entering the database name and collection name.
npm install
# or
yarn install
# or
pnpm install
# or
bun installYou will need to set up the following environment variables in your .env file. Depending on what part of the app you are working on, you probably do not need a majority of these variables, other than MongoDB.
YOUTUBE_API_KEY=
MONGO_USER=
MONGO_PASSWORD=
MONGODB_URI=
MONGO_APPNAME=
MONGO_HOST=
AWS_REGION=
AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
NEXT_PUBLIC_S3_REC_BUCKET_NAME=
NEXT_PUBLIC_S3_SETTINGS_BUCKET_NAME=
NEXT_PUBLIC_BASE_URL=
REDDIT_CLIENT_ID=
REDDIT_SECRET=
USER_AGENT='aom.gg/1.0 by FitzBro'
AUTH_SECRET=
AUTH_XBOX_SECRET=
AUTH_XBOX_ID=
AUTH_STEAM_KEY=
NEXT_PUBLIC_GOOGLE_ADSENSE_ID=
Then, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev