Merge pull request #185 from Vero-Ventures/dev

Dev

%ProgramData%/Microsoft/Windows/UUS/State/_active.uusver

@@ -0,0 +1 @@
+1301.2403.14011.0

.env.example

@@ -0,0 +1,3 @@
+EXPO_PUBLIC_REACT_APP_GEMINI_KEY=your_gemini_key
+EXPO_PUBLIC_REACT_APP_SUPABASE_URL=your_supabase_url
+EXPO_PUBLIC_REACT_APP_ANON_KEY=your_app_anon_key

.gitignore

@@ -30,6 +30,7 @@ yarn-error.*
 
 # local env files
 .env*.local
+.env
 
 # typescript
 *.tsbuildinfo

.husky/pre-commit 2

@@ -0,0 +1 @@
+npx lint-staged .

App.js

@@ -1,20 +1,159 @@
+import React, { useState, useEffect, useRef } from 'react';
+import {
+  Image,
+  Text,
+  View,
+  TouchableOpacity,
+  StyleSheet,
+  Animated,
+  Dimensions,
+  PanResponder,
+} from 'react-native';
 import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
+import Navigator from './src/navigator/Navigator';
+import { supabase } from './src/config/supabaseClient';
+import SignupScreen from './src/screens/SignupScreen';
+import { NavigationContainer } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
+import { Provider } from 'react-redux';
+import store from './src/store/storeConfig';
+import { userLogin } from './src/store/ducks/user';
+import ChatBotScreen from './src/screens/ChatbotScreen';
+import Modal from 'react-native-modal';
+
+
+const Stack = createStackNavigator();
+
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
+const TOOLTIP_SIZE = 60;
 
 export default function App() {
+  const [session, setSession] = useState(null);
+  const [isChatVisible, setIsChatVisible] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const pan = useRef(new Animated.ValueXY()).current;
+
+
+  useEffect(() => {
+    const checkSession = async () => {
+      const {
+        data: { session },
+      } = await supabase.auth.getSession();
+      if (session) {
+        setSession(session);
+        store.dispatch(userLogin(session));
+        setIsLoggedIn(true);
+        setIsLoading(false);
+      } else {
+        setIsLoading(false);
+      }
+    };
+
+    checkSession();
+
+    const { data: listener } = supabase.auth.onAuthStateChange(
+      (_event, session) => {
+        setSession(session);
+      }
+    );
+
+    return () => {
+      listener.unsubscribe();
+    };
+  }, []);
+
+  const handlePress = () => {
+    setIsChatVisible(true);
+  };
+  return (
+    <Provider store={store}>
+      <NavigationContainer>
+        <StatusBar style="auto" />
+        <Stack.Navigator screenOptions={{ headerShown: false }}>
+          {isLoggedIn ? (
+            <Stack.Screen name="Navigator" >
+              {() => (<Navigator setIsLoggedIn={setIsLoggedIn}/>)}
+            </Stack.Screen>
+          ) : (isLoading ? (
+            <Stack.Screen name="Loading" component={LoadingScreen}/> ) : (
+            <Stack.Screen name="Signup">
+              {() => (<SignupScreen setIsLoggedIn={setIsLoggedIn}/>)}
+            </Stack.Screen>
+          ))}
+        </Stack.Navigator>
+        {session && (
+          <>
+            <Modal
+              isVisible={isChatVisible}
+              onBackdropPress={() => setIsChatVisible(false)}
+              style={styles.modal}>
+              <View style={styles.modalContent}>
+                <ChatBotScreen
+                  navigation={{ goBack: () => setIsChatVisible(false) }}
+                />
+              </View>
+            </Modal>
+            <TouchableOpacity
+              style={styles.tooltipButton}
+              onPress={() => setIsChatVisible(true)}>
+              <View style={styles.tooltipCircle}>
+                <Image
+                  source={require('./assets/images/Chatbot.png')}
+                  style={styles.tooltipImage}
+                />
+              </View>
+            </TouchableOpacity>
+          </>
+        )}
+      </NavigationContainer>
+    </Provider>
+  );
+}
+
+
+export function LoadingScreen() {
   return (
-    <View style={styles.container}>
-      <Text>Initial commit for Habit Tracker</Text>
-      <StatusBar style="auto" />
+    <View>
+      <Text>Loading...</Text>
     </View>
   );
 }
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
+  tooltipButton: {
+    position: 'absolute',
+    bottom: 80,
+    right: 30,
+    zIndex: 1000,
+  },
+  tooltipCircle: {
+    width: 60,
+    height: 60,
+    borderRadius: 30,
+    backgroundColor: 'lightblue',
+    justifyContent: 'center',
     alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.8,
+    shadowRadius: 2,
+    elevation: 5,
+  },
+  tooltipImage: {
+    width: 50,
+    height: 50,
+    resizeMode: 'contain',
+  },
+  modal: {
     justifyContent: 'center',
+    alignItems: 'center',
+  },
+  modalContent: {
+    width: '100%',
+    height: '80%',
+    backgroundColor: 'white',
+    borderRadius: 10,
+    padding: 20,
   },
 });

README.md

@@ -1,50 +1,113 @@
-## **Project Description**
+# Live Timeless
+- [**Project Overview**](#project-overview)
+- [**Status**](#status)
+- [**Installation**](#installation)
+- [Project Structure](#project-structure)
+- [**Architecture and Design**](#architecture-and-design)
+- [**Usage**](#usage)
 
-We are excited to embark on an ambitious initiative to create a mobile app designed to promote healthy living and wellness optimization through:
+# **Project Overview**
 
-- Habit logging
-- Fitness trackers
-- Medical test analysis
-- Personalized AI coaching
+- **Description:** Live Timeless is a mobile application for IOS and Android designed to engage users in maintaining and tracking healthy habits. Live Timeless motivates consistent health habits with social engagement, helping users manage their health efficiently and potentially reduce life insurance premiums. The app streamlines health management with a user-friendly interface and AI-driven suggestions, saving time and enhancing habit adherence. This app was developed in response to the need for a more engaging and effective habit management tool.
 
-With a foundation in the CST program's Web and Mobile option, this app will be a fresh greenfield project iterating on an existing concept prototype called Live Timeless. Students will be encouraged to:
+# **Status:** 
 
-- Reassess and redesign this app from the ground up
-- Pick an appropriate and modern tech stack
-- Integrate with public APIs
+As of the latest project update (May 27th, 2024), "Live Timeless" has successfully implemented the majority of its planned features, aligning closely with our initial scope and objectives:
 
-This initiative will serve as a cornerstone for a broader corporate wellness program, blending financial incentives with health optimization. The goal is to empower users with actionable insights into their wellness journey, guided by:
+- **Coaching Chatbot:** Fully integrated with Google's gemini pro model, the AI coaching chatbot is operational, offering personalized plans and actionable steps to help users achieve their health goals.
 
-- Fitness tracker data
-- Regular blood-work
-- Social groups
-- A personalized AI chatbot coach
-- A corporate wellness program
+- **User Account Management:**: All user account management features are complete and functioning as intended, making it GDPR (General data protection regulation) compliant. This includes:
 
-## **Programming Language(s)**
+- Secure registration and login processes.
+- Functionalities to delete accounts and download user data.
+- Email-based authentication with enhanced security through OAuth (SupaAuth).
 
-Students will be expected to assess the project and pick an appropriate tech stack based on the project requirements and their capabilities. There is a strong preference for modern, popular, and open-source technologies. Examples include:
+- **Habit Setting and Tracking**:
 
-- Flutter
-- React Native
-- Django
-- Laravel
+- Users can set and track various habit goals such as water intake and daily pushups.
+- The application supports the upload of progress photos and descriptions.
+- Users can create, post, view, and track the progress of their habits and see detailed reports including optional progress photos and descriptions.
 
-(All technologies chosen must be free and open-source)
+- **System Performance and Scalability**:
 
-Students will also be given the opportunity to use APIs of existing services to augment their app's capabilities. Examples include:
+The backend architecture, powered by Supabase, effectively handles real-time data management and user interactions, ensuring scalability and robust performance.
 
-- OAuth / Firebase for authentication
-- Apple HealthKit / Google Fit for fitness trackers
-- OpenAI GPT for AI customized coaching chatbots
-- Tesseract for document OCR
+- **User Experience and Interface**:
 
-Additionally, students will have the chance to build their own DevOps pipeline, striving for continuous integration and deployment to the app store and to the cloud. We will be using GitHub Workflows and Actions. The use of a Mono-Repo is encouraged.
+The user interface is clean, intuitive, and fully responsive, designed to cater to a broad demographic across various devices and platforms.
 
-## **Hardware/Software Requirements**
+- **Pending Implementation**:
 
-Development will utilize open-source tools, with students using their own computing resources. Fitness wearables and health data will be provided as needed.
+The only two components not fully implemented as planned is the community interaction feature and instagram posting. While users can share and interact with friends' habit feeds, the broader community functionalities such as searching for and joining community groups around specific health habits are still under development. The API for posting habits to instagram also requires a few weeks for approval, ultimately causing it to fall out of scope for this project's timeline
 
-## **Current Work/Arrangement**
+# **Installation**
 
-Transitioning from manual and fragmented wellness tracking, this project aims for a technological leap. The existing mobile app, built with React Native & Laravel, provides a valuable learning platform, but the goal is to innovate beyond its current capabilities, creating a new, more sophisticated solution. The project aims to digitize and enhance the wellness tracking process, currently reliant on manual inputs and disparate systems. By leveraging Agile methodologies and a robust DevOps pipeline, we intend to streamline development and deployment, ensuring a seamless and scalable solution.
+- **Prerequisites:** Make sure you have the latest version of Node.js installed
+- **Setup:** Build instructions are here: https://docs.google.com/document/d/1zsOa7byMlx2hp6cp83-3GDG_W2bQ26CHtWwud7Ewx5s/edit?usp=sharing
+- **Configuration:** the .env file is to be placed in the root folder and is of the following format:
+
+- API key for Gemini
+EXPO_PUBLIC_REACT_APP_GEMINI_KEY=your_gemini_api_key_here
+
+- Supabase URL for connecting to your database
+EXPO_PUBLIC_REACT_APP_SUPABASE_URL=https://your_supabase_url_here
+
+- Anonymous key for accessing Supabase services
+EXPO_PUBLIC_REACT_APP_ANON_KEY=your_supabase_anon_key_here
+
+# Project Structure
+
+- /src: Holds most of the files making up the application
+- /navigator: Contains the bottom navigation bar that helps navigate between screens
+- /assets: Contains all static resources like images, logos, and icon files.
+- /components: Reusable components used throughout the application. These components are mostly from the frontend of the old repo
+- /screens: Contains all the individual screens of the app, each representing a different UI section.
+- /services: Contains an example service for Stripe implementation (is not used in app yet since it is out of scope. It's there for future development if needed)
+- /utils: Utility functions and helpers to run in the app
+- App.js: The root component that houses the overall app structure.
+
+# **Architecture and Design**
+
+![Live Timeless ERD](assets/images/ERDSupabase.png)
+
+- **Technologies Used:** List of main technologies, frameworks, and libraries.
+
+- AI-Model: Google Generative AI (Gemini Pro): This AI model is used to generate Habit plans/schedules for Users to follow to reach their health goals. 
+
+- Frontend Development: React Native (version 0.74): Is used for developing UI components which provide a seamless user experience across Android and IOS devices.
+
+- Backend Development: Supabase (in General Availability, version 2.43.1): This is a firebase alternative that provides a database to store and sync data in real-time among users which tracks habit data. Supabase also handles backend logic and API integrations. Lastly, supabase has built-in support for authentication including OAuth.
+
+- Emulation Framework:Expo Go (SDK 51): Will be used to emulate the app on both android and ios devices during development
+
+# **Usage**
+
+Below are some use cases among many for the application
+
+Creating a habit:
+- Navigate to the 'Habit' section in the app and click 'Add Habit'.
+- Enter details about the habit, such as 'Habit Name' (e.g., 'Drink Water'), 'Habit Description' (e.g., 'Stay hydrated by drinking 8 glasses of water daily'), and set an 'End Date' for the habit.
+
+Interacting with the AI Coach:
+- Open the 'AI Coach' by clicking on the circle with the chatbot icon in the bottom right
+- Input your current habit goals and receive guidance from Gemini AI
+- The AI is accessible when creating a habit as well, click 'generate habit schedule' to see a suggestion based on the habit you're creating
+
+Updating Posting Progress:
+- Access the 'Checklist' dashboard.
+- Select the habit for the day you completed the habit (this will cross it off the list).
+- Navigate to the 'Timeline' and create a new post. Select the habit you did for the day
+- Upload a description and progress photo optionally and submit the update.
+
+Viewing Friend Feeds:
+- Go to the 'Profile' section and select 'Find User'
+- search a user by their username and press 'Follow'
+- Go to the 'Timeline' tab.
+- View posts from friends including their habit updates and progress photos.
+- React with a heart or comment on their posts to engage with their progress.
+
+Registering and Managing Account:
+- Register for a new account by providing an email and creating a password.
+- Verify your email through the link sent to your email inbox.
+- Log in to access your new account.
+- Click the gear icon in the top right of 'Profile' to get your data, sign out, or delete your account

assets/styles/Colors.js

@@ -0,0 +1,32 @@
+import { ActivityIndicator } from "react-native-paper";
+
+export default {
+    primary: '#082139',
+    primary2: '#03111F',
+    primary3: '#9F2436',
+    primary4: '#9CC6FF',
+    primary5: '#00ACEE',
+    primary6: '#051626',
+    primary7: '#1D4369',
+    primary8: '#1B7BFC',
+    primary9: '#B5BCC4',
+    primary10: '#44648A',
+    grey1: '#212121',
+    grey2: '#424242',
+    grey3: '#616161',
+    grey4: '#757575',
+    grey5: '#9e9e9e',
+    grey6: '#bdbdbd',
+    grey7: '#e0e0e0',
+    dkGreyBg: '#232323',
+    greyOutline: '#cbd2d9',
+    background: '#082139',
+    text: '#FCFCFC',
+    text2: '#F8F7F9',
+    success: '#32a852',
+    error: '#cf3434',
+    warning: '#e86c00',
+    navigator: '#091725',
+    white: '#FFFFFF',
+    ActivityIndicator: '#90E0EF',
+};