CS Crosshair Site

Back in the good old days of CS:GO, we had the apply_crosshair_code CSGO-... command to allow us to quickly switch crosshairs. With the launch of CS2, this was removed, with no mention as to whether it would be returned or not. So in the meantime, you can use this site to enter in a crosshair code and copy all the crosshair commands to your clipboard to allow you to be able to switch crosshair using the in game console.

You can also store crosshairs on the site, to allow you to be able to switch quickly between preferred crosshairs on the fly mid game.

Tech Stack / Main Packages Used

• NextJs with Typescript
• SWR
• Iron Session
• Mantine Component Library (v6)
• Kysely with kysely-codegen
• Postgres

Prerequisites

You will need to install the following in order to build, run and develop this repo locally:

• git
• Node & npm
  • Alternatively you can download both of these via nvm
• Postgres

Getting Started

1. Create a file at the root level called .env.local, following the .env example file. Fill in the relevant gaps.

2. Install all packages.

   npm i

3. Run the migrate command to initialise your database, and optionally run the db:seed command to seed your database with example data to start off with.

   npm run migrate
   npm run db:seed

4. Run the development server and view the page in your browser at http://localhost:3000.

   npm run dev

Database Commands

• Create a new migration

  npm run migrate:create migration-name

• Run all migrations (NOTE: This will run migrations that have not yet been run)

  npm run migrate

• Generate your database types. You should run this every time after you have run a new migration.

  npm run db:generate

• Run migrations from fresh i.e. after deleting everything in the database (NOTE: This will nuke your database, and run all migrations)

  npm run migrate:fresh

• Run a single migration

  npm run migrate:up

• Revert a single migration (NOTE: This will only revert a single migration at a time. Mainly useful for development)

  npm run migrate:down

• Seed your database (NOTE: This will insert example data into your database. Mainly useful for development)

  npm run db:seed

• Migrate fresh and seed the db in one command. Useful for the dev environment.

  npm run dev:reset-db

Contribution Guide

For simplicity's sake, we are using the issues tab as a way to track tasks that need doing. Feel free to pick up anything from this list and contribute in any way possible!

The major design philosophy to keep in mind when developing anything on this site is to keep the site as lightweight and as performant as possible. Ideally players will be using this site whilst playing CS at the same time, and every frame matters whilst playing, so whenever possible avoid anything overly resource intensive e.g. over the top animations.

Contact Me

If you need any help/want to ask any questions, feel free to reach out to me in any of the following ways:

• Twitter: @shoobie_cs
• Discord: shoobie96