A comprehensive Vue.js-based solution for hotel operations, providing seamless booking management, guest services, transaction processing, and reporting capabilities.
- 🛏️ Room inventory management and availability tracking
- 🧳 Guest-facing booking portal with self-service options
- 👨💼 Staff dashboard for booking administration
- 💳 Integrated payment processing system
- 📊 Comprehensive reporting and analytics
- 📱 Responsive design for all devices
| Configuration | File / Location | Action Required |
|---|---|---|
| API Endpoint | urls.js |
✅ Set the correct backend API endpoint |
| Backend URL | main.js |
🌐 Set the correct backend hosting: deployed, local, network |
| Backend Connectivity | hrbms-backend |
🔗 Ensure complete integration and successful communication |
Misconfiguration can lead to:
- API connection failures
- Image loading issues
- Data synchronization issues
- Double-check all endpoint URLs
- Test all connections in a staging environment before production
- Avoid hardcoding sensitive data; use the designated configuration files
hrbms-frontend/
├── src/
│ ├── assets/ # Static assets like images, svgs
│ ├── components/ # Reusable Vue components
│ ├── mixins/ # Vue Mixins
│ ├── plugins/ # Vue plugins configuration
│ ├── router/ # Application routing
│ ├── store/ # Vuex state management
│ ├── utils/ # Helper functions and utilities
│ ├── views/ # Page components
│ ├── App.vue # Root component
│ └── main.js # Entry point
└── public/ # Public static assets
The application follows a modular architecture with clear separation of concerns:
- Presentation Layer: Vue.js components and Vuetify UI framework
- State Management: Centralized Vuex store for application data
- Service Layer: API integration and third-party services
- Utility Layer: Helper functions and shared logic
npm install # 📦 Installs all required node modules| Command | Description |
|---|---|
npm run serve |
🔧 Start in development mode with hot-reload |
npm run build |
📦 Build for production (minified and optimized) |
npm run lint |
🧹 Lint and fix code issues |
| Issue | Solution |
|---|---|
| API timeout errors | Check network connectivity and backend server status |
| Authentication failures | Verify correct API credentials in urls.js |
| CORS errors | Ensure backend has proper CORS configuration for your domain |
| Data synchronization issues | Check local storage quota and clear cache if necessary |
| Image loading issues | Verify correct API endpoint in url urls.js |
Use the following emojis to indicate the nature of your commits:
| Emoji | Code | Description |
|---|---|---|
| 💯 | :100: |
Full functionality implementation |
| 🔧 | :wrench: |
Code improvement / refactor |
| 🐛 | :bug: |
Bug fix |
| 📑 | :bookmark_tabs: |
Documentation and comments |
| ☕ | :coffee: |
Minor or initial changes |
| 🚧 | :construction: |
Work in progress |
| 🗑️ | :wastebasket: |
Code or file deletion |
| 📓 | :notebook: |
README updates |
| ✏️ | :pencil2: |
Typo or naming corrections |
| ♻️ | :recycle: |
Code refactoring |
| 🔀 | :twisted_rightwards_arrows: |
Branch merge |
| ⏪ | :rewind: |
Reverting changes |
| 📱 | :iphone: |
Responsive design changes |
| 📌 | :pushpin: |
Hotfixes |
developer: For main developmentfeature/feature-name: For new featureshotfix/issue-name: For critical fixesrelease/version: For release preparation
- Follow Vue.js style guide
- Use ESLint configuration
- Write meaningful comments
- All API requests must use HTTPS
- Sensitive data must be encrypted at rest and in transit
- User authentication tokens should be stored securely
- Implement proper input validation to prevent injection attacks
- Regular security audits are conducted on the codebase
For security issues, please contact the security team at
spcf.ictdu@spcf.edu.ph.
- 👨💻 Gabriel Alfonso M. Gatbonton - Senior Frontend Developer
- 👨💻 Prince Charles M. Clemente - Senior Frontend Developer
- 👨💻 Rhymeses E. Cortez - Junior Frontend Developer