Steam Inventory Worth Calculator is an open-source Next.js web app that lists a Steam user's public inventory and calculates its total value using Steam Community Market prices via the free steamwebapi.com API. It runs on Vercel Edge Functions, keeping the API key out of the client, and is styled with Tailwind CSS, Chakra UI, and DaisyUI.
What is the Steam Inventory Worth Calculator?
The Steam Inventory Worth Calculator is a working React project that takes a Steam inventory and returns a list of items with individual market prices plus a summed total worth. It is not a UI-only template; the repository includes the API integration layer that fetches inventory data and price data from steamwebapi.com. The live demo at https://inventory.steamwebapi.com runs the original code, while https://www.csbackpack.net is a forked deployment.
Key Features
- Inventory fetching — Pulls the full public inventory of any Steam user through the steamwebapi.com API, including marketable items.
- Community Market pricing — Retrieves the current Steam Community Market price for each item so the total reflects real buy/sell values.
- Total worth calculation — Sums all item prices into a single inventory value, which is the core output of the app.
- Vercel Edge Functions — Moves API calls to Vercel's edge runtime, so the API key is stored server-side in environment variables and never exposed in the frontend bundle.
- Configurable environment — Requires an API key in the .env file for local development; without it the app displays an error, and for Vercel deployments the variables must be added in the project settings.
- Component library mix — Combines Tailwind CSS with DaisyUI and Chakra UI component libraries, giving builders ready-made UI components and utility classes.
- Local development — Run
npm run devto start the Next.js development server and open http://localhost:3000. - Open contribution model — The repository invites pull requests and lists planned additions such as MongoDB-backed crawl history, SEO improvements, mobile support, and an item inspect feature.
Who is it for?
- CS:GO and Steam skin traders who want to self-host a tool to quickly value inventories without manually checking each market listing.
- Next.js developers who need a concrete example of server-side API calls using environment variables and edge functions, along with a real REST API integration.
- Open-source contributors who want a small, focused utility project with a defined roadmap and a welcoming contribution process.
Use cases
- Gamers: paste a Steam profile to see the combined market value of their CS:GO skins and other tradable items.
- Developers: fork the project and use steamwebapi.com as a reference for building other Steam data tools, since the price and inventory endpoints are already wired in.
- Event organizers: for a community trade or giveaway, quickly estimate the total value of an inventory or prize pool.
How does the Steam Inventory Worth Calculator work?
The app relies on the steamwebapi.com API for both data sources: first it requests the user's inventory, then it fetches the Community Market price for each item, and finally it sums the values into a total. The API key is read from environment variables and used inside Vercel Edge Functions, which keeps it secure and allows the frontend to run without credentials.
FAQ
Does the Steam Inventory Worth Calculator require an API key?
Yes. The app errors if no API key is present. For local runs, add the key to the .env file; for Vercel, add the environment variables in the Vercel project settings because edge functions use them server-side.
Is the steamwebapi.com API free?
The repository describes steamwebapi.com as a free Steam API service that provides inventory data and Community Market item prices. No paid tiers or usage quotas are mentioned in the readme.
What tech stack is this built with?
The project uses Next.js as the React framework, Tailwind CSS for utility-first styling, DaisyUI as a Tailwind-based component library, and Chakra UI for additional React components. It is deployed on Vercel with edge functions.
Can I contribute to this project?
Yes. The readme explicitly invites contributions by forking the repository and opening a pull request. The project also lists open todos, including adding MongoDB crawl history, improving SEO, enhancing mobile support, and adding an item inspection feature.
Is there a live demo?
Yes. The original repository's demo is hosted at https://inventory.steamwebapi.com, and a forked version is live at https://www.csbackpack.net. Both run the same inventory value calculator.
