diff --git a/.env.local b/.env.local
new file mode 100644
index 0000000..2aa72de
--- /dev/null
+++ b/.env.local
@@ -0,0 +1,2 @@
+NEXT_PUBLIC_SUPABASE_URL=https://bdcvlsgmanecdortkjcu.supabase.co
+NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImJkY3Zsc2dtYW5lY2RvcnRramN1Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3MjY4ODIxNzIsImV4cCI6MjA0MjQ1ODE3Mn0.mVnJfs6UA-cPvRTTie8XmPmhCSNmfK5PtzgZ9Zhy9Ss
diff --git a/app/view-page/page.js b/app/view-page/page.js
new file mode 100644
index 0000000..12b308d
--- /dev/null
+++ b/app/view-page/page.js
@@ -0,0 +1,70 @@
+"use client";
+
+import { useEffect, useState } from 'react';
+import { createClient } from '@supabase/supabase-js';
+
+const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
+const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
+const supabase = createClient(supabaseUrl, supabaseAnonKey);
+
+export default function ViewPage() {
+ const [views, setViews] = useState();
+ const [error, setError] = useState(null);
+ console.log("hello");
+
+ useEffect(() => {
+ let isMounted = true; // flag to track if the effect has been run
+
+ const updateViewCount = async () => {
+ try {
+ // get data
+ let { data, error } = await supabase
+ .from('betoes')
+ .select('views')
+ .eq('name', 'Aileen');
+
+ if (error) throw error;
+
+ let currentViews = 0;
+ if (data && data.length > 0) {
+ currentViews = data[0].views || 0;
+ }
+
+ // update the view count only if still mounted
+ if (isMounted) {
+ const { error: updateError } = await supabase
+ .from('betoes')
+ .update({ views: currentViews + 1 })
+ .eq('name', 'Aileen');
+
+ if (updateError) throw updateError;
+
+ setViews(currentViews + 1);
+ }
+ } catch (err) {
+ if (isMounted) setError(err.message);
+ console.error("Error updating view count:", err);
+ }
+ };
+
+ updateViewCount();
+
+ return () => {
+ isMounted = false; // cleanup to mark the component as unmounted
+ };
+ }, []); // runs once when the component mounts
+
+
+ if (error) {
+ return Error: {error}
;
+ }
+
+ return (
+
+
Aileen
+
Views: {views}
+