Building The Wild Oasis: A Modern Hotel Management System

When I set out to build The Wild Oasis, I wanted to create more than just another CRUD application. The goal was to develop a comprehensive hotel management system that could handle everything from cabin bookings to guest profiles, all while providing an intuitive user experience. Here's the story of how this project came together.

The Vision

Hotel management systems are notorious for being clunky and outdated. I envisioned a modern dashboard that would feel as smooth as any consumer app, with real-time data visualization, responsive design, and a clean interface that hotel staff would actually enjoy using.

Technology Stack Selection

After evaluating various options, I settled on a stack that prioritized developer experience and performance:

Next.js 15 with App Router for the frontend framework
HeroUI v2 for the component library
MongoDB with Mongoose for the database
Tailwind CSS for styling
TypeScript for type safety
SWR for data fetching and caching
Recharts for data visualization

The choice of Next.js 15 was driven by its excellent SSR capabilities and the new App Router's file-based routing system. HeroUI provided a modern component library that could handle both light and dark themes out of the box.

Database Design and API Architecture

One of the first challenges was designing a flexible customer data model that could accommodate various guest preferences and booking histories. The Customer model includes:

{
  name: String,
  email: String,
  nationality: String,
  nationalId: String,
  phoneNumber: String,
  address: {
    street: String,
    city: String,
    country: String,
    zipCode: String
  },
  emergencyContact: {
    name: String,
    phone: String,
    relationship: String
  },
  preferences: {
    smokingPreference: String,
    dietaryRestrictions: [String],
    accessibilityNeeds: [String]
  },
  totalSpent: Number,
  totalBookings: Number
}

The API routes were built with proper error handling, pagination, and search functionality. For example, the customers API supports:

Pagination with configurable page size
Search across multiple fields (name, email, nationality, ID)
Sorting by various criteria (name, spending, bookings)
Proper HTTP status codes and error responses

Component Architecture and UI Design

The component structure follows a modular approach with clear separation of concerns:

Sidebar Navigation

The sidebar component handles theme-aware logo switching and active state management:

const sidebarItems = [
  { label: "Dashboard", href: "/", icon: "🏠" },
  { label: "Cabins", href: "/cabins", icon: "🏘️" },
  { label: "Bookings", href: "/bookings", icon: "📅" },
  { label: "Guests", href: "/guests", icon: "👥" },
  { label: "Settings", href: "/settings", icon: "⚙️" },
];

Guest Management

The guest pages showcase advanced UI patterns:

List View: Pagination, search, sorting, and responsive cards
Detail View: Comprehensive guest profiles with loyalty tiers, preferences, and booking history
Dynamic Routing: Clean URLs with Next.js dynamic routes

Data Fetching Strategy

I implemented a robust data fetching strategy using SWR for client-side caching and real-time updates. The useCustomers hook provides:

Automatic revalidation
Error handling
Loading states
Optimistic updates

This ensures the UI stays responsive even with large datasets while maintaining data consistency.

Responsive Design Philosophy

Every component was built mobile-first with careful attention to touch interactions and screen real estate. The guest cards, for example, adapt their layout based on screen size while maintaining readability and functionality.

Development Workflow

The project includes comprehensive tooling:

{
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "lint": "eslint --fix",
    "seed": "tsx scripts/seed.ts"
  }
}

The seeding script generates realistic demo data using Faker.js, making it easy to test the application with meaningful content.

Database Setup and Deployment

I created detailed setup documentation for both MongoDB Atlas (cloud) and local MongoDB instances. This flexibility allows developers to choose their preferred development environment while maintaining consistency.

The connection logic includes proper error handling and environment-based configuration:

await connectDB();
const customers = await Customer.find(query)
  .sort(sort)
  .skip(skip)
  .limit(limit)
  .select("-__v");

Challenges and Solutions

Theme Management

Implementing dark mode required careful coordination between Next.js SSR and client-side theme switching. I solved this by using proper hydration checks and skeleton loaders.

Data Visualization

Creating responsive charts that work well on mobile required custom breakpoints and dynamic sizing. Recharts provided the foundation, but significant customization was needed. Especially for the area graph.

Performance Optimization.

Large guest lists could impact performance, so I implemented:

Server-side pagination
Debounced search
Optimized MongoDB queries with proper indexing

Lessons Learned

Building The Wild Oasis taught me several valuable lessons:

Component Reusability: Investing time in well-designed base components pays dividends as the project grows
Error Boundaries: Proper error handling at the API level prevents cascading failures
Mobile-First Design: Starting with mobile constraints leads to better overall UX
Documentation: Good setup docs are crucial for project handoffs and future maintenance

Future Enhancements

The foundation is solid for future features like:

Real-time notifications
Advanced reporting and analytics
Integration with payment systems
Multi-property management
Staff role management
Advanced User management

Conclusion

The Wild Oasis demonstrates how modern web technologies can create powerful, user-friendly business applications. By focusing on developer experience, performance, and design quality, we can build tools that people actually want to use.

The combination of Next.js, HeroUI, and MongoDB provides a solid foundation for rapid development while maintaining the flexibility to scale and adapt as requirements evolve. Most importantly, the project proves that enterprise software doesn't have to feel enterprise-y.

The Wild Oasis is open source and available for exploration and contribution. The codebase showcases best practices for modern React development, API design, and database integration.

The wild oasis [Admin Panel]