A Vue.js project that allows users to compare their rust stats with other users / members of their team

by Vue.js Examples

Compare & View Rust Stats

Project Description

This is a small project that leverages the Steam API to compare users Rust statistics. Whether you’re a solo player or part of a group, you can use this app to keep track of your stats and compare them with other players.

Try it here!

I have used Vue.js and Pinia to create this project. The bulk of the code to retrieve, compare and store stats can be seen within StatStore.ts. In addition, StatViewer.vue is the main component for rendering statistics to the page.

How to Use

Use the search bar and insert a URL in one of the following formats:

After submitting the profile, data about that profile will be shown, to compare stats against other users add more URLs.

Install Guide

  1. Clone this repository on your machine using the following command:

git clone https://github.com/not-nic/ruststatscompare.git
cd ruststatscompare
  1. Navigate to the project and install the required dependencies using:
npm install
  1. To access user statistics from steam you will require an API key from here. After creating an API key, create a file called .env.development.local, within this file use VITE_API_KEY= with your own API key.

# .env.development.local
VITE_STEAM_API_KEY=YOUR_KEY_HERE
  1. Start a development server by using:
npm run dev
  1. Access the app by visiting http://localhost:5173/

Deployment

Building the Application

if you want to build this application for deployment follow these steps:

  1. Create a .env.production file for your API key:

# .env.production
VITE_STEAM_API_KEY=YOUR_KEY_HERE
  1. Run npm preview to check everything works.
npm run preview
  1. Build the application:
npm run build
  1. Copy the files from the created dist or follow this guide.

Apache2

if you decide to build and deploy the project using apache2, ensure you have created a .htaccess file

RewriteEngine On
RewriteRule ^api/(.*) http://api.steampowered.com/$1 [P]

Contributing

If you’d like to contribute your own features, follow the steps below:

  1. Fork it.
  2. Create your feature branch: git checkout -b my-new-feature
  3. Add your changes: git add .
  4. Commit your changes: git commit -am 'Add some feature'
  5. Push to the branch: git push origin my-new-feature
  6. Submit a pull request.

GitHub

View Github