https://github.com/dawidolko/workplayhub-vue-typescript
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.
https://github.com/dawidolko/workplayhub-vue-typescript
battlestation computers gaming laptops workspace
Last synced: 4 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/dawidolko/workplayhub-vue-typescript
- Owner: dawidolko
- License: mit
- Created: 2025-05-13T17:21:28.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-05-28T19:05:07.000Z (about 1 year ago)
- Last Synced: 2025-07-04T16:27:00.147Z (12 months ago)
- Topics: battlestation, computers, gaming, laptops, workspace
- Language: Vue
- Homepage: https://workplayhub.dawidolko.pl/
- Size: 62.4 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# BattleStation-Vue-TypeScript
> 🚀 **Interactive Gaming Setup Showcase with Vue.js & TypeScript** - Build responsive portfolio websites for hardware enthusiasts and gamers
## 📋 Description
Welcome 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.
This 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.
## 📁 Repository Structure
```
BattleStation-Vue-TypeScript/
├── 📁 src/
│ ├── ⚛️ components/ # Reusable Vue components
│ │ ├── 🔘 Buttons/ # Button components
│ │ ├── 🧭 navigation-global.vue
│ │ └── 🦶 footer-global.vue
│ ├── 📊 data/ # Hardware data and utilities
│ │ ├── ⚙️ battlestation-data.ts # Hardware specifications
│ │ └── 🛠️ battlestation-utils.ts # Data manipulation utilities
│ ├── 📄 pages/ # Application pages
│ │ ├── 🏠 Landing/ # Home page with overview
│ │ ├── 📂 Category/ # Hardware category pages
│ │ ├── 🖥️ Setup/ # Complete setup overview
│ │ ├── 🔧 Components/ # All components page
│ │ └── 📋 Specs/ # Technical specifications
│ ├── 🛣️ routes/ # Vue Router configuration
│ └── 🎨 assets/ # Static assets and styles
├── 📦 package.json # Project dependencies and scripts
└── 📖 README.md # Project documentation
```
## 🚀 Getting Started
### 1. Clone the Repository
```bash
git clone https://github.com/dawidolko/WorkplayHub-Vue-TypeScript.git
cd WorkplayHub-Vue-TypeScript
```
### 2. Install Dependencies
```bash
npm install
```
### 3. Start Development Server
```bash
npm run dev
# Alternative startup scripts:
# For Linux/Mac: ./start.sh
# For Windows: start.bat
```
## ⚙️ System Requirements
### **Essential Tools:**
- **Node.js** (version 16.0 or higher)
- **npm** or **yarn** package manager
- **Modern Web Browser** (Chrome, Firefox, Safari, Edge)
- **Git** for version control
### **Development Environment:**
- **Code Editor** (VS Code, WebStorm, Sublime Text)
- **Vue.js DevTools** browser extension
- **TypeScript** language server
- **Vite** development server (included)
### **Recommended Extensions:**
- **Vue.js** syntax highlighting (Vetur or Volar)
- **TypeScript** support and IntelliSense
- **Tailwind CSS** IntelliSense
- **Prettier** for code formatting
- **ESLint** for code quality
### **Vue.js + TypeScript Ecosystem:**
- **Vue 3** with Composition API
- **TypeScript** for static typing
- **Pinia** for state management
- **Vue Router 4** for navigation
- **Tailwind CSS** for styling
- **Vite** for build tooling
### **Testing & Quality Tools:**
- **Cypress** for E2E testing
- **ESLint** and **Prettier** for code quality
- **Unhead** for SEO optimization
- **VueUse** for composition utilities
## ✨ Key Features
### **🖥️ Interactive Hardware Showcase**
- Comprehensive gaming and productivity setup visualization
- Detailed PC specifications: Ryzen 7 5800X, RTX 3060Ti, 64GB RAM
- MacBook Pro M3 mobile workstation details
- Professional audio equipment and peripherals showcase
### **🎮 Gaming-Focused Design**
- Modern UI with gaming-inspired aesthetic and yellow accent colors
- Smooth animations and transitions for interactive elements
- Responsive design optimized for all device sizes
- Touch-friendly navigation for mobile hardware browsing
### **⚡ Advanced Technical Features**
- Full TypeScript integration with comprehensive type safety
- Pinia state management for component showcase data
- Dynamic routing with Vue Router 4 for hardware categories
- SEO optimization with structured data and meta tags
### **📱 Responsive & Performance Optimized**
- Mobile-first approach with touch-friendly interactions
- Lazy loading for hardware images and components
- Code splitting for faster initial load times
- WebP image optimization for better performance
### **🔧 Professional Development Stack**
- Component-based Vue 3 architecture with Composition API
- Modular SCSS organization with Tailwind CSS utilities
- Comprehensive testing with Cypress E2E framework
- Modern build tooling with Vite for lightning-fast development
## 🛠️ Technologies Used
- **Vue.js 3** - Progressive JavaScript framework with Composition API
- **TypeScript** - Static typing for enhanced development experience
- **Pinia** - Intuitive state management for Vue applications
- **Vue Router 4** - Official routing with dynamic navigation
- **Tailwind CSS** - Utility-first CSS framework
- **Vite** - Next-generation build tooling
- **Cypress** - Modern E2E testing framework
- **Unhead** - Document head management for SEO
## 🌍 Live Demo
The project is deployed and available at: **[https://workplayhub.dawidolko.pl](https://workplayhub.dawidolko.pl)**
## 🖼️ Preview
## 📝 Available Scripts
```bash
npm run dev # Start development server
npm run build # Build for production
npm run preview # Preview production build
npm run test # Run Cypress tests
```
## 🚀 Deployment
```bash
# Build for production
npm run build
# Deploy the dist/ folder to your hosting provider
# Recommended: Vercel, Netlify, or GitHub Pages
```
## 🤝 Contributing
Contributions are highly welcomed! Here's how you can help:
- 🐛 **Report bugs** - Found an issue? Let us know!
- 💡 **Suggest improvements** - Have ideas for better features?
- 🔧 **Submit pull requests** - Share your enhancements and solutions
- 📖 **Improve documentation** - Help make the project clearer
Feel free to open issues or reach out through GitHub for any questions or suggestions.
## 👨💻 Author
Created by **[Dawid Olko](https://github.com/dawidolko)**
- **Website** - [dawidolko.pl](https://dawidolko.pl/)
- **LinkedIn** - [@dawidolko](https://www.linkedin.com/in/dawidolko/)
## 📄 License
This project is open source and available under the [MIT License](LICENSE).
---