Web platform for role-playing games that allows users to search for available campaigns or publish their own to find players.
RPG-Adventures is a Vue application developed as an academic project (2º DAW) that simulates a collaborative environment for the role-playing game community. Users can explore available campaigns, publish new adventures, and manage registrations.
- Multi-language support with i18n
- Automatic browser language detection
- English as default language
- Language selector in the header
- Registration form (PlayerFormComponent.vue) with validation through regular expressions
- Campaign publication form with dynamic fields
- Advanced validation using Vuelidate
- Modal Dialog for registrations
- AJAX and JSON for asynchronous data loading
- Featured games carousel
- List of most popular systems
- PrimeVue DataTable for campaign management
- Expandable rows
- Real-time filtering by keywords
- Column sorting
- Dynamic charts with Chart.js
- Bar, donut, and circular chart representations
- Automatic grouping of minor categories into "Others"
- Responsive interface adapted for mobile and desktop devices
- Text descriptions for images and charts
- Scalable and accessible design
| Category | Technologies |
|---|---|
| Framework | Vue 3 (Composition API) |
| Language | TypeScript |
| Build Tool | Vite |
| Components | PrimeVue, Chart.js |
| Styling | Tailwind CSS, PostCSS |
| Internationalization | Vue I18n |
| Routing | Vue Router |
| Data | JSON, AJAX |
- tailwind.config.ts: Tailwind CSS configuration
- postcss.config.ts: CSS transformation
- tsconfig.json: Strict typing
- vite.config.ts: Build optimizations
- Uses Vue 3 Composition API for modular logic
- StadisticComposable centralizes statistics calculation and translation logic
- Typing centralized in
types.tsfor JSON data consistency - Native responsive design without sacrificing usability
- Components decomposed into independent modules to facilitate scalability and maintenance
