En moderne Vue 3-applikation til sporing og administration af Path of Exile builds med Firebase backend-integration.
PoE Dashboard er et webbaseret værktøj designet til Path of Exile-spillere, der ønsker at holde styr på deres karakterbyggerier og ressourcer. Applikationen giver brugerne mulighed for at:
- Spore build-status og progression for både Path of Exile 1 og 2
- Administrere eksterne links til Path of Building filer og guides
- Holde styr på liga-tilknytninger og karakteroplysninger
- Få adgang til kuraterede ressourcer og værktøjer
- Synkronisere data på tværs af enheder med real-time opdateringer
- Google-kun log ind via Firebase Authentication
- Sikker brugerautentificering med OAuth 2.0
- Automatisk session management
- Spor builds for Path of Exile 1 og 2 karakterer
- Status management (aktiv, pause, afsluttet)
- Guide status tracking (opdateret, forældet, ukendt)
- Liga og karakter association
- Eksterne link management (Path of Building, guides)
- Søgning og filtrering af builds
- Kuraterede ressourcer for begge spilversioner
- Tilpasselige ressourcelister med brugerspecifikke præferencer
- Kategori-organisering (database, handel, værktøjer, osv.)
- CRUD operationer for ressource management
- Live data synkronisering via Firebase Firestore
- Real-time opdateringer på tværs af sessioner
- Offline-first design med automatisk synkronisering
- Frontend Framework: Vue 3 med Composition API
- Build Tool: Vite 7.0
- Styling: TailwindCSS v4 med JIT compilation
- Backend: Firebase (Authentication + Firestore)
- State Management: Vue Composables pattern
- Deployment: Firebase Hosting
- Code Quality: ESLint med Vue plugin
Før du starter, skal du sikre dig, at du har følgende installeret:
- Node.js (version 18 eller nyere)
- npm (kommer med Node.js)
- Firebase CLI (valgfrit, til deployment)
- Klon repositoriet
git clone <repository-url>
cd poe-dashboard- Installer afhængigheder
npm install- Opsæt miljøvariabler
Opret en
.envfil i rodmappen og tilføj dine Firebase konfigurationsvariabler:
VITE_FIREBASE_API_KEY=your_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_auth_domain
VITE_FIREBASE_PROJECT_ID=your_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_storage_bucket
VITE_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
VITE_FIREBASE_APP_ID=your_app_id- Start udviklings-serveren
npm run devApplikationen vil være tilgængelig på http://localhost:5173
npm run dev # Start udviklings-server
npm run build # Byg til produktion
npm run preview # Forhåndsvis produktions-build
npm run lint # Kør ESLint
npm run lint:fix # Ret ESLint fejl automatisk- Opret et nyt Firebase projekt på Firebase Console
- Aktiver Authentication med Google provider
- Opret en Firestore database
- Konfigurer hosting (valgfrit)
- Opdater miljøvariablerne med dine projekt-credentials
Sørg for at din Firestore database har passende sikkerhedsregler, der sikrer brugerspecifik dataadgang:
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /builds/{document} {
allow read, write: if request.auth != null && request.auth.uid == resource.data.userId;
}
match /users/{userId} {
allow read, write: if request.auth != null && request.auth.uid == userId;
}
}
}src/
├── components/ # Vue komponenter
│ ├── AppHeader.vue # Hoved-navigation og brugerinfo
│ ├── BuildCard.vue # Individuel build visning
│ ├── BuildModal.vue # Tilføj/rediger build form
│ ├── Navigation.vue # Tab navigation
│ ├── ResourceModal.vue # Ressource management modal
│ └── ResourcesSection.vue # Ressource oversigt
├── composables/ # Vue Composition API logik
│ ├── useAuth.js # Authentication state og metoder
│ ├── useBuilds.js # Builds management
│ ├── useResources.js # Ressource CRUD operationer
│ ├── useSearch.js # Søge- og filtreringsfunktionalitet
│ ├── useTab.js # Tab state management
│ └── useValidation.js # Form validering
├── firebase/ # Firebase konfiguration og services
│ ├── auth.js # Authentication logik
│ ├── config.js # Firebase konfiguration
│ ├── firestore.js # Database operationer
│ └── index.js # Firebase exports
├── data/ # Statiske data og konfiguration
│ └── resources.js # Standard ressource definition
├── utils/ # Hjælpe-funktioner
│ └── helpers.js # Almindelige utility funktioner
├── style.css # Global styling og TailwindCSS komponenter
└── main.js # Applikations entry point
Applikationen bruger et konsistent design system baseret på:
- Mørkt tema med grå farvepalette
- Responsive design med mobile-first tilgang
- TailwindCSS komponenter til genanvendelige UI-elementer
- Hover-effekter og glatte overgange
- Dansk lokalisering gennem hele brugergrænsefladen
Bidrag er velkomne! Hvis du ønsker at bidrage til projektet:
- Fork repositoriet
- Opret en feature branch (
git checkout -b feature/AmazingFeature) - Commit dine ændringer (
git commit -m 'Add some AmazingFeature') - Push til branchen (
git push origin feature/AmazingFeature) - Åbn en Pull Request
- Følg eksisterende kode konventioner og styling
- Inkluder passende tests for nye funktioner
- Opdater dokumentation ved behov
- Sørg for at ESLint passes før du sender pull requests
Dette projekt har endnu ikke en specificeret licens. Vi anbefaler at tilføje en MIT License eller Apache 2.0 License for open source distribution.
For spørgsmål, forslag eller support, venligst:
- Åbn et issue på GitHub
- Kontakt projekt vedligeholderne via GitHub
- Path of Exile af Grinding Gear Games
- Vue.js fællesskabet for det fantastiske framework
- Firebase for robust backend services
- TailwindCSS for det fleksible styling system
Note: Denne applikation er et community projekt og er ikke officielt affilieret med Grinding Gear Games eller Path of Exile.