Skip to main content
Get Version Counter up and running on your local machine in minutes. This guide will take you from cloning the repository to viewing the live countdown timers in your browser.

​
Prerequisites

Before you begin, ensure you have the following installed:
  • Node.js (v18 or higher)
  • pnpm (recommended package manager)
If you don’t have pnpm installed, you can install it globally with npm install -g pnpm

​
Installation

1

Clone the repository

Clone the Version Counter repository to your local machine:
git clone https://github.com/your-org/version-counter.git
cd version-counter
2

Install dependencies

Install all required packages using pnpm:
pnpm install
This will install the following key dependencies:
  • Astro - The web framework
  • React - For interactive components
  • Tailwind CSS - For styling
3

Start the development server

Launch the development server:
pnpm dev
The application will start at http://localhost:4321
4

View the application

Open your browser and navigate to http://localhost:4321. You should see the Version Counter dashboard with live countdown timers for all supported games.

​
What You’ll See

Once the dev server is running, you’ll see the main dashboard displaying countdown timers for:
  • Genshin Impact - Current version 6.4, countdown to 6.5
  • Honkai Star Rail - Current version 4.0, countdown to 4.1
  • Wuthering Waves - Current version 3.1, countdown to 3.2
  • Zenless Zone Zero - Current version 2.6, countdown to 2.7
Each game card shows:
  • Real-time countdown to the next version release
  • Current and upcoming version numbers
  • Version theme and banner image
  • Links to official patch notes

​
Available Scripts

The project includes several npm scripts for different tasks: 
pnpm dev
ScriptDescription
pnpm devStarts the development server with hot reload
pnpm buildBuilds the project for production
pnpm previewPreviews the production build locally
pnpm astroRuns Astro CLI commands

​
Project Structure

Here’s what you’ll find in the source code: 
src/
├── components/
│   ├── react/
│   │   └── Counter.tsx          # Real-time countdown component
│   ├── GameCard.astro            # Individual game card display
│   ├── Header.astro              # Site header
│   └── Footer.astro              # Site footer
├── data/
│   └── games.json                # Game version data and configuration
├── pages/
│   ├── index.astro               # Main dashboard page
│   └── games/                    # Individual game pages
│       ├── genshin.astro
│       ├── hsr.astro
│       ├── wuwa.astro
│       └── zzz.astro
└── layouts/
    └── Layout.astro              # Base layout template
The games.json file in src/data/ contains all the version information, release dates, and configuration for each game. This is the primary file you’ll edit when updating version information.

​
Next Steps

Now that you have Version Counter running locally, you can:
The development server includes hot module replacement (HMR), so any changes you make to the source code will automatically reload in your browser.

Build docs developers (and LLMs) love

Get started for freeTalk to us