https://github.com/spcfictdu/hrbms-frontend
🏨 Modern hotel management system built with Vue.js and Vuetify. Features room management, guest booking portal, staff administration, payment processing, and reporting tools. Streamlines hotel operations from reservation to checkout.
https://github.com/spcfictdu/hrbms-frontend
css hotel hotel-booking hotel-management-system html javascript vue2 vuejs vuetify
Last synced: 3 months ago
JSON representation
🏨 Modern hotel management system built with Vue.js and Vuetify. Features room management, guest booking portal, staff administration, payment processing, and reporting tools. Streamlines hotel operations from reservation to checkout.
- Host: GitHub
- URL: https://github.com/spcfictdu/hrbms-frontend
- Owner: spcfictdu
- Created: 2024-05-06T02:16:48.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-22T14:12:26.000Z (4 months ago)
- Last Synced: 2025-06-22T15:25:53.150Z (4 months ago)
- Topics: css, hotel, hotel-booking, hotel-management-system, html, javascript, vue2, vuejs, vuetify
- Language: Vue
- Homepage:
- Size: 7.56 MB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Hotel Room and Booking Management System
# 🏨 Introduction
A comprehensive Vue.js-based solution for hotel operations, providing seamless booking management, guest services, transaction processing, and reporting capabilities.
## 🚀 Key Features
- 🛏️ 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
## 🛠️ Technologies Used
[](https://vuejs.org/)
[](https://vuetifyjs.com/)
[](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
[](https://nodejs.org/)
[](https://developer.mozilla.org/en-US/docs/Web/HTML)
[](https://developer.mozilla.org/en-US/docs/Web/CSS)
## 📦 Prerequisites
### 1. Required Software
- [NPM](https://nodejs.org/en/download)
### 2. 🔧 Configuration and Connectivity Setup
#### ✅ Critical Configuration Checklist
| 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 |
#### ⚠️ Common Pitfalls
Misconfiguration can lead to:
- API connection failures
- Image loading issues
- Data synchronization issues
#### 💡 Best Practices
- Double-check all endpoint URLs
- Test all connections in a staging environment before production
- Avoid hardcoding sensitive data; use the designated configuration files
## 🏗️ Project Architecture
```
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
## 🚀 Project Setup
### Install Dependencies
```bash
npm install # 📦 Installs all required node modules
```
### Available Commands
| 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 |
## 🔍 Troubleshooting Guide
### API Connection 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` |
## 📋 Commit Message Guidelines
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 |
## 🤝 Contributing Guidelines
### Branch Naming
- `developer`: For main development
- `feature/feature-name`: For new features
- `hotfix/issue-name`: For critical fixes
- `release/version`: For release preparation
### Code Style
- Follow Vue.js style guide
- Use ESLint configuration
- Write meaningful comments
## 🔒 Security Considerations
- 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`.
## 👥 Development Team
- 👨💻 **Gabriel Alfonso M. Gatbonton** - Senior Frontend Developer
- 👨💻 **Prince Charles M. Clemente** - Senior Frontend Developer
- 👨💻 **Rhymeses E. Cortez** - Junior Frontend Developer