{"id":28490706,"url":"https://github.com/dawidolko/workplayhub-vue-typescript","last_synced_at":"2026-02-07T17:32:25.644Z","repository":{"id":293108108,"uuid":"982972849","full_name":"dawidolko/WorkplayHub-Vue-TypeScript","owner":"dawidolko","description":"A responsive Vue.js and TypeScript application showcasing my gaming and office workspace setup. Built with modern frontend architecture including Vue 3, TypeScript, and Pinia for state management, this project demonstrates clean component structure and responsive design principles.","archived":false,"fork":false,"pushed_at":"2025-05-28T19:05:07.000Z","size":65440,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-04T16:27:00.147Z","etag":null,"topics":["battlestation","computers","gaming","laptops","workspace"],"latest_commit_sha":null,"homepage":"https://workplayhub.dawidolko.pl/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dawidolko.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-13T17:21:28.000Z","updated_at":"2025-05-28T19:05:11.000Z","dependencies_parsed_at":"2025-05-13T18:49:36.214Z","dependency_job_id":null,"html_url":"https://github.com/dawidolko/WorkplayHub-Vue-TypeScript","commit_stats":null,"previous_names":["dawidolko/workplayhub-vue-typescript"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dawidolko/WorkplayHub-Vue-TypeScript","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dawidolko%2FWorkplayHub-Vue-TypeScript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dawidolko%2FWorkplayHub-Vue-TypeScript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dawidolko%2FWorkplayHub-Vue-TypeScript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dawidolko%2FWorkplayHub-Vue-TypeScript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dawidolko","download_url":"https://codeload.github.com/dawidolko/WorkplayHub-Vue-TypeScript/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dawidolko%2FWorkplayHub-Vue-TypeScript/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265508236,"owners_count":23779102,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["battlestation","computers","gaming","laptops","workspace"],"created_at":"2025-06-08T07:10:00.801Z","updated_at":"2026-02-07T17:32:25.638Z","avatar_url":"https://github.com/dawidolko.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# BattleStation-Vue-TypeScript\n\n\u003e 🚀 **Interactive Gaming Setup Showcase with Vue.js \u0026 TypeScript** - Build responsive portfolio websites for hardware enthusiasts and gamers\n\n## 📋 Description\n\nWelcome to the **BattleStation-Vue-TypeScript** repository! This project showcases an interactive portfolio for visualizing complete gaming and productivity workspace setups. Built with Vue.js 3 and TypeScript, the application features detailed component specifications, interactive views, and comprehensive hardware breakdowns with modern UI, smooth transitions, and responsive design.\n\nThis repository demonstrates advanced Vue.js development with TypeScript, state management with Pinia, and modern build tools for hardware showcase platforms. Perfect for PC enthusiasts, gamers, and anyone wanting to showcase their battlestation setup professionally.\n\n## 📁 Repository Structure\n\n```\nBattleStation-Vue-TypeScript/\n├── 📁 src/\n│   ├── ⚛️ components/         # Reusable Vue components\n│   │   ├── 🔘 Buttons/        # Button components\n│   │   ├── 🧭 navigation-global.vue\n│   │   └── 🦶 footer-global.vue\n│   ├── 📊 data/               # Hardware data and utilities\n│   │   ├── ⚙️ battlestation-data.ts    # Hardware specifications\n│   │   └── 🛠️ battlestation-utils.ts   # Data manipulation utilities\n│   ├── 📄 pages/              # Application pages\n│   │   ├── 🏠 Landing/        # Home page with overview\n│   │   ├── 📂 Category/       # Hardware category pages\n│   │   ├── 🖥️ Setup/          # Complete setup overview\n│   │   ├── 🔧 Components/     # All components page\n│   │   └── 📋 Specs/          # Technical specifications\n│   ├── 🛣️ routes/             # Vue Router configuration\n│   └── 🎨 assets/             # Static assets and styles\n├── 📦 package.json           # Project dependencies and scripts\n└── 📖 README.md              # Project documentation\n```\n\n## 🚀 Getting Started\n\n### 1. Clone the Repository\n\n```bash\ngit clone https://github.com/dawidolko/WorkplayHub-Vue-TypeScript.git\ncd WorkplayHub-Vue-TypeScript\n```\n\n### 2. Install Dependencies\n\n```bash\nnpm install\n```\n\n### 3. Start Development Server\n\n```bash\nnpm run dev\n\n# Alternative startup scripts:\n# For Linux/Mac: ./start.sh\n# For Windows: start.bat\n```\n\n## ⚙️ System Requirements\n\n### **Essential Tools:**\n\n- **Node.js** (version 16.0 or higher)\n- **npm** or **yarn** package manager\n- **Modern Web Browser** (Chrome, Firefox, Safari, Edge)\n- **Git** for version control\n\n### **Development Environment:**\n\n- **Code Editor** (VS Code, WebStorm, Sublime Text)\n- **Vue.js DevTools** browser extension\n- **TypeScript** language server\n- **Vite** development server (included)\n\n### **Recommended Extensions:**\n\n- **Vue.js** syntax highlighting (Vetur or Volar)\n- **TypeScript** support and IntelliSense\n- **Tailwind CSS** IntelliSense\n- **Prettier** for code formatting\n- **ESLint** for code quality\n\n### **Vue.js + TypeScript Ecosystem:**\n\n- **Vue 3** with Composition API\n- **TypeScript** for static typing\n- **Pinia** for state management\n- **Vue Router 4** for navigation\n- **Tailwind CSS** for styling\n- **Vite** for build tooling\n\n### **Testing \u0026 Quality Tools:**\n\n- **Cypress** for E2E testing\n- **ESLint** and **Prettier** for code quality\n- **Unhead** for SEO optimization\n- **VueUse** for composition utilities\n\n## ✨ Key Features\n\n### **🖥️ Interactive Hardware Showcase**\n\n- Comprehensive gaming and productivity setup visualization\n- Detailed PC specifications: Ryzen 7 5800X, RTX 3060Ti, 64GB RAM\n- MacBook Pro M3 mobile workstation details\n- Professional audio equipment and peripherals showcase\n\n### **🎮 Gaming-Focused Design**\n\n- Modern UI with gaming-inspired aesthetic and yellow accent colors\n- Smooth animations and transitions for interactive elements\n- Responsive design optimized for all device sizes\n- Touch-friendly navigation for mobile hardware browsing\n\n### **⚡ Advanced Technical Features**\n\n- Full TypeScript integration with comprehensive type safety\n- Pinia state management for component showcase data\n- Dynamic routing with Vue Router 4 for hardware categories\n- SEO optimization with structured data and meta tags\n\n### **📱 Responsive \u0026 Performance Optimized**\n\n- Mobile-first approach with touch-friendly interactions\n- Lazy loading for hardware images and components\n- Code splitting for faster initial load times\n- WebP image optimization for better performance\n\n### **🔧 Professional Development Stack**\n\n- Component-based Vue 3 architecture with Composition API\n- Modular SCSS organization with Tailwind CSS utilities\n- Comprehensive testing with Cypress E2E framework\n- Modern build tooling with Vite for lightning-fast development\n\n## 🛠️ Technologies Used\n\n- **Vue.js 3** - Progressive JavaScript framework with Composition API\n- **TypeScript** - Static typing for enhanced development experience\n- **Pinia** - Intuitive state management for Vue applications\n- **Vue Router 4** - Official routing with dynamic navigation\n- **Tailwind CSS** - Utility-first CSS framework\n- **Vite** - Next-generation build tooling\n- **Cypress** - Modern E2E testing framework\n- **Unhead** - Document head management for SEO\n\n## 🌍 Live Demo\n\nThe project is deployed and available at: **[https://workplayhub.dawidolko.pl](https://workplayhub.dawidolko.pl)**\n\n## 🖼️ Preview\n\n![BattleStation Showcase](img/screen_page.png)\n\n## 📝 Available Scripts\n\n```bash\nnpm run dev       # Start development server\nnpm run build     # Build for production\nnpm run preview   # Preview production build\nnpm run test      # Run Cypress tests\n```\n\n## 🚀 Deployment\n\n```bash\n# Build for production\nnpm run build\n\n# Deploy the dist/ folder to your hosting provider\n# Recommended: Vercel, Netlify, or GitHub Pages\n```\n\n## 🤝 Contributing\n\nContributions are highly welcomed! Here's how you can help:\n\n- 🐛 **Report bugs** - Found an issue? Let us know!\n- 💡 **Suggest improvements** - Have ideas for better features?\n- 🔧 **Submit pull requests** - Share your enhancements and solutions\n- 📖 **Improve documentation** - Help make the project clearer\n\nFeel free to open issues or reach out through GitHub for any questions or suggestions.\n\n## 👨‍💻 Author\n\nCreated by **[Dawid Olko](https://github.com/dawidolko)**\n\n- **Website** - [dawidolko.pl](https://dawidolko.pl/)\n- **LinkedIn** - [@dawidolko](https://www.linkedin.com/in/dawidolko/)\n\n## 📄 License\n\nThis project is open source and available under the [MIT License](LICENSE).\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdawidolko%2Fworkplayhub-vue-typescript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdawidolko%2Fworkplayhub-vue-typescript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdawidolko%2Fworkplayhub-vue-typescript/lists"}