The Wild Oasis

Live Site

Welcome to The Wild Oasis! This is a hotel management admin web app where employees can manage cabins, bookings, and guests. It is built with Angular 20 using SSR, zoneless rendering, and PrimeNG for UI, with Firebase as backend for authentication and real-time data.

---

✨ Key Features

• User authentication via Firebase
• Dashboard with stats on bookings, check-ins, and revenue
• Manage cabins (create, update, delete)
• Manage guests and bookings (check-in, check-out, update status)
• Real-time data synchronization using Firebase
• Responsive UI built with PrimeNG
• Dark mode support
• Optimized performance with Angular SSR and Zoneless rendering

---

🛠️ Technologies Used

• Angular 20 with Server-Side Rendering (SSR)
• PrimeNG for modern, responsive UI components
• Zoneless Angular (using Signals for reactivity)
• Firebase (Authentication, Firestore, Real-time Database)
• TypeScript
• SCSS

---

📚 What I Learned

This project helped me deepen my skills in:

• SSR in Angular for performance & SEO
• Zoneless Angular with Signals for fine-grained reactivity
• PrimeNG to build production-ready UIs quickly
• Real-time applications using Firebase
• Scalable architecture for admin dashboards

---

⚡ Setup Instructions

To run this project locally:

1. Clone the repo:

   git clone https://github.com/basmasalim/The-Wild-Oasis.git
   cd The-Wild-Oasis
   

2. Install dependencies:

   npm install

3. Setup environment variables:

   • Add Firebase keys in src/environments/environment.ts

4. Run the development server:

   ng serve

5. Open http://localhost:4200 in your browser.

🙏 Acknowledgments

Special thanks to the Angular and Firebase communities for their amazing documentation and tools.