From c25771144ce41b9b70d9aa5ca95e6a2c41041508 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Thu, 11 Dec 2025 11:54:26 +0000 Subject: [PATCH] Refactor: Implement Steam spending dashboard Co-authored-by: kimzor21 --- README.md | 79 +++------ index.html | 4 +- package-lock.json | 429 +++++++++++++++++++++++++++++++++++++++++++--- package.json | 3 +- src/App.jsx | 256 +++++++++++++++++++++++++++ src/App.tsx | 66 ------- src/index.css | 39 +---- src/main.jsx | 10 ++ src/main.tsx | 10 -- src/steamData.js | 61 +++++++ 10 files changed, 772 insertions(+), 185 deletions(-) create mode 100644 src/App.jsx delete mode 100644 src/App.tsx create mode 100644 src/main.jsx delete mode 100644 src/main.tsx create mode 100644 src/steamData.js diff --git a/README.md b/README.md index a880ea9..e9a462c 100644 --- a/README.md +++ b/README.md @@ -1,66 +1,41 @@ -# InnoTech Solutions Website +# Steam Spending Dashboard -This project is a modern, single-page website for InnoTech Solutions, a fictional tech company. It's built using React, TypeScript, and Vite, showcasing various interactive elements and smooth animations. +Analytics dashboard for Steam purchase history. Visualises real card charges and refunds, excluding internal wallet movements and market activity. -## Features +## Install -- Responsive design that works on desktop and mobile devices -- Interactive sections including: - - Hero section with parallax effect - - Features showcase with modal popups - - Interactive portfolio with filtering and project details - - Process timeline with expandable steps - - Product demo carousel - - Awards and recognition section - - Client testimonials - - Call to action section -- Smooth scrolling navigation -- Animated transitions using Framer Motion -- Back to top button -- Optimized for performance with lazy loading and code splitting - -## Technologies Used - -- React 18 -- TypeScript -- Vite -- Tailwind CSS -- Framer Motion -- React Router -- React Icons -- Headless UI +```bash +npm install +``` -## Prerequisites +## Run -Before you begin, ensure you have the following installed: -- Node.js (v14 or later) -- npm (v6 or later) +```bash +npm run dev +``` -## Getting Started +Open `http://localhost:5173` -1. Clone the repository: - ``` - git clone https://github.com/your-username/innotech-solutions-website.git - cd innotech-solutions-website - ``` +## Build -2. Install dependencies: - ``` - npm install - ``` +```bash +npm run build +``` -3. Start the development server: - ``` - npm run dev - ``` +## Architecture -4. Open your browser and visit `http://localhost:5173` to view the website. +- **React + Vite**: Core framework +- **Recharts**: Charts and data visualisation +- **Tailwind CSS**: Styling +- **Pre-computed data**: `src/steamData.js` contains all metrics; no runtime parsing required -## Building for Production +## Data structure -To create a production build, run: -``` -npm run build -``` +The dashboard uses pre-aggregated data: +- Total charges, refunds, net spend +- Wallet topups vs direct card purchases +- Per-year and per-month breakdowns +- Largest single purchase +All values derived from Steam account history export with wallet transactions and market activity filtered out. diff --git a/index.html b/index.html index 91e5482..4d6de40 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - InnoTech Solutions + Steam spending dashboard