This is a DayZ leaderboard website created with NextJS using data collected and provided by the CFTools Data API. Originally funded by TwoPigs from The Traveller who's always looking to give to the community, here it is, open-source and ready for you to host.
😎 Have any questions or just want to chill/have a chat? Come join our support server
💡 Have any feedback or feature suggestions? Create a new issue
A demo deployment showcasing this project can be found here
- Shows the top 100 leaderboard for your DayZ server
- Query by in-game name or Steam64/CFTools ID if you're not on the leaderboard
- Display detailed player statistics
- Very customizable, from theming to branding - there's a configuration value to customize it to your wants and needs
- Manual single and multiple server configuration, or automatically resolve server grants directly from the CFTools API
- Social media previews (and directly rich Search Engine Optimization) to preview your community
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.
TLDR: Fork the repo, authorize Vercel to manage your fork and watch it deploy the site to a live domain for you.
- Download and extract the latest release and navigate to the newly created folder
- Rename
.env.exampleto.env(make sure displaying file extensions is enabled) and fill in your configuration. The only required variables are:CFTOOLS_API_APPLICATION_ID: Application ID from your CFTools Developer Apps - Authorization has to be granted by navigating to theGrant URLthat's displayed in your app overviewCFTOOLS_API_SECRET: Same as above, clickReveal SecretCFTOOLS_SERVER_API_ID: ClickManage Serverin your CF Cloud Panel >Settings>API Key>Server ID
- Rename
config.example.jsontoconfig.jsonand customize the project to your hearts content - Run the following commands in this exact order:
# Install dependencies
npm install
# Build the project
npm run build
# Start the project
npm run startThe project is now available on port 3002. This is only available on your local network.
To allow anyone to reach your website basic knowledge of web-servers (like Apache or Nginx) is required.
- An example Nginx file is included for your convenience here.
- With this conf Nginx serves all static assets, if these fail to load (like no styles applied to the website) use the minimal conf instead
SKVAD example configuration and branding will be used throughout the project.
# CFTools API Credentials - The ONLY required values here
# CFTOOLS_SERVER_API_ID will only be used AS THE DEFAULT
# when using multiple server setup in the config file
CFTOOLS_API_APPLICATION_ID=
CFTOOLS_API_SECRET=
CFTOOLS_SERVER_API_ID=
# Runtime Environment - production/development/staging
NODE_ENV=production
# Development-only - Analyze the app bundle
ANALYZE=true
# If provided, uses these values for the og:image meta tag (discord embed link previews)
# If omitted, uses your branding logo from the config file as a small image
NEXT_PUBLIC_IMAGE_URL=
NEXT_PUBLIC_LARGE_OG_IMAGE=falseThese are the default values with a bit of an explanation, but comments (lines starting with
//are not valid in JSON - so don't copy-paste this into your live application. This is but a reference.)
Values marked with (*) use static files that are automatically served from the /public folder. If you change BRANDING_LOGO_FILE_NAME to logo.jpeg, that file should exist in the /public folder
❗Don't use this! Use the example configuration file instead ❗
{
// Branding
"BRANDING_NAME": "SKVAD Community",
"BRANDING_URL": "https://discord.gg/skvad",
(*) "BRANDING_LOGO_FILE_NAME": "logo.png",
// Branding Color/Theme
"BRANDING_THEME_COLOR": "#00FFFF",
"BRANDING_TEXT_BRAND_COLOR": "#0070f3",
"BRANDING_TEXT_LEADERBOARD_COLOR": "#FFF",
"BRANDING_BORDER_COLOR": "#000",
// Page Meta (Search Engine Optimization and Social Media Previews)
"PAGE_TITLE": "SKVAD Community",
"PAGE_SUB_TITLE": "DayZ",
"PAGE_DESCRIPTION": "DayZ Leaderboard for SKVAD Community. Browse the top players, and display your own detailed player statistics.",
// Community referral/entry button
"COMMUNITY_BUTTON_USE_DISCORD_LOGO": true,
"COMMUNITY_BUTTON_INVITE_LINK": "https://discord.gg/skvad",
"COMMUNITY_BUTTON_TEXT": "Join our Discord!",
// Background image
"USE_BACKGROUND_IMAGE": true,
(*) "BACKGROUND_IMAGE_FILE_NAME": "background.png",
"DEFAULT_BACKGROUND_COLOR": "#121212",
"OVERLAP_BACKGROUND_AND_NAVBAR": true,
"NAVBAR_BACKGROUND_COLOR": "rgba(0,0,0,.7)",
// Page Scroll Indicator
"USE_SCROLL_INDICATOR": true,
"SCROLL_INDICATOR_COLOR": "#FFF",
"SCROLL_INDICATOR_BACKGROUND_COLOR": "grey",
// The default value to sort by when landing on the page,
// value is REQUIRED in the next LEADERBOARD_ALLOWED_SORT_VALUES array
"LEADERBOARD_DEFAULT_SORT_VALUE": "kdratio",
// Allowed values to sort by in the dropdown menu
"LEADERBOARD_ALLOWED_SORT_VALUES": [
"kdratio", "kills", "deaths",
"longest_kill", "longest_shot", "playtime",
"suicides"
],
// Creates a dropdown menu to select servers, if false - only the default server from the .env file is served
"USE_MULTIPLE_SERVER_CONFIGURATION": true,
// Multiple, manual, server configuration
// Only active when USE_MULTIPLE_SERVER_CONFIGURATION is true
"CFTOOLS_DAYZ_SERVERS": [
{
"NAME": "Server #1",
"SERVER_API_ID": "Your secret server API ID O;"
},
{
"NAME": "Server #2",
"SERVER_API_ID": "Your secret server API ID O;"
}
],
// This prevents players in the blacklist from being queried,
// displaying their detailed player stats
"ALLOW_PLAYER_STATISTICS_FOR_BLACKLIST": false,
// Filters out specific id's/players from being shown on the leaderboard
// HAS to be CFTools id, if a steam64 is supplied,
// the player will only be blacklisted from detailed player stats, NOT the leaderboard page
// Particularly useful for admins
"BLACKLISTED_CFTOOLS_IDS": [
"ID_1",
"ID_2"
]
}If you're getting net::ERR_ABORTED 404 errors, that means you have created a new production build (npm run build) but the process listening on your port is still trying to serve previous build files - fix this by restarting your process.
👤 Richard Hillebrand (Mirasaki)
- Website: https://mirasaki.dev/
- Github: @Mirasaki
Contributions, issues and feature requests are welcome!
Feel free to check issues page.
Give a ⭐️ if this project helped you!
Copyright © 2023 Richard Hillebrand (Mirasaki).
This project is MIT licensed.