SteamShare

Steam screenshot and inventory management platform with integrated gallery organization and canvas editing. Built with Next.js 14 on the Steam Web API and created using next-temploot.

Features seamless Steam authentication, real-time friend activity, and advanced collage creation tools.

Core Features

• Steam Integration - Seamless login, inventory sync, and friend activity
• Screenshot Gallery - Browse and manage your Steam screenshots
• Inventory System - View and filter game items with rarity display
• Canvas Editor - Professional editing tools powered by Fabric.js
• Friend System - View and interact with Steam friends' content

Project Structure

src/
├── app/              # Next.js app router
│   ├── dashboard/    # Screenshot management
│   ├── editor/      # Canvas editor
│   ├── inventory/   # Item management
│   ├── steam/       # Steam integration
│   └── api/         # API endpoints
├── components/       # React components
├── context/         # React context
├── hooks/           # Custom hooks
├── tools/           # Canvas tools
│   ├── drawing/     # Drawing tools
│   └── filters/     # Image filters
└── types/           # TypeScript types

Tech Stack

• Framework - Next.js 14, React 18
• Canvas - Fabric.js 6.5
• Styling - Tailwind CSS, Framer Motion
• Forms - React Hook Form, Zod
• UI - Lucide Icons, CVA
• Dev Tools - TypeScript, ESLint, Prettier

Development

npm install
npm run dev

Requires STEAM_API_KEY in .env.local

License

MIT