Babysitter Reservation System

This Laravel-based web application provides a babysitter reservation system where customers can book babysitting services for their children. The system includes validation of reservation details, handling of customer and children information, and management of recurring bookings.

Features

• Customer booking form with datetime selection and children details
• No Login Required for Initial Booking
• Address information and special instructions handling
• Automated booking number generation
• Age validation for children (1 month to 12 years and 11 months)
• Comprehensive validation rules for booking dates and times
• Status tracking of babysitting requests

Tech Stack

• Backend: Laravel (PHP)
• Frontend: Vue.js with Inertia.js
• Database: MySQL/PostgreSQL
• CSS Framework: Tailwind CSS
• Authentication: Laravel Breeze with Inertia

Models

The system uses the following data models:

BabysittingRequest

Stores the core booking information including customer details, booking times, and status.

BabysittingRequestStatus

Stores all the status for lookup instead of enums.

CareRecipient

Stores information about the children requiring care, including age validation.

User

Stores user authentication details with role-based permissions (customer, support, admin).

Application Configuration

These configurations ensure that the application follows best practices for security, performance, and development discipline across all environments.

Database Protection

private function configureCommands(): void

• Prevents destructive database commands in production environments
• Provides an extra layer of safety for database operations
• Helps prevent accidental data loss in production databases

Model Configuration

private function configureModels(): void

• Model::shouldBeStrict(): Enables strict mode for all Eloquent models, which helps catch common mistakes like accessing non-existent attributes
• Model::unguard(): Disables mass assignment protection across all models, allowing for mass assignment without specifying $fillable properties (note: this requires careful validation of input data)

HTTPS Configuration

private function configureUrl(): void

• Forces HTTPS for all URLs generated by the application in non-local environments
• Ensures secure connections for all data transmissions
• Maintains HTTP in local development for convenience

Vite Configuration

private function configureVite(): void

• Configures Vite.js (Laravel's frontend build tool since v11.12)
• Uses "aggressive" prefetching strategy which preloads resources proactively
• Improves the perceived performance of the application by reducing load times

Pages

1. Reservation Form Page

Allows customers to:

• Select start and end date/time for babysitting
• Enter their contact information (name, email, phone)
• Input address details
• Add children's information (up to 4 children)
• Set up recurring booking patterns (optional)
• Include special instructions or messages

Validation Rules:

• Reservations must be at least 6 hours in advance
• Reservations must be within 30 days from the current date
• Maximum 4 children per booking
• Children must be between 1 month and 12 years and 11 months old

2. Summary Page

Shows a summary of all entered information:

• Customer contact details
• Address information
• Babysitting date and time
• Children's information
• Recurring pattern details (if applicable)
• Submit button to confirm the reservation

3. Confirmation Page

Displays booking confirmation with:

• Unique booking number (format: BKS-YYYYMMDD-XXXX)
• Summary of all booking details
• Current status of the booking (initially "Pending")
• Contact information for further inquiries

Booking Workflow

1. Customer submits a booking request
2. System generates a unique booking number
3. Request status is set to "Pending"
4. Customer support is notified of new booking (WIP)
5. Support staff can assign, confirm, or cancel requests (WIP)
6. Status updates are communicated to the customer (WIP)

Frontend Implementation

The frontend is built using Vue.js components rendered through Inertia.js, providing a modern single-page application experience while leveraging Laravel's backend capabilities:

• Inertia.js: Connects the Laravel backend with Vue frontend without building a separate API
• Vue Components: Modular, reusable components for forms, validation, and UI elements
• Vue Router: Handled implicitly by Inertia.js for page navigation
• Form Handling: Using Inertia Forms with validation
• State Management: Component and page-level state with props from the server

Installation & Setup

# Clone the repository
git clone https://github.com/azri-cs/kiddycare.git
cd kiddycare

# Install dependencies
composer install
npm install

# Set up environment variables
cp .env.example .env
php artisan key:generate

# Configure your database in .env file

# Run migrations
php artisan migrate

# Seed the database (optional)
php artisan db:seed

# Compile assets and watch for changes
npm run dev

# Start the server
php artisan serve

Directory Structure

Important directories for the Vue/Inertia implementation:

- app/
  - Http/
    - Controllers/
    - Requests/  # Form validation requests
- resources/
  - js/
    - Components/  # Vue components
    - Layouts/     # Page layouts
    - Pages/       # Inertia page components
  - css/
- routes/
  - web.php       # Application routes

License

This project is licensed under the MIT License - see the LICENSE file for details.