🏕️ HavenHub - Cabin Booking Management System

A full-stack cabin booking management platform with a customer-facing landing page and an admin dashboard

Features • Tech Stack • Project Structure • Getting Started • Deployment • Screenshots • Contact

📋 Overview

HavenHub is a modern, full-featured cabin booking management system designed to provide a seamless experience for both administrators and customers. The project consists of three main components:

Admin Dashboard - A powerful React-based interface for managing cabins, bookings, guests, and analytics
Customer Landing Page - A beautiful Next.js website where customers can browse and book cabins
Backend Infrastructure - Supabase-powered backend providing authentication, database, and storage

Built with modern web technologies, HavenHub demonstrates best practices in full-stack development, including state management, authentication, responsive design, and deployment strategies.

✨ Features

🎯 Admin Dashboard Features

🔐 Authentication & Authorization - Secure login system with role-based access
🏠 Cabin Management - Full CRUD operations for cabins with image uploads
📅 Booking Management - Track and manage all bookings with status updates
👥 Guest Management - Manage guest information and booking history
✅ Check-in/Check-out System - Streamlined check-in and check-out process
📊 Dashboard Analytics - Real-time statistics and data visualizations with Recharts
⚙️ Settings Configuration - Customizable application settings
🌙 Dark Mode - Eye-friendly dark theme support
📱 Responsive Design - Works seamlessly on all devices

🌐 Landing Page Features

🔍 Cabin Browsing - Beautiful grid layout showcasing all available cabins
🏡 Cabin Details - Detailed cabin information with image galleries
📆 Booking System - Intuitive booking form with date selection
🔎 Search & Filtering - Advanced search and filter capabilities
❤️ Favorites System - Save favorite cabins for later
📱 Mobile Responsive - Perfect experience on mobile devices
🌙 Dark Mode - Consistent dark theme across the site
🎨 Modern UI/UX - Built with shadcn/ui and Tailwind CSS
⚡ Fast Performance - Optimized with Next.js 15 and Server Components

🔧 Backend Features (Supabase)

🗄️ PostgreSQL Database - Robust relational database
🔑 Authentication - Built-in auth with JWT tokens
📦 Storage - Image storage and management
🔒 Row Level Security - Secure data access policies
⚡ Real-time - Real-time data synchronization
🚀 API - Auto-generated REST and GraphQL APIs

🛠️ Tech Stack

Frontend (Admin Dashboard)

Technology	Purpose
⚛️ React 18	UI library for building interactive interfaces
⚡ Vite	Fast build tool and dev server
🔄 React Query	Server state management and caching
🧭 React Router	Client-side routing
💅 Styled Components	CSS-in-JS styling solution
📊 Recharts	Charts and data visualization
📝 React Hook Form	Form state management
🍞 React Hot Toast	Toast notifications
🎨 React Icons	Icon library

Frontend (Landing Page)

Technology	Purpose
⚡ Next.js 15	React framework with SSR and RSC
📘 TypeScript	Type-safe JavaScript
🎨 Tailwind CSS	Utility-first CSS framework
🧩 shadcn/ui	Beautiful component library
🎭 Radix UI	Unstyled, accessible components
✨ Framer Motion	Animation library
📝 React Hook Form	Form management
✅ Zod	Schema validation
📅 date-fns	Date utilities
🔔 Sonner	Toast notifications

Backend (Supabase)

Technology	Purpose
🐘 PostgreSQL	Relational database
🔐 Supabase Auth	Authentication service
📦 Supabase Storage	File storage
⚡ Supabase Realtime	Real-time subscriptions
🔒 RLS Policies	Row-level security

Development & Deployment

Technology	Purpose
🔨 ESLint	Code linting
🎨 Prettier	Code formatting
📦 npm	Package management
🚀 Vercel	Deployment platform
🐙 Git	Version control

📁 Project Structure

HavenHub/
├── 📁 src/                          # Admin Dashboard Source
│   ├── 📁 pages/                    # Page components
│   │   ├── Dashboard.jsx            # Main dashboard with analytics
│   │   ├── Cabins.jsx               # Cabin management
│   │   ├── Bookings.jsx             # Booking management
│   │   ├── Guests.jsx               # Guest management
│   │   ├── Settings.jsx             # Application settings
│   │   ├── Account.jsx              # User account
│   │   └── Login.jsx                # Authentication
│   ├── 📁 features/                 # Feature-based modules
│   ├── 📁 services/                 # API services
│   │   ├── apiAuth.js               # Authentication API
│   │   ├── apiBookings.js           # Bookings API
│   │   ├── apiCabins.js             # Cabins API
│   │   └── supabase.js              # Supabase client
│   ├── 📁 ui/                       # Reusable UI components
│   ├── 📁 context/                  # React context providers
│   ├── 📁 hooks/                    # Custom React hooks
│   ├── 📁 utils/                    # Utility functions
│   └── 📁 styles/                   # Global styles
├── 📁 HavenHub-landing/             # Customer Landing Page
│   ├── 📁 app/                      # Next.js app directory
│   │   ├── page.tsx                 # Home page
│   │   ├── favorites/               # Favorites page
│   │   └── layout.tsx               # Root layout
│   ├── 📁 components/               # React components
│   │   ├── 📁 landing/              # Landing page sections
│   │   │   ├── HeroSection.tsx      # Hero section
│   │   │   ├── CabinCard.tsx        # Cabin card component
│   │   │   ├── BookingForm.tsx      # Booking form
│   │   │   ├── FeaturesSection.tsx  # Features showcase
│   │   │   └── TestimonialsSection.tsx
│   │   └── 📁 ui/                   # shadcn/ui components
│   ├── 📁 lib/                      # Utility libraries
│   │   ├── supabase.ts              # Supabase client
│   │   ├── api.ts                   # API functions
│   │   └── utils.ts                 # Helper functions
│   ├── 📁 hooks/                    # Custom hooks
│   ├── 📁 context/                  # Context providers
│   └── 📁 types/                    # TypeScript types
├── 📁 public/                       # Static assets
├── 📄 package.json                  # Dashboard dependencies
├── 📄 vite.config.js                # Vite configuration
├── 📄 vercel.json                   # Vercel deployment config
├── 📄 DEPLOYMENT.md                 # Deployment guide
└── 📄 README.md                     # This file

🚀 Getting Started

Prerequisites

Before you begin, ensure you have the following installed:

Node.js (v18.0 or higher)
npm or yarn or pnpm
Git
Supabase Account (free at supabase.com)

Installation

1️⃣ Clone the Repository

git clone https://github.com/zacktam12/HavenHub.git
cd HavenHub

2️⃣ Set Up Admin Dashboard

# Install dependencies
npm install

# Run development server
npm run dev

The dashboard will be available at http://localhost:5173

3️⃣ Set Up Landing Page

# Navigate to landing page directory
cd HavenHub-landing

# Install dependencies
npm install

# Run development server
npm run dev

The landing page will be available at http://localhost:3000

Environment Setup

Supabase Configuration

Both applications use Supabase for backend services. You'll need to:

Create a Supabase project at supabase.com
Get your project URL and anon key
Update the Supabase configuration in:
- src/services/supabase.js (Admin Dashboard)
- HavenHub-landing/lib/supabase.ts (Landing Page)

// Example configuration
const supabaseUrl = 'YOUR_SUPABASE_URL'
const supabaseKey = 'YOUR_SUPABASE_ANON_KEY'

Database Setup

Run the Supabase SQL migrations to set up your database schema:

Create tables for: cabins, bookings, guests, settings
Set up Row Level Security (RLS) policies
Configure storage buckets for cabin images

🌐 Deployment

Both applications are configured for Vercel deployment but can be deployed to any hosting platform.

Deploy Admin Dashboard

# Install Vercel CLI
npm install -g vercel

# Deploy to Vercel
cd HavenHub
vercel --prod

Configuration:

Framework: Vite
Build Command: npm run build
Output Directory: dist
Root Directory: ./

Deploy Landing Page

# Deploy landing page
cd HavenHub-landing
vercel --prod

Configuration:

Framework: Next.js
Build Command: npm run build
Root Directory: HavenHub-landing

Alternative Deployment Options

Netlify: Drag and drop the dist folder
Render: Connect your Git repository
Railway: One-click deployment
AWS Amplify: Full-stack deployment

For detailed deployment instructions, see DEPLOYMENT.md

📸 Screenshots

Admin Dashboard

Click to view dashboard screenshots

Dashboard Overview

Cabin Management

Booking Management

Dark Mode

Landing Page

Click to view landing page screenshots

Hero Section

Cabin Listings

Booking Form

Mobile Responsive

🏗️ Architecture

System Architecture

┌─────────────────────────────────────────────────────────┐
│                     Client Layer                        │
├──────────────────────┬──────────────────────────────────┤
│  Admin Dashboard     │     Customer Landing Page        │
│  (React + Vite)      │     (Next.js + TypeScript)       │
│  Port: 5173          │     Port: 3000                   │
└──────────┬───────────┴──────────────┬───────────────────┘
           │                          │
           │    ┌─────────────────────┘
           │    │
           ▼    ▼
    ┌──────────────────┐
    │   Supabase       │
    │  (Backend)       │
    ├──────────────────┤
    │ • PostgreSQL DB  │
    │ • Authentication │
    │ • Storage        │
    │ • Real-time      │
    │ • REST API       │
    └──────────────────┘

Data Flow

Authentication: Users log in through Supabase Auth
Data Fetching: React Query caches and manages server state
Real-time Updates: Supabase real-time subscriptions for live data
File Uploads: Images stored in Supabase Storage
API Calls: RESTful API calls to Supabase

🧪 Testing

Run Tests

# Admin Dashboard
npm run test

# Landing Page
cd HavenHub-landing
npm run test

Linting

# Admin Dashboard
npm run lint

# Landing Page
cd HavenHub-landing
npm run lint

🔐 Security

✅ Row Level Security (RLS) policies in Supabase
✅ JWT-based authentication
✅ Protected routes and API endpoints
✅ Input validation and sanitization
✅ Secure environment variable handling
✅ HTTPS-only in production

📈 Performance Optimizations

⚡ Code splitting with React.lazy
📦 Optimized bundle size
🖼️ Image optimization
💾 Efficient caching with React Query
🎯 Memoization of expensive computations
🚀 Next.js Server Components for faster page loads
📊 Lazy loading of components

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Fork the project
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

📝 License

👨‍💻 Author

Zekarias Tamiru

Full-Stack Developer | React | Next.js | TypeScript

🙏 Acknowledgments

React - UI library
Next.js - React framework
Supabase - Backend platform
Tailwind CSS - CSS framework
shadcn/ui - Component library
Vercel - Deployment platform

📞 Contact

For any inquiries or support:

Email: [email protected]
LinkedIn: linkedin.com/in/zekariastamiru
GitHub: @zacktam12

⭐ Star this repository if you find it helpful!

Made with ❤️ by Zekarias Tamiru

Name		Name	Last commit message	Last commit date
Latest commit History 128 Commits
.github/workflows		.github/workflows
HavenHub-landing		HavenHub-landing
public		public
src		src
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
DEPLOYMENT.md		DEPLOYMENT.md
README.md		README.md
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
vercel.json		vercel.json
vite.config.js		vite.config.js

zacktam12/HavenHub

Folders and files

Latest commit

History

Repository files navigation