React + Vite

This project is a Vite + React personal site with Spotify, GitHub, and Steam activity widgets.

Run locally

From the project root:

pnpm install
pnpm dev

This starts the Vite dev server, usually at http://localhost:5173/.

Run with API routes

The activity section calls serverless API routes for Spotify, GitHub, and Steam. To test those locally, use the Vercel dev server:

pnpm run dev:full

This expects the following env vars in .env or .env.local:

SPOTIFY_CLIENT_ID=...
SPOTIFY_CLIENT_SECRET=...
SPOTIFY_REFRESH_TOKEN=...
GITHUB_USERNAME=DeveshKrishan
# Optional, helps with GitHub rate limits:
GITHUB_TOKEN=...
STEAM_WEB_API_KEY=...
STEAM_ID=76561198...
# Optional alternative to STEAM_ID:
# STEAM_VANITY_URL=yourname

If you only run pnpm dev, the UI will still load, but the API routes will not be available locally.

Steam setup

See scripts/steam-resolve-id.md for full steps. In short:

1. Get a Web API key at steamcommunity.com/dev/apikey.
2. Find your SteamID64 (from your profile URL or via vanity URL resolution).
3. Set Game details to Public in Steam privacy settings.

The Steam widget shows games played in the last 2 weeks only.

Changesets workflow

This project uses Changesets to track changes and manage versions.

Create a changeset

After making changes you want to release:

pnpm run cs:prepare

Follow the prompts to select the release type and add a summary.
This creates a file in the .changeset directory describing the change.

Apply versions and update changelog

When you are ready to cut a new version:

pnpm run cs:version

This will:

• Bump the version in package.json
• Generate or update CHANGELOG.md

Then commit and push the changes:

git add .
git commit -m "chore: release"
git push

Git hooks & commit style

This project uses Husky and Commitlint to enforce commit message style and run checks before commits.

Setup (one time)

From the my-project directory:

pnpm install

This runs husky install via the prepare script and sets up Git hooks.

Hooks

• pre-commit: runs pnpm lint
  • Prevents commits if ESLint fails.
• commit-msg: runs Commitlint with the conventional config
  • Ensures commit messages follow the Conventional Commits standard.

Commit message examples

Valid examples:

• feat: add dashboard cards
• fix: handle null data in chart
• chore: update dependencies
• docs: add setup instructions

If a commit message does not follow this format, the commit will be rejected until the message is fixed.

Formatting

This project uses Prettier for code formatting.

To format the source files (React components, JS/TS, CSS, and Markdown), run:

pnpm format:fix

This will run Prettier with the project’s config and write changes to disk.