Back to Archive
Case Study ยท 2024FeaturedBeta

God's Own Guide

God's Own Guide

Unlock the essence of Kerala with a personalized, interactive, and offline-ready travel companion.

Visit Portal
God's Own Guide
Destination Explored (0.3s)

An immersive tourism platform designed for Kerala, 'God's Own Country,' offering dynamic destination guides, cultural insights, and user-generated content. Features robust content management, user dashboards, AI-powered itineraries, and PWA capabilities for a seamless offline experience.

Problem Visual
The Problem

Navigating Static Guidebooks in a Dynamic World

Modern travelers seek more than static guidebooks; they crave dynamic, personalized experiences and reliable information on the go, even in areas with limited connectivity. Traditional tourism platforms often fall short, lacking interactive features, efficient content updates, and the ability to serve users offline, leading to fragmented planning and missed opportunities for authentic exploration.

Solution Visual
The Solution

Intelligent Exploration.
Personalized Journeys.

This project delivers a high-performance travel guide leveraging Astro for blazing-fast page loads and React for interactive components. It integrates Supabase for secure authentication, real-time data management (destinations, culture guides, user profiles, reviews), and scalable file storage. Key features include an intuitive admin panel for streamlined content updates, a personalized user dashboard with saved trips and AI-generated itineraries, interactive maps powered by Leaflet, an immersive audio guide player, and full Progressive Web App (PWA) support for offline access, ensuring an uninterrupted travel experience.

Feature Visual
Implementation

Dynamic Content, Offline Ready.

Real-time Data Sync
PWA Offline Mode
AI-Powered Itineraries
Interactive Maps

System Core // Role-Based Access Control with Supabase

import React, { useEffect, useState } from 'react';
import { supabase } from '../../lib/supabase';

const AdminGuard = ({ children }) => {
    const [authorized, setAuthorized] = useState(false);

    useEffect(() => {
        const checkAuth = async () => {
            const { data: { session } } = await supabase.auth.getSession();
            if (!session) {
                window.location.href = '/'; // Redirect unauthenticated users
                return;
            }

            const { data: profile } = await supabase
                .from('profiles')
                .select('role')
                .eq('id', session.user.id)
                .single();

            if (profile?.role === 'admin') {
                setAuthorized(true);
            } else {
                window.location.href = '/'; // Redirect non-admin users
            }
        };
        checkAuth();
    }, []);

    if (!authorized) return null; // Or show a loading/unauthorized message
    return <>{children}</>;
};

export default AdminGuard;
typescript
Next Project

Next Case Study

Slingd