Skip to content

Build steam dashboard page #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
smile4fun1 wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Build steam dashboard page #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 27 additions & 52 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
4 changes: 2 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>InnoTech Solutions</title>
<title>Steam spending dashboard</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700&display=swap" rel="stylesheet" media="print" onload="this.media='all'">
<style>
/* Inline critical CSS */
Expand Down Expand Up @@ -55,6 +55,6 @@
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
Loading