# travel-reservation-models **Repository Path**: mirrors_github/travel-reservation-models ## Basic Information - **Project Name**: travel-reservation-models - **Description**: Let's play with all the different Copilot models! - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-05-11 - **Last Updated**: 2025-10-11 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Travel Reservations App This project is a simple web application for managing hotel reservations. It is built using Flask for the backend and VueJS for the frontend. The application uses local JSON data to simulate a database. VueJS and Tailwind CSS are loaded via CDN, eliminating the need for a frontend build step. ## Features - View available hotel rooms. - Make a reservation. - Cancel a reservation. - View all reservations. ## Technologies Used - **Backend**: Flask (Python) - **Frontend**: VueJS (loaded via CDN), Tailwind CSS (via CDN) - **Data Storage**: Local JSON files ## Prerequisites Before you begin, ensure you have the following installed: - Python 3.x - pip3 (Python package installer) ## Project Structure ``` project-root/ |-- static/ # Contains static files served directly | |-- js/ # Copied JavaScript application code | |-- main.js |-- src/ # Frontend source file (not directly served) | |-- main.js # Contains all Vue component logic and templates |-- templates/ # Contains HTML templates for Flask | |-- index.html # Loads Vue/Tailwind CDN and static/js/main.js |-- app.py # Main Flask application |-- data.json # Local JSON file for storing hotel and reservation data |-- requirements.txt # Python dependencies |-- README.md # Project documentation |-- LICENSE # Project License |-- Changelog.md # Change history ``` ## Setup Instructions 1. **Clone the repository**: ```bash git clone cd project-root ``` 2. **Set up Python Virtual Environment & Install Backend Dependencies**: ```bash # Set up Python virtual environment (recommended) python3 -m venv venv source venv/bin/activate # On Windows use `venv\Scripts\activate` # Install Python dependencies pip install -r requirements.txt # Add a requirements.txt file pip freeze > requirements.txt ``` 3. **Prepare Frontend JavaScript**: The frontend JavaScript (`src/main.js`) needs to be copied to the static directory to be served by Flask. ```bash # On macOS/Linux cp src/main.js static/js/main.js # On Windows copy src\main.js static\js\main.js ``` *(Note: You need to repeat this copy step whenever you modify `src/main.js`)* 4. **Run the Application**: ```bash # Ensure your virtual environment is active python3 app.py ``` *(Alternatively, for development mode with auto-reload for backend changes):* ```bash export FLASK_DEBUG=1 # On Windows use `set FLASK_DEBUG=1` python3 -m flask run ``` 5. **Access the application**: Open your browser and navigate to `http://127.0.0.1:5000`. ## Development Development involves running the Flask backend and manually copying the frontend JavaScript file after making changes. 1. **Run the Flask Backend (Development Mode)**: ```bash # Ensure your virtual environment is active export FLASK_DEBUG=1 # On Windows use `set FLASK_DEBUG=1` python3 -m flask run ``` The backend will run on `http://127.0.0.1:5000` and automatically reload when backend Python files change. 2. **Modify Frontend JavaScript**: Edit the `src/main.js` file. 3. **Copy Updated Frontend JavaScript**: After saving changes to `src/main.js`, copy it to the static folder: ```bash # On macOS/Linux cp src/main.js static/js/main.js # On Windows copy src\main.js static\js\main.js ``` 4. **Refresh Browser**: Refresh your browser page (`http://127.0.0.1:5000`) to see the frontend changes. ## Usage - The homepage displays available hotel rooms. - Use the reservation form to book a room. - View and manage reservations through the "Reservations" page. ## API Endpoints (Example) The Vue frontend interacts with the Flask backend via the following API endpoints: - `GET /api/rooms`: Retrieves a list of available rooms. - `GET /api/reservations`: Retrieves a list of all reservations. - `POST /api/reservations`: Creates a new reservation. Expects reservation details in the request body. - `DELETE /api/reservations/`: Cancels an existing reservation. *(Note: Update these endpoints based on your actual implementation in `app.py`)* ## Data Management The application uses a `data.json` file to store information about hotel rooms and reservations. This file is read and updated by the Flask backend to simulate database operations. **Example `data.json` structure:** ```json { "rooms": [ { "id": 1, "name": "Standard Queen", "availability": 5 }, { "id": 2, "name": "Deluxe King", "availability": 3 } ], "reservations": [ { "id": "res123", "roomId": 1, "guestName": "John Doe", "checkIn": "2025-05-01", "checkOut": "2025-05-05" } ] } ``` ## Contributing Contributions are welcome! Please fork the repository and submit a pull request for any enhancements or bug fixes. ## License This project is licensed under the MIT License. See the LICENSE file for details.