A beautiful, modern hotel booking website built with Next.js 14, featuring luxury cabin rentals in the heart of the Italian Dolomites.

The Wild Oasis is a full-featured hotel booking website that allows guests to discover and reserve luxury cabins. This family-run retreat has been operating since 1962, offering guests an immersive experience in nature's beauty with modern comfort and convenience.

• Browse luxury cabin listings with detailed information
• Filter cabins by capacity (all, 1-3 guests, 4-7 guests, 8-12 guests)
• View cabin images, pricing, and amenities
• Individual cabin detail pages with comprehensive information

• Interactive date picker for booking cabins
• Real-time availability checking
• Dynamic pricing calculation with discounts
• Guest capacity selection
• Special requirements and observations form
• Booking confirmation and management

• Secure authentication via NextAuth.js (Auth.js)
• Multiple OAuth providers (Google & GitHub)
• Automatic guest profile creation
• Protected account routes
• Session management with user profiles

• Personal dashboard for logged-in guests
• View and manage reservations
• Update profile information
• Reservation history tracking
• Profile picture integration from OAuth providers

• Responsive design with Tailwind CSS
• Custom color scheme with primary and accent colors
• Smooth animations and transitions
• Loading states and error handling
• Optimized images with Next.js Image component
• Beautiful typography with Josefin Sans font

• Next.js 14 App Router architecture
• Server-side rendering (SSR)
• Static site generation (SSG) where appropriate
• Incremental Static Regeneration (ISR)
• Optimized image loading with blur placeholders
• SEO-friendly metadata and structured data

• Next.js 14 - React framework with App Router
• React 18 - UI library with latest features
• Tailwind CSS - Utility-first CSS framework
• Heroicons - Beautiful SVG icons
• date-fns - Modern JavaScript date utility library
• react-day-picker - Flexible date picker component

• Supabase - Backend-as-a-Service with PostgreSQL
• NextAuth.js v5 - Complete authentication solution
• Server Actions - Next.js server-side form handling

• ESLint - Code linting and formatting
• PostCSS - CSS processing
• webpack-bundle-analyzer - Bundle size analysis

Make sure you have the following installed:

• Node.js 18+
• npm, yarn, pnpm, or bun
• A Supabase account
• OAuth app credentials (Google and/or GitHub)

1. Clone the repository

   git clone <repository-url>
   cd wild-oasis-website

2. Install dependencies

   npm install
   # or
   yarn install
   # or
   pnpm install
   # or
   bun install

3. Set up environment variables

   Create a .env.local file in the root directory:

   # Supabase Configuration
   SUPABASE_URL=your_supabase_project_url
   SUPABASE_KEY=your_supabase_anon_key
   
   # NextAuth Configuration
   NEXTAUTH_URL=http://localhost:3000
   NEXTAUTH_SECRET=your_nextauth_secret
   
   # Google OAuth
   AUTH_GOOGLE_ID=your_google_client_id
   AUTH_GOOGLE_SECRET=your_google_client_secret
   
   # GitHub OAuth
   AUTH_GITHUB_ID=your_github_client_id
   AUTH_GITHUB_SECRET=your_github_client_secret

4. Set up Supabase Database

   Create the following tables in your Supabase database:

   • cabins - Store cabin information
   • guest - Store guest profiles
   • bookings - Store reservation data
   • settings - Store application settings

5. Run the development server

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev
   # or
   bun dev

6. Open your browser

   Navigate to http://localhost:3000 to see the application.

wild-oasis-website/
├── app/                          # Next.js 14 App Router
│   ├── _components/              # Reusable React components
│   │   ├── Header.jsx           # Main navigation header
│   │   ├── CabinLists.jsx       # Cabin listing component
│   │   ├── ReservationForm.jsx  # Booking form component
│   │   └── ...
│   ├── _contexts/               # React Context providers
│   │   └── ReservationProvider.jsx
│   ├── _hooks/                  # Custom React hooks
│   │   └── useReservation.js
│   ├── _libs/                   # Utility libraries
│   │   ├── auth.js              # NextAuth configuration
│   │   ├── supabase.js          # Supabase client
│   │   ├── data-service.js      # Data fetching functions
│   │   └── actions.js           # Server actions
│   ├── _styles/                 # Global styles
│   │   └── globals.css
│   ├── about/                   # About page
│   ├── account/                 # User account pages
│   │   ├── profile/             # User profile management
│   │   └── reservations/        # User reservations
│   ├── cabins/                  # Cabin listing and details
│   │   └── [cabinId]/           # Dynamic cabin detail pages
│   ├── layout.jsx               # Root layout component
│   └── page.jsx                 # Home page
├── public/                       # Static assets
│   ├── logo.png
│   ├── bg.png
│   └── ...
├── middleware.js                # Next.js middleware for route protection
├── next.config.mjs             # Next.js configuration
├── tailwind.config.js          # Tailwind CSS configuration
└── package.json                # Dependencies and scripts

# Development
npm run dev          # Start development server
npm run build        # Build for production
npm run start        # Start production server
npm run lint         # Run ESLint

# Utility scripts
npm run clean        # Clean build cache
npm run prod         # Build and start production
npm run analyze      # Analyze bundle size

The application requires several environment variables to function properly:

The application uses Supabase PostgreSQL with the following main tables:

• id - Primary key
• name - Cabin name
• maxCapacity - Maximum number of guests
• regularPrice - Base price per night
• discount - Discount amount
• image - Cabin image URL
• description - Detailed description

• id - Primary key
• fullName - Guest full name
• email - Guest email (unique)
• created_at - Registration timestamp

• id - Primary key
• startDate - Check-in date
• endDate - Check-out date
• numNights - Number of nights
• numGuests - Number of guests
• totalPrice - Total booking cost
• guestId - Foreign key to guest
• cabinId - Foreign key to cabin
• status - Booking status
• observations - Special requirements

1. Connect your repository to Vercel
2. Configure environment variables in Vercel dashboard
3. Deploy - Vercel will automatically build and deploy

The app can be deployed to any platform that supports Next.js:

• Netlify
• AWS Amplify
• Railway
• Render
• DigitalOcean App Platform

1. Users click "Sign In" to access OAuth options
2. After successful authentication, guest profile is created automatically
3. Users gain access to protected routes (/account)
4. Session persists across browser sessions

1. Browse available cabins with filtering options
2. Select a specific cabin to view details
3. Choose dates using the interactive calendar
4. Fill out reservation form with guest details
5. Submit reservation (requires authentication)
6. View confirmation and manage bookings in account

• Cabin management through Supabase dashboard
• Booking oversight and management
• Guest information access
• Settings configuration

We welcome contributions to The Wild Oasis project! Here's how to get started:

1. Fork the repository
2. Create a feature branch

   git checkout -b feature/amazing-feature

3. Make your changes
4. Commit your changes

   git commit -m 'Add amazing feature'

5. Push to the branch

   git push origin feature/amazing-feature

6. Open a Pull Request

• Follow the existing code style and patterns
• Write meaningful commit messages
• Test your changes thoroughly
• Update documentation as needed
• Ensure responsive design works on all devices

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

• Next.js team for the amazing React framework
• Supabase for the excellent backend-as-a-service
• Tailwind CSS for the utility-first CSS framework
• NextAuth.js for authentication made simple
• Heroicons for beautiful icons

If you encounter any issues or have questions:

1. Check the Issues page
2. Create a new issue with detailed information

Built with ❤️ for luxury travel experiences

The Wild Oasis - Where nature's beauty and comfortable living blend seamlessly since 1962.