Status: Active

Timeline: September 2020 - present

Visit site: samallabeachhouse.com

Technologies: StencilJS 2.14, Ionic Core 6, TypeScript, Telegram Bot API, Netlify

---

A website for a beachfront property rental in Prampram, Ghana. The site showcases the property with photos and booking information for guests looking for a coastal getaway.

Purpose

The Samalla Beach House needed an online presence to attract visitors and provide details about the property, amenities, and how to book a stay at this beachfront location along the coast of Ghana.

Technical Details

• Framework: StencilJS v2.14.2 — a Web Components compiler for building fast, reusable UI components
• UI Library: Ionic Core v6.0.11 — provides mobile-optimized UI components (slides, modals, buttons, icons, etc.)
• Language: TypeScript with JSX/TSX templating
• Routing: stencil-router-v2 for client-side navigation
• Build & Tooling: Stencil CLI (stencil build, stencil build --prerender for SSR/prerendering)
• Testing: Stencil's built-in spec and e2e test runner (Jest-based)
• Hosting: Static site output (www target), suitable for Netlify or similar static hosting
• Notifications/Backend: Telegram Bot API — reservation form submissions are sent as messages to a private Telegram channel, acting as a lightweight notification dashboard (no traditional database)
• Contact Channels: WhatsApp, Instagram, Facebook, Twitter, and email integrations for guest inquiries
• Maps: Embedded Google Maps iframe for property location
• Architecture: Component-based — 15 custom Web Components (app-hero, app-gallery, app-amenities, app-rooms, app-location, app-contact-modal, etc.)

Key Features

• Property photo gallery with swipeable image slider and navigation controls
• Reservation form with Telegram Bot notification system (serves as a real-time booking dashboard)
• Sleeping arrangements overview (2 bedrooms with queen beds, 1 sofa bed)
• 17 listed amenities including kitchen, A/C, beachfront access, free parking, and more
• Embedded Google Maps with location details and directions
• House rules section
• Multi-channel contact options (WhatsApp, email, phone, social media)
• Mobile-optimized for travelers browsing on phones
• Fast-loading Web Components with optional prerendering support