crud for tasks + auth

2026-04-20 01:05:29 +02:00
parent 0abfb47d6f
commit 473ba75e3e
13 changed files with 916 additions and 14 deletions
--- a/app/(tabs)/_layout.tsx
+++ b/app/(tabs)/_layout.tsx
@@ -0,0 +1,40 @@
+import { supabase } from "@/lib/supabase";
+import { Session } from "@supabase/supabase-js";
+import { Redirect, Tabs } from "expo-router";
+import { useEffect, useState } from "react";
+
+export default function TabLayout() {
+  const [session, SetSession] = useState<Session | null>(null)
+  const [loading, SetLoading] = useState(true);
+
+  useEffect(() => {
+    const loadSession = async () => {
+      const { data } = await supabase.auth.getSession();
+      SetSession(data.session ?? null);
+      SetLoading(false);
+    }
+    loadSession();
+
+    const { data: sub } = supabase.auth.onAuthStateChange((_event, newSession) => {
+      SetSession(newSession);
+      SetLoading(false);
+    });
+
+    return () => sub.subscription.unsubscribe();
+  }, []);
+
+  if (loading) {
+    return null;
+  }
+
+  if (!session) {
+    return <Redirect href="/createUser" />;
+  }
+
+  return (
+    <Tabs>
+      <Tabs.Screen name="index" options={{title: "Today"}} />
+      <Tabs.Screen name="tasks" options={{title: "Tasks"}} />
+    </Tabs>
+  );
+}
--- a/app/(tabs)/createTask.tsx
+++ b/app/(tabs)/createTask.tsx
@@ -0,0 +1,110 @@
+import { defaultStyles } from '@/constants/defaultStyles';
+import { supabase } from '@/lib/supabase';
+import { router, Stack } from 'expo-router';
+import { useState } from 'react';
+import { ActivityIndicator, Alert, Button, Keyboard, KeyboardAvoidingView, Platform, Pressable, Text, TextInput, TouchableWithoutFeedback, View } from 'react-native';
+
+export default function CreateTask() {
+  const [title, SetTitle] = useState('');
+  const [description, SetDescription] = useState('');
+  const [isCompleted, SetIsCompleted] = useState(false);
+  const [deadline, SetDeadline] = useState('');
+  const [isSaving, SetIsSaving] = useState(false);
+
+  const AddNote = async () => {
+    if(title.trim() === '' || description.trim() === '' || deadline.trim() === '') {
+      Alert.alert("All fields are required!");
+      return;
+    }
+        
+    const { data, error: userError } = await supabase.auth.getUser();
+
+    if(userError || !data.user) {
+      router.replace("../createUser");
+      return;
+    } 
+
+    SetIsSaving(true);
+
+    const { error: dbError } = await supabase.from("tasks").insert({
+      title,
+      description,
+      isCompleted,
+      lastChanged: new Date().toISOString(),
+      deadline,
+      uId: data.user.id,
+    });
+
+    if (dbError) {
+      Alert.alert("Task could not be created, please try again");
+      SetIsSaving(false);
+      return;
+    }
+
+    Alert.alert("Task successfully added!");
+
+    SetTitle('');
+    SetDescription('');
+    SetIsCompleted(false);
+    SetDeadline('');
+
+    SetIsSaving(false);
+
+    router.back();
+  }
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: "Create Task",
+          headerTitleStyle: defaultStyles.title
+        }}
+      />
+
+      <View style={defaultStyles.container}>
+        <Text style={defaultStyles.title}>Create New Task</Text>
+        <KeyboardAvoidingView style={{ flex: 1 }} behavior={Platform.OS === "ios" ? "padding" : "height"}>
+          <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+            <View style={defaultStyles.container}>
+              <TextInput
+                style={defaultStyles.inputText}
+                placeholder="Enter title"
+                value={title}
+                onChangeText={SetTitle}
+              />
+              <TextInput
+                style={defaultStyles.inputText}
+                placeholder="Enter description"
+                value={description}
+                onChangeText={SetDescription}
+              />
+              <TextInput
+                style={defaultStyles.inputText}
+                placeholder="Deadline (YYYY-MM-DD)"
+                value={deadline}
+                onChangeText={SetDeadline}
+              />
+              <Pressable
+                onPress={() => SetIsCompleted(state => !state)}
+                style={defaultStyles.checkboxContainer}
+              >
+                <View style={defaultStyles.checkbox}>
+                  {isCompleted && <Text style={defaultStyles.checkboxMark}>✓</Text>}
+                </View>
+                <Text style={defaultStyles.checkboxLabel}>{isCompleted ? 'Completed' : 'Not completed'}</Text>
+              </Pressable>
+
+              <Button title={isSaving ? "Saving..." : "Save"} onPress={AddNote} disabled={isSaving} />
+              {isSaving && (
+                <ActivityIndicator size="large" />
+              )}
+              <Button title="Cancel" onPress={() => router.back()} />
+            </View>
+          </TouchableWithoutFeedback>
+        </KeyboardAvoidingView>
+      </View>
+    </>
+  )
+}
+
--- a/app/(tabs)/editTask.tsx
+++ b/app/(tabs)/editTask.tsx
@@ -0,0 +1,133 @@
+import { defaultStyles } from '@/constants/defaultStyles';
+import { supabase } from '@/lib/supabase';
+import { router, Stack, useFocusEffect, useLocalSearchParams } from 'expo-router';
+import { useCallback, useState } from 'react';
+import { ActivityIndicator, Alert, Button, Keyboard, KeyboardAvoidingView, Platform, Pressable, Text, TextInput, TouchableWithoutFeedback, View } from 'react-native';
+
+export default function EditTask() {
+  const [title, SetTitle] = useState('');
+  const [description, SetDescription] = useState('');
+  const [isCompleted, SetIsCompleted] = useState(false);
+  const [deadline, SetDeadline] = useState('');
+  const [isSaving, SetIsSaving] = useState(false);
+  const { tId } = useLocalSearchParams();
+
+  useFocusEffect(
+    useCallback(() => {
+      const GetTask = async () => {
+        if (!tId) return;
+
+        const { data, error } = await supabase.from("tasks").select("*").eq("tId", tId).single();
+
+        if (error) {
+          Alert.alert("Task not found");
+          return;
+        }
+
+        if (data) {
+          SetTitle(data.title);
+          SetDescription(data.description);
+          SetIsCompleted(data.isCompleted);
+          SetDeadline(data.deadline);
+        }
+      }
+      GetTask();
+    }, [tId])
+  );
+
+  const EditTask = async () => {
+    if(title.trim() === '' || description.trim() === '' || deadline.trim() === '') {
+      Alert.alert("All fields are required!");
+      return;
+    }
+        
+    const { data, error: userError } = await supabase.auth.getUser();
+
+    if(userError || !data.user) {
+      router.replace("../createUser");
+      return;
+    } 
+
+    SetIsSaving(true);
+
+    const { error: dbError } = await supabase.from("tasks").update({
+      title,
+      description,
+      isCompleted,
+      lastChanged: new Date().toISOString(),
+      deadline,
+      uId: data.user.id,
+    }).eq("tId", tId);
+
+    if (dbError) {
+      Alert.alert("Task could not be edited, please try again");
+      return;
+    }
+
+    Alert.alert("Task successfully edited!");
+
+    SetTitle('');
+    SetDescription('');
+    SetIsCompleted(false);
+    SetDeadline('');
+
+    SetIsSaving(false);
+
+    router.back();
+  }
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: "Edit Task",
+          headerTitleStyle: defaultStyles.title
+        }}
+      />
+
+      <View style={defaultStyles.container}>
+        <Text style={defaultStyles.title}>Edit Task</Text>
+        <KeyboardAvoidingView style={{ flex: 1 }} behavior={Platform.OS === "ios" ? "padding" : "height"}>
+          <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+            <View style={defaultStyles.container}>
+              <TextInput
+                style={defaultStyles.inputText}
+                placeholder="Title"
+                value={title}
+                onChangeText={SetTitle}
+              />
+              <TextInput
+                style={defaultStyles.inputText}
+                placeholder="Text"
+                value={description}
+                onChangeText={SetDescription}
+              />
+              <TextInput
+                style={defaultStyles.inputText}
+                placeholder="Deadline (YYYY-MM-DD)"
+                value={deadline}
+                onChangeText={SetDeadline}
+              />
+              <Pressable
+                onPress={() => SetIsCompleted(state => !state)}
+                style={defaultStyles.checkboxContainer}
+              >
+                <View style={defaultStyles.checkbox}>
+                  {isCompleted && <Text style={defaultStyles.checkboxMark}>✓</Text>}
+                </View>
+                <Text style={defaultStyles.checkboxLabel}>{isCompleted ? 'Completed' : 'Not completed'}</Text>
+              </Pressable>
+
+              <Button title={isSaving ? "Saving..." : "Save"} onPress={EditTask} disabled={isSaving} />
+              {isSaving && (
+                <ActivityIndicator size="large" />
+              )}
+              <Button title="Cancel" onPress={() => router.back()} />
+            </View>
+          </TouchableWithoutFeedback>
+        </KeyboardAvoidingView>
+      </View>
+    </>
+  )
+}
+
--- a/app/(tabs)/index.tsx
+++ b/app/(tabs)/index.tsx
@@ -0,0 +1,28 @@
+import { defaultStyles } from "@/constants/defaultStyles";
+import { supabase } from "@/lib/supabase";
+import { Stack } from "expo-router";
+import { Button, Text, View } from "react-native";
+
+export default function HomeScreen() {
+  return (
+    <View style={defaultStyles.container}>
+      <Stack.Screen
+        options={{
+          title: "Tasks",
+          headerTitleStyle: defaultStyles.title,
+          headerRight: () => {
+            return (
+              <View style={defaultStyles.buttonContainer}>
+                <Button title="Logout" onPress={async () => await supabase.auth.signOut()} />
+              </View>
+            )
+          },
+        }}
+      />
+
+      <View style={defaultStyles.container}>
+        <Text style={defaultStyles.body}>Hello, World!</Text>
+      </View>
+    </View>
+  )
+}
--- a/app/(tabs)/tasks.tsx
+++ b/app/(tabs)/tasks.tsx
@@ -0,0 +1,141 @@
+import { defaultStyles } from "@/constants/defaultStyles";
+import { supabase } from "@/lib/supabase";
+import { Ionicons } from '@expo/vector-icons';
+import { Session } from "@supabase/supabase-js";
+import { router, Stack, useFocusEffect } from "expo-router";
+import { useCallback, useEffect, useState } from "react";
+import { Alert, Button, Pressable, SectionList, Text, View } from "react-native";
+
+type Task = {
+  tId: string;
+  title: string;
+  description: string;
+  isCompleted: boolean;
+  lastChanged: string;
+  deadline: string;
+  uId: string;
+}
+
+export default function Tasks() {
+  const [tasks, SetTasks] = useState<Task[]>([])
+  const [session, SetSession] = useState<Session | null>(null)
+
+  const taskSections = [
+    { title: "Upcoming Tasks", data: tasks.filter((task) => !task.isCompleted), emptyMessage: "No upcoming tasks" },
+    { title: "Completed Tasks", data: tasks.filter((task) => task.isCompleted), emptyMessage: "No completed tasks" },
+  ];
+
+  useEffect(() => {
+    supabase.auth.getSession().then(({ data }) => SetSession(data.session ?? null))
+    const { data: sub } = supabase.auth.onAuthStateChange((_event, newSession) => {
+      SetSession(newSession)
+    })
+    return () => sub.subscription.unsubscribe()
+    },
+  [])
+
+  useFocusEffect(
+    useCallback(() => {
+      if (session) {
+        GetTasks();
+      }
+    }, [session])
+  );
+
+  const GetTasks = async () => { 
+    const { data, error } = await supabase.from("tasks").select("tId, title, description, isCompleted,lastChanged, deadline, uId").order("deadline", { ascending: false });
+
+    if (error) {
+      Alert.alert("Task could not be fetched, please try again");
+      return;
+    }
+
+    SetTasks(data ?? []);
+  }
+
+  const DeleteTask = async (tId: string) => {
+    Alert.alert(
+      "Delete Task",
+      "Are you sure you want to delete this task?",
+      [
+        {
+          text: "Cancel",
+          style: "cancel"
+        },
+        {
+          text: "Delete",
+          style: "destructive",
+          onPress: async () => {
+            const { error } = await supabase.from("tasks").delete().eq("tId", tId);
+
+            if (error) {
+              Alert.alert("Task could not be deleted, please try again");
+              return;
+            }
+
+            Alert.alert("Task deleted successfully!");
+            GetTasks();
+          }
+        }
+      ]
+    )
+  }
+
+  return (
+    <View style={defaultStyles.container}>
+      <Stack.Screen
+        options={{
+          title: "Tasks",
+          headerTitleStyle: defaultStyles.title,
+          headerRight: () => {
+            return (
+              <View style={defaultStyles.buttonContainer}>
+                <Pressable style={defaultStyles.circularButton} onPress={GetTasks}>
+                  <Ionicons name="refresh" size={22} color="#333" />
+                </Pressable>
+                <Button title="Logout" onPress={async () => await supabase.auth.signOut()} />
+              </View>
+            )
+          },
+        }}
+      />
+
+      <View style={defaultStyles.buttonContainer}>
+        <Button title="Create Task" onPress={() => router.push("/createTask")} />
+      </View>
+
+      <SectionList
+        sections={taskSections}
+        keyExtractor={(item) => item.tId}
+        renderSectionHeader={({ section: { title } }) => <Text style={defaultStyles.subtitle}>{title}</Text>}
+        renderItem={({ item }) => {
+          const isOwner = session?.user.id === item.uId;
+
+          return (
+            <View style={defaultStyles.container}>
+              <Text style={defaultStyles.boldBody}>{item.title}</Text>
+              <Text style={defaultStyles.body}>{item.deadline}</Text> 
+
+              {isOwner && (
+                <View style={defaultStyles.buttonContainer}>
+                  <Button title="Edit" onPress={() => router.push({pathname: "/editTask", params: { tId: item.tId }})} />
+                  <Button title="Delete" onPress={() => DeleteTask(item.tId)} />
+                </View>
+              )}
+            </View>
+          );
+        }}
+        renderSectionFooter={({ section }) =>
+          section.data.length === 0 ? (
+            <View style={defaultStyles.container}>
+              <Text style={defaultStyles.body}>{section.emptyMessage}</Text>
+              <View style={defaultStyles.separator} />
+            </View>
+          ) : (
+            <View style={defaultStyles.separator} />
+          )
+        }
+      />
+    </View>
+  )
+}
--- a/app/createUser.tsx
+++ b/app/createUser.tsx
@@ -0,0 +1,69 @@
+import { defaultStyles } from '@/constants/defaultStyles';
+import { supabase } from '@/lib/supabase';
+import { router, Stack } from 'expo-router';
+import { useState } from 'react';
+import { Alert, Button, Keyboard, KeyboardAvoidingView, Platform, Pressable, Text, TextInput, TouchableWithoutFeedback, View } from 'react-native';
+
+export default function CreateUser() {
+  const [email, SetEmail] = useState('');
+  const [password, SetPassword] = useState('');
+
+  const SignUp = async () => {
+    if(email.trim() === '' || password.trim() === '') {
+      Alert.alert("All fields are required!");
+      return;
+    }
+
+    const {error} = await supabase.auth.signUp({
+      email: email,
+      password: password,
+    });
+
+    if (error) {
+      Alert.alert("User could not be created, please try again");
+      return;
+    }
+
+    router.replace("/");
+  }
+
+  return (
+    <View style={defaultStyles.container}>
+      <Stack.Screen
+        options={{
+          title: "Create User",
+          headerTitleStyle: defaultStyles.title,
+        }}
+      />
+      <View style={defaultStyles.container}>
+        <Text style={defaultStyles.title}>Create User</Text>
+        <KeyboardAvoidingView style={{ flex: 1 }} behavior={Platform.OS === "ios" ? "padding" : "height"}>
+          <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+            <View style={defaultStyles.container}>
+              <TextInput
+                style={defaultStyles.inputText}
+                placeholder="Enter Email"
+                value={email}
+                onChangeText={SetEmail}   
+                autoCapitalize="none"
+              />
+              <TextInput
+                style={defaultStyles.inputText}
+                placeholder="Enter Password"
+                value={password}
+                onChangeText={SetPassword}
+                secureTextEntry
+              />
+                
+              <Button title="Save" onPress={SignUp} />
+              <Button title="Cancel" onPress={() => router.back()} />
+              <Pressable onPress={() => router.push("/login")} style={defaultStyles.buttonContainer}>
+                <Text style={defaultStyles.linkText}>Already have an Account? login here</Text>
+              </Pressable>
+            </View>
+          </TouchableWithoutFeedback>
+        </KeyboardAvoidingView>
+      </View>
+    </View>
+  )
+}
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -1,9 +0,0 @@
-import { Text, View } from "react-native";
-
-export default function HomeScreen() {
-  return (
-    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
-      <Text>Home</Text>
-    </View>
-  );
-}
--- a/app/login.tsx
+++ b/app/login.tsx
@@ -0,0 +1,66 @@
+import { defaultStyles } from "@/constants/defaultStyles";
+import { supabase } from "@/lib/supabase";
+import { router, Stack } from "expo-router";
+import { useState } from "react";
+import { Alert, Button, Keyboard, KeyboardAvoidingView, Platform, Text, TextInput, TouchableWithoutFeedback, View } from "react-native";
+
+export default function Login() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');  
+
+  const login = async () => {
+    if(email.trim() === '' || password.trim() === '') {
+      Alert.alert("All fields are required!");
+      return;
+    }
+
+    const { error } = await supabase.auth.signInWithPassword({
+      email,
+      password
+    });
+
+    if (error) {
+      Alert.alert("Login failed, please check your credentials and try again");
+      return;
+    }
+
+    router.replace("/");
+  }
+
+  return (
+    <View style={defaultStyles.container}>
+      <Stack.Screen
+        options={{
+          title: "Login",
+          headerTitleStyle: defaultStyles.title
+        }}
+      />
+
+      <View style={defaultStyles.container}>
+        <Text style={defaultStyles.title}>Login</Text>
+        <KeyboardAvoidingView style={{ flex: 1 }} behavior={Platform.OS === "ios" ? "padding" : "height"}>
+          <TouchableWithoutFeedback onPress={Keyboard.dismiss}> 
+            <View style={defaultStyles.container}>  
+              <TextInput
+                style={defaultStyles.inputText}
+                placeholder="Enter Email" 
+                value={email}
+                onChangeText={setEmail}
+                autoCapitalize="none"
+              />
+              <TextInput
+                style={defaultStyles.inputText}
+                placeholder="Enter Password"
+                value={password}
+                onChangeText={setPassword}
+                secureTextEntry
+              />
+              <Button title="Login" onPress={login} />
+              <Button title="Cancel" onPress={() => router.push("/")} />
+            </View>   
+          </TouchableWithoutFeedback>
+        </KeyboardAvoidingView>
+      </View>
+    </View>
+  )
+}
--- a/constants/defaultStyles.ts
+++ b/constants/defaultStyles.ts
@@ -0,0 +1,105 @@
+import { StyleSheet } from "react-native";
+
+export const defaultStyles = StyleSheet.create({
+  container: { 
+    flex: 1, 
+    padding: 24, 
+    marginVertical: 4,
+    marginHorizontal: 4,
+  },
+  buttonContainer: {
+    flexDirection: "row",
+    gap: 8,
+    justifyContent: "center",
+    marginHorizontal: 4,
+    marginVertical: 4,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: '700',
+    textAlign: 'center',
+    marginVertical: 4,
+    marginHorizontal: 4,
+  },
+  subtitle: {
+    fontSize: 20,
+    fontWeight: '600',
+    textAlign: 'center',
+    marginVertical: 4,
+    marginHorizontal: 4,
+  },
+  body: {
+    fontSize: 16,
+    fontWeight: '400',
+    textAlign: 'left',
+    marginVertical: 4,
+    marginHorizontal: 4,
+  },
+  separator: {
+    height: 1,
+    backgroundColor: '#000000',
+    marginVertical: 4,
+    marginHorizontal: 4,
+  },
+  circularButton: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginVertical: 4,
+    marginHorizontal: 4,
+  },
+  linkText: {
+    color: "blue",
+    textDecorationLine: "underline",
+    textAlign: "center",
+    marginVertical: 4,
+    marginHorizontal: 4,
+  },
+  inputText: {
+    borderWidth: 1,
+    borderColor: "#ccc",
+    borderRadius: 6,
+    fontSize: 16,
+    fontWeight: '400',
+    textAlign: 'left',
+    marginVertical: 4,
+    marginHorizontal: 4,
+  },
+  checkboxContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    marginVertical: 4,
+    marginHorizontal: 4,
+  },
+  checkbox: {
+    width: 24,
+    height: 24,
+    borderWidth: 2,
+    borderColor: '#666',
+    borderRadius: 4,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginVertical: 4,
+    marginHorizontal: 4,
+  },
+  checkboxMark: {
+    fontSize: 14,
+    fontWeight: '700',
+  },
+  checkboxLabel: {
+    fontSize: 16,
+    color: '#111',
+    marginVertical: 4,
+    marginHorizontal: 4,
+  },
+  boldBody: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    textAlign: 'left',
+    marginVertical: 4,
+    marginHorizontal: 4,
+  },
+});
--- a/lib/supabase.ts
+++ b/lib/supabase.ts
@@ -1,7 +1,28 @@
+import { createClient } from '@supabase/supabase-js';
+import * as SecureStore from 'expo-secure-store';
+import 'react-native-url-polyfill/auto';

-import { createClient } from '@supabase/supabase-js'
+const supabaseUrl = process.env.EXPO_PUBLIC_SUPABASE_URL!
+const supabaseKey = process.env.EXPO_PUBLIC_SUPABASE_PUBLISHABLE_KEY!

-export const supabase = createClient(
-    process.env.EXPO_PUBLIC_SUPABASE_URL,
-    process.env.EXPO_PUBLIC_SUPABASE_PUBLISHABLE_KEY
-)
+const SecureStoreAdapter = {
+  getItem: async (key: string) => {
+    return await SecureStore.getItemAsync(key);
+  },
+  setItem: async (key: string, value: string) => {
+    await SecureStore.setItemAsync(key, value);
+  },
+  removeItem: async (key: string) => {
+    await SecureStore.deleteItemAsync(key);
+  },
+};
+
+export const supabase = createClient(supabaseUrl, supabaseKey, {
+  auth: {
+    storage: SecureStoreAdapter,
+    autoRefreshToken: true,
+    persistSession: true,
+    detectSessionInUrl: false,
+  },
+})
+        
--- a/notes/work-report-2026-04-20.md
+++ b/notes/work-report-2026-04-20.md
@@ -0,0 +1,173 @@
+# Task Management Mobile Application – Project Summary
+
+## Overview
+This project is a mobile task management application developed using **React Native (Expo)** with **Supabase** as the backend. The application enables users to create, view, edit, and delete tasks while maintaining secure authentication and session management.
+
+The system follows a full-stack architecture, integrating frontend UI components with backend database operations and authentication services.
+
+---
+
+## Technologies Used
+
+### Frontend
+- React Native (Expo)
+- Expo Router (navigation)
+- React Hooks (`useState`, `useEffect`, `useFocusEffect`)
+
+### Backend
+- Supabase (PostgreSQL database + authentication)
+- Row Level Security (RLS) for data protection
+
+### Storage & Security
+- Expo SecureStore for persistent session storage
+
+---
+
+## Application Structure
+
+### Navigation
+The app uses **Expo Router** with a combination of:
+- **Tab navigation** for main screens
+- **Stack navigation** for individual pages
+
+Main routes:
+- `/` → Home (Today view)
+- `/tasks` → Task list
+- `/createTask` → Create new task
+- `/editTask` → Edit existing task
+- `/createUser` → Sign up
+- `/login` → Login
+
+---
+
+## Authentication System
+
+The application includes a complete authentication flow:
+
+- **User Registration**
+  - Email and password-based signup
+- **User Login**
+  - Credential-based authentication
+- **Session Management**
+  - Persistent sessions using SecureStore
+- **Protected Routes**
+  - Users are redirected if not authenticated
+- **Logout**
+  - Ends session via Supabase
+
+---
+
+## Task Management Features
+
+### Create Task
+Users can:
+- Enter title, description, and deadline
+- Set completion status using a checkbox
+- Save tasks to the database
+
+### Read Tasks
+- Tasks are fetched from Supabase
+- Displayed using a `SectionList`
+- Categorized into:
+  - Upcoming Tasks
+  - Completed Tasks
+- Supports manual refresh and auto-refresh on screen focus
+
+### Update Task
+- Existing tasks can be edited
+- Fields are pre-filled with current values
+- Updates are sent to the database using task ID
+
+### Delete Task
+- Tasks can be deleted with confirmation
+- List updates after deletion
+
+---
+
+## User Interface Design
+
+A centralized styling system (`defaultStyles`) was implemented to ensure consistency across the application.
+
+### Key UI Components
+- Text inputs for forms
+- Buttons and pressable elements
+- Custom checkbox component
+- Sectioned task list
+- Activity indicators for loading states
+
+### UX Features
+- Keyboard handling with `KeyboardAvoidingView`
+- Tap outside to dismiss keyboard
+- Alerts for feedback (success/errors)
+- Dynamic headers with actions (refresh, logout)
+
+---
+
+## State Management
+
+The app uses local state via React Hooks:
+- `useState` for form data and UI state
+- `useEffect` for lifecycle events
+- `useFocusEffect` for refreshing data when screens are focused
+
+---
+
+## Backend Integration
+
+### Supabase Client
+- Configured using environment variables
+- Secure session persistence enabled
+- Automatic token refresh
+
+### Database Operations
+- `INSERT` → create tasks
+- `SELECT` → fetch tasks
+- `UPDATE` → edit tasks
+- `DELETE` → remove tasks
+
+### Data Model (Tasks Table)
+- `tId` (UUID)
+- `title`
+- `description`
+- `deadline`
+- `isCompleted`
+- `lastChanged`
+- `uId` (user reference)
+
+---
+
+## Security
+
+- Row Level Security (RLS) ensures users can only access their own tasks
+- Queries are filtered using `auth.uid() = uId`
+- Update operations require a `WHERE` clause to prevent unintended changes
+
+---
+
+## Challenges and Solutions
+
+### Routing Issues
+- Fixed incorrect relative paths by using absolute routes and parameters
+
+### Data Binding
+- Ensured edit forms are pre-filled by fetching data using task ID
+
+### Database Errors
+- Resolved missing `WHERE` clause in update queries
+- Handled invalid date formats
+
+### UI Layout Problems
+- Improved header layout by replacing default buttons with custom components
+- Fixed spacing and alignment issues
+
+---
+
+## Conclusion
+
+The project successfully demonstrates the development of a full-stack mobile application with:
+- Secure authentication
+- Persistent user sessions
+- CRUD operations with a backend database
+- Structured navigation and UI design
+
+The application follows scalable patterns and provides a solid foundation for further enhancements such as improved UI design, additional features, and performance optimizations.
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
        "expo-image": "~3.0.11",
        "expo-linking": "~8.0.11",
        "expo-router": "~6.0.23",
+        "expo-secure-store": "^55.0.13",
        "expo-splash-screen": "~31.0.13",
        "expo-status-bar": "~3.0.9",
        "expo-symbols": "~1.0.8",
@@ -32,6 +33,7 @@
        "react-native-reanimated": "~4.1.1",
        "react-native-safe-area-context": "~5.6.0",
        "react-native-screens": "~4.16.0",
+        "react-native-url-polyfill": "^3.0.0",
        "react-native-web": "~0.21.0",
        "react-native-worklets": "0.5.1"
      },
@@ -6551,6 +6553,15 @@
        "node": ">=10"
      }
    },
+    "node_modules/expo-secure-store": {
+      "version": "55.0.13",
+      "resolved": "https://registry.npmjs.org/expo-secure-store/-/expo-secure-store-55.0.13.tgz",
+      "integrity": "sha512-I6r0JNO1Fd4o0Gu7Ixiic7s89lqgdUHq17uBH9y1f/AntoyKn71TdtYJH82RgfsBbu5qNVzrwImmvlANyOlITQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
    "node_modules/expo-server": {
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/expo-server/-/expo-server-1.0.5.tgz",
@@ -10475,6 +10486,18 @@
        "react-native": "*"
      }
    },
+    "node_modules/react-native-url-polyfill": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/react-native-url-polyfill/-/react-native-url-polyfill-3.0.0.tgz",
+      "integrity": "sha512-aA5CiuUCUb/lbrliVCJ6lZ17/RpNJzvTO/C7gC/YmDQhTUoRD5q5HlJfwLWcxz4VgAhHwXKzhxH+wUN24tAdqg==",
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-url-without-unicode": "8.0.0-3"
+      },
+      "peerDependencies": {
+        "react-native": "*"
+      }
+    },
    "node_modules/react-native-web": {
      "version": "0.21.2",
      "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.21.2.tgz",
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
    "expo-image": "~3.0.11",
    "expo-linking": "~8.0.11",
    "expo-router": "~6.0.23",
+    "expo-secure-store": "^55.0.13",
    "expo-splash-screen": "~31.0.13",
    "expo-status-bar": "~3.0.9",
    "expo-symbols": "~1.0.8",
@@ -35,6 +36,7 @@
    "react-native-reanimated": "~4.1.1",
    "react-native-safe-area-context": "~5.6.0",
    "react-native-screens": "~4.16.0",
+    "react-native-url-polyfill": "^3.0.0",
    "react-native-web": "~0.21.0",
    "react-native-worklets": "0.5.1"
  },