# Project export: Wisdom Bridge This document was generated by HackStack to give an AI agent context about a hackathon project. Sections are labeled with their provenance; content marked as truncated was cut to keep this document small. ## Project metadata - Hackathon: TreeHacks 2024 - Tagline: Connect, Share, Inspire. Our app brings together generations to swap stories, learn, and enjoy common interests. Where wisdom meets curiosity and life's experiences become shared adventures. - Devpost: https://devpost.com/software/r-dwck0a - GitHub: https://github.com/AshokSaravanan222/TreeHacks2024 - Demo: https://www.figma.com/file/XHjy1uGpsoooFEVU1EHxKU/Untitled?type=design&node-id=0%3A1&mode=design&t=6Em5219bP5i9yZJn-1 - Video: https://www.youtube.com/embed/Zi7b-vIV8IY?enablejsapi=1&hl=en_US&rel=0&start=&version=3&wmode=transparent - Team: 2 GitHub contributor(s) — Ashok Saravanan (18 commits), elsa-bismuth (1 commits) ## Devpost submission (written by the team) ### Inspiration Our project was inspired by the intersection of Education and Healthcare, focusing on bridging the digital and healthcare information gap for seniors. A revealing dialogue about Japan’s aging demographic shed light on the potential for seniors to actively contribute, challenging their perceived role as passive tech users. We identified a mutual need for connection between seniors, facing isolation, and juniors seeking guidance. ### What it does "Wisdom Bridge" is a mobile platform designed to enhance mental health through intergenerational mentorship, seamlessly connecting seniors and juniors for mentorship and shared activities. By leveraging machine learning, it recommends matches based on shared interests, enabling seniors to impart life lessons and juniors to gain valuable insights. The app further suggests personalized activities for each pair, fostering a nurturing environment for growth, companionship, and mutual understanding, thereby demonstrating the achievable goal of bridging the generational gap and empowering both seniors and juniors. ### How we built it Our development embraced user-centered design, initiating with Figma wireframes for an intuitive journey. We crafted user personas, integrating Chroma DB for efficient data management and leveraging Native React for seamless backend operations and frontend realization. Key to inclusiveness, we implemented voice control, allowing barrier-free interaction and enhancing user engagement through sophisticated technology use. ### Challenges we ran into One of the challenges is to strike a balance between accessibility (e.g., visible font size and straightforward buttons) and modern design trends that are biased toward the preferences of younger populations. To address this, we consistently revisited our app's mission, one of which is ensuring that seniors feel comfortable and at ease when using our app. Consequently, we prioritized our UI based on accessibility guidelines. Furthermore, a significant technical challenge arose when utilizing ChromaDB as our database platform while building our mobile application with React Native. As ChromaDB operates locally, considerable effort was spent attempting to transmit data to our React Native app. Upon recognizing this compatibility issue, the team established their own server on Express and utilized it as an API to retrieve data in React Native. ### Accomplishments we're proud of We're proud to have created a solution that complements existing ones, effectively identifying a root cause of digital inequality and passivity among the elderly population: the portrayal of this social group as mere recipients of aid by existing enterprises and solutions. Our pioneering app not only addresses this issue but also actively involves the younger population in this solution, facilitating early intergenerational connections. Moving beyond our initial assumptions about the value of our app, we have analyzed the utility and needs of both senior and young users, further increasing our confidence in its efficacy. We believe that key features such as connecting individuals based on shared interests and fostering intimate discussions on topics aligned with their values will attract and retain users in the long term. ### What we learned Firstly, we learned the importance of prioritizing tasks and making swift decisions under pressure during the hackathon. Often, we found ourselves designing the UX/UI based on our own preferences and habits. However, by consistently referring to our defined mission, we learned to prioritize according to our users’ needs. Thus, even if we found the 'save' button aesthetically less pleasing compared to the familiar 'save' icon from Instagram, we had to acknowledge that our main audience might not immediately grasp the icon’s function. Additionally, we discovered the value of integrating diverse ideas into a cohesive solution that aligns with everyone’s interests and holds potential, especially in terms of practicality and impact. Initially, we spent a considerable amount of time engaging in repetitive discussions without pinpointing the right problem to address. However, by documenting every idea and conducting interviews with individuals familiar with our target audience, such as sponsors and peers in the hackathon, we were able to identify a specific problem and delve into it more deeply. From a technical standpoint, team members gained valuable experience in managing databases with embedded functions and *navigating through incompatible technologies. In the problem-solving process, they learned how to create their own server and leverage it as a tool to bridge different platforms. ### What's next Looking ahead, we aim to refine "Wisdom Bridge" with advanced recommendation algorithms and enhanced accessibility features, including voice-guided navigation and options for visually impaired users. We plan to engage in beta testing to gather user feedback, seeking partnerships to enrich our activity offerings and establish a commercially viable platform. Our strategy includes leveraging these partnerships not only to diversify the experiences we offer but also as a revenue stream to sustain and grow our platform. Furthermore, we are excited about the potential of generative AI to create personalized activities tailored to the unique interests and needs of each mentor/mentee pair, enhancing the user experience and deepening the connections formed through our app. To gain traction and engage users, we also plan to gamify the platform, introducing elements such as achievements, badges, and challenges that reward interaction and participation. Our vision is to expand "Wisdom Bridge" into a comprehensive platform that not only connects generations but also becomes a cornerstone in supporting mental well-being and societal cohesion, while ensuring its success in the market through strategic monetization and user engagement strategies. ## README (from the GitHub repository) # Wisdom Bridge ## Inspiration Our project was inspired by the intersection of Education and Healthcare, focusing on bridging the digital and healthcare information gap for seniors. A revealing dialogue about Japan’s aging demographic shed light on the potential for seniors to actively contribute, challenging their perceived role as passive tech users. We identified a mutual need for connection between seniors, facing isolation, and juniors seeking guidance. ## What it does "Wisdom Bridge" is a mobile platform designed to enhance mental health through intergenerational mentorship, seamlessly connecting seniors and juniors for mentorship and shared activities. By leveraging machine learning, it recommends matches based on shared interests, enabling seniors to impart life lessons and juniors to gain valuable insights. The app further suggests personalized activities for each pair, fostering a nurturing environment for growth, companionship, and mutual understanding, thereby demonstrating the achievable goal of bridging the generational gap and empowering both seniors and juniors. ## How we built it Our development embraced user-centered design, initiating with Figma wireframes for an intuitive journey. We crafted user personas, integrating Chroma DB for efficient data management and leveraging Native React for seamless backend operations and frontend realization. Key to inclusiveness, we implemented voice control, allowing barrier-free interaction and enhancing user engagement through sophisticated technology use. ## Challenges we ran into One of the challenges is to strike a balance between accessibility (e.g., visible font size and straightforward buttons) and modern design trends that are biased toward the preferences of younger populations. To address this, we consistently revisited our app's mission, one of which is ensuring that seniors feel comfortable and at ease when using our app. Consequently, we prioritized our UI based on accessibility guidelines. Furthermore, a significant technical challenge arose when utilizing ChromaDB as our database platform while building our mobile application with React Native. As ChromaDB operates locally, considerable effort was spent attempting to transmit data to our React Native app. Upon recognizing this compatibility issue, the team established their own server on Express and utilized it as an API to retrieve data in React Native. ## Accomplishments that we're proud of We're proud to have created a solution that complements existing ones, effectively identifying a root cause of digital inequality and passivity among the elderly population: the portrayal of this social group as mere recipients of aid by existing enterprises and solutions. Our pioneering app not only addresses this issue but also actively involves the younger population in this solution, facilitating early intergenerational connections. Moving beyond our initial assumptions about the value of our app, we have analyzed the utility and needs of both senior and young users, further increasing our confidence in its efficacy. We believe that key features such as connecting individuals based on shared interests and fostering intimate discussions on topics aligned with their values will attract and retain users in the long term. ## What we learned Firstly, we learned the importance of prioritizing tasks and making swift decisions under pressure during the hackathon. Often, we found ourselves designing the UX/UI based on our own preferences and habits. However, by consistently referring to our defined mission, we learned to prioritize according to our users’ needs. Thus, even if we found the 'save' button aesthetically less pleasing compared to the familiar 'save' icon from Instagram, we had to acknowledge that our main audience might not immediately grasp the icon’s function. Additionally, we discovered the value of integrating diverse ideas into a cohesive solution that aligns with everyone’s interests and holds potential, especially in terms of practicality and impact. Initially, we spent a considerable amount of time engaging in repetitive discussions without pinpointing the right problem to address. However, by documenting every idea and conducting interviews with individuals familiar with our target audience, such as sponsors and peers in the hackathon, we were able to identify a specific problem and delve into it more deeply. From a technical standpoint, team members gained valuable experience in managing databases with embedded functions and *navigating through incompatible technologies. In the problem-solving process, they learned how to create their own server and leverage it as a tool to bridge different platforms. ## What's next for Wisdom Bridge Looking ahead, we aim to refine "Wisdom Bridge" with advanced recommendation algorithms and enhanced accessibility features, including voice-guided navigation and options for visually impaired users. We plan to engage in beta testing to gather user feedback, seeking partnerships to enrich our activity offerings and establish a commercially viable platform. Our strategy includes leveraging these partnerships not only to diversify the experiences we offer but also as a revenue stream to sustain and grow our platform. Furthermore, we are excited about the potential of generative AI to create personalized activities tailored to the unique interests and needs of each mentor/mentee pair, enhancing the user experience and deepening the connections formed through our app. To gain traction and engage users, we also plan to gamify the platform, introducing elements such as achievements, badges, and challenges that reward interaction and participation. Our vision is to expand "Wisdom Bridge" into a comprehensive platform that not only connects generations but also becomes a cornerstone in supporting mental well-being and societal cohesion, while ensuring its success in the market through strategic monetization and user engagement strategies. ## Detected evidence (automated analysis) Indexed codebase: 38 recognized source files, 53 KB. - JavaScript (language) — detected in the code - React (technology) — detected in the code - Express (technology) — claimed on Devpost, not found in the code - Node.js (technology) — claimed on Devpost, not found in the code - OpenAI (technology) — claimed on Devpost, not found in the code - Python (language) — claimed on Devpost, not found in the code ## Codebase structure (from repository index) ### Files (41 of 41) ``` mobile/.gitignore mobile/app.json mobile/App.jsx mobile/app/_layout.js mobile/app/index.js mobile/app/profile/_layout.js mobile/app/profile/index.js mobile/app/survey/_layout.js mobile/app/survey/index.js mobile/app/survey/info/index.js mobile/app/survey/initial/index.js mobile/app/survey/intro/index.js mobile/app/survey/mentetor/index.js mobile/app/tabs/activities/_layout.js mobile/app/tabs/activities/index.js mobile/app/tabs/discussion/_layout.js mobile/app/tabs/discussion/index.js mobile/app/tabs/home/_layout.js mobile/app/tabs/home/index.js mobile/app/voice/index.js mobile/babel.config.js mobile/components/actionbtn/ActionButton.jsx mobile/components/activity/Event.jsx mobile/components/activity/event.style.js mobile/components/age/Age.jsx mobile/components/comment/Comment.jsx mobile/components/common/activityCard/ActivityCard.jsx mobile/components/common/mentorMenteeCard/MentorMenteeCard.jsx mobile/components/common/profileCard/ProfileCard.jsx mobile/components/common/questionCard/QuestionCard.jsx mobile/components/enhancedinput/EnhancedInput.jsx mobile/components/heading/Heading.jsx mobile/components/mentormentee/MentorMentee.jsx mobile/components/MyComponent.jsx mobile/components/nextbutton/NextButton.jsx mobile/components/survey/Question.jsx mobile/components/tag/Tag.jsx mobile/constants/index.js mobile/constants/theme.js mobile/package.json README.md ``` ### Dependencies - mobile/package.json: @babel/core@^7.20.0, @expo/ngrok@^4.1.0, @rneui/base@^4.0.0-rc.8, @rneui/themed@^4.0.0-rc.8, chromadb@^1.8.1, cohere-ai@^7.7.5, expo@~50.0.7, expo-constants@~15.4.5, expo-linking@~6.2.2, expo-router@~3.4.7, expo-status-bar@~1.11.1, react@18.2.0, react-native@0.73.4, react-native-safe-area-context@4.8.2, react-native-screens@~3.29.0, react-native-uuid@^2.0.1 ### Recent commits (newest first) - Update README.md - added final changes - added survey extras - added feed page - survey code, WIP - voice - added ip address for user - added profile screen - made minor changes - small changes in UI profile - Update ProfileCard.jsx - fixed bugs, basic func - mvp v1 - added survey basic - added structure - added file structure - removed reflex, switching to react native - added reflex template - Initial commit ## Key source files (fetched from GitHub, selected and truncated for size) ### mobile/package.json ``` { "name": "lonify", "version": "1.0.0", "main": "expo-router/entry", "scripts": { "start": "expo start", "android": "expo start --android", "ios": "expo start --ios", "web": "expo start --web" }, "dependencies": { "@expo/ngrok": "^4.1.0", "@rneui/base": "^4.0.0-rc.8", "@rneui/themed": "^4.0.0-rc.8", "chromadb": "^1.8.1", "cohere-ai": "^7.7.5", "expo": "~50.0.7", "expo-constants": "~15.4.5", "expo-linking": "~6.2.2", "expo-router": "~3.4.7", "expo-status-bar": "~1.11.1", "react": "18.2.0", "react-native": "0.73.4", "react-native-safe-area-context": "4.8.2", "react-native-screens": "~3.29.0", "react-native-uuid": "^2.0.1" }, "devDependencies": { "@babel/core": "^7.20.0" }, "private": true } ``` ### mobile/App.jsx ```javascript import React from "react"; import { createTheme, ThemeProvider } from "@rneui/themed"; import Component from "./components/MyComponent"; const theme = createTheme({ lightColors: {}, darkColors: {}, }); export default function App() { return ( ); } ``` ### mobile/constants/index.js ```javascript import { COLORS, FONT, SIZES, SHADOWS } from "./theme"; export {COLORS, FONT, SIZES, SHADOWS }; ``` ### mobile/app/index.js ```javascript import React from "react"; import { Redirect } from "expo-router"; export default function App() { return ( ); } ``` ### mobile/app/_layout.js ```javascript import React from 'react' import { createTheme, ThemeProvider } from "@rneui/themed"; import { Tabs, Slot} from 'expo-router'; import { MaterialCommunityIcons} from '@expo/vector-icons'; import { useRouter } from 'expo-router'; import { COLORS } from '../constants'; import { SimpleLineIcons } from '@expo/vector-icons'; import { MaterialIcons } from '@expo/vector-icons'; const theme = createTheme({ lightColors: { BLUE: "#03396C", WHITE: "#FFFFFF", }, darkColors: {}, }); export default function Layout() { const router = useRouter(); return ( ( router.push({ pathname: "profile", params: {id: "456", name: "Ashok", status:"mentee", age: 19, zipCode: "53189", phoneNumber: "2628992272", hobbies: ["cooking", "painting"], curiosities: ["love", "career"], pastActivities: null} })} /> ), headerTitle: "", headerStyle: { backgroundColor: COLORS.primary}, }} > ( ), }} /> ( ), }} /> ( ), }} /> ) } ``` ### mobile/app/survey/_layout.js ```javascript import { Slot } from 'expo-router'; export default function SurveyLayout() { return ; } ``` ### mobile/app/profile/_layout.js ```javascript import { Slot } from 'expo-router'; export default function ProfileLayout() { return ; } ``` ### mobile/app/voice/index.js ```javascript import { Button } from '@rneui/base' import React from 'react' import { SafeAreaView } from 'react-native' // use expo-audio to help with this // we can call it with our backend chroma db. // if you could create a function that would call an API with the proper audio data, we can handle audio on backend // if it is easeir, intergrate OPEN AI WHISPER directly const Voice = () => { return ( ) } export default Voice ``` ### mobile/app/survey/index.js ```javascript import React, {useState} from 'react' import { View, StyleSheet} from 'react-native' import { Text, Button, Input} from '@rneui/themed' import { useLocalSearchParams, useRouter, Tabs} from 'expo-router' import { COLORS } from '../../constants' import Heading from '../../components/heading/Heading' import Comment from '../../components/comment/Comment' import EnhancedInput from '../../components/enhancedinput/EnhancedInput' import NextButton from '../../components/nextbutton/NextButton' const mentorData = { "questions": [ { "message": "We're excited to learn about you!", "question": "What experiences are you excited to share?", "tip": "Think of a moment that shaped your perspective or a skill that's been crucial to your success." }, { "message": "Your wisdom is a gift!", "question": "What's a key skill you'd like to teach?", "tip": "Identify a skill you're passionate about and explain why it's important." }, { "message": "Show us who you are in a nutshell!", "question": "How would you describe yourself in three words?", "tip": "Select words that reflect your core values or strengths." }, { "message": "Imagine the possibilities!", "question": "Is there an activity you'd like to try with a mentee?", "tip": "Propose an activity that aligns with your interests and could be enjoyable to share." }, { "message": "Share the wisdom that guides you.", "question": "What's one piece of advice you value?", "tip": "Mention advice that has helped you navigate life's challenges." } ] } const menteeData = { "questions": [ { "message": "Let's tackle it together!", "question": "What issue do you hope a mentor will help you resolve?", "tip": "I'm hoping to gain clarity on my career path and overcome my indecision between pursuing a career in creative arts or tech." }, { "message": "The future is bright!", "question": "What career paths or subjects are you curious about?", "tip": "I'm fascinated by renewable energy solutions and how technology can combat climate change." }, { "message": "Share what lights your fire!", "question": "What's a hobby you're passionate about?", "tip": "I've always loved astronomy and stargazing, being amazed by the mysteries of the universe." }, { "message": "You in a snapshot!", "question": "How would your friends describe you in three words?", "tip": "Creative, analytical, compassionate." }, { "message": "Discovery awaits!", "question": "Is there a new skill or hobby you'd like to explore?", "tip": "I'm interested in learning about urban gardening and sustainable living practices." } ] } const Survey = () => { const params = useLocalSearchParams(); const { role } = params; // either "mentee" or "mentor" const router = useRouter(); // Determine the set of questions based on the role const questions = role === 'mentor' ? mentorData.questions : menteeData.questions; // State to track the current question index const [currentIndex, setCurrentIndex] = useState(0); // Increment the current question index or navigate after the last question const handleNext = () => { if (currentIndex < questions.length - 1) { setCurrentIndex(currentIndex + 1); } else { // All questions have been answered, navigate to another screen navigateToCompletionScreen(); } }; // Function to navigate to another screen after completing the survey const navigateToCompletionScreen = () => { // Example navigation, replace 'CompletionScreen' with your actual destination // call API! router.push({ pathname: 'tabs/home' }); }; return ( ); }; const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center', }, // Additional styles can be added here }); export default Survey; ``` ### mobile/app/profile/index.js ```javascript import React, { useEffect, useState } from 'react'; import { Text, StyleSheet, ScrollView, View, SafeAreaView, FlatList, Image } from 'react-native'; import { Avatar, Button } from '@rneui/themed'; import { useLocalSearchParams } from 'expo-router'; import uuid from 'react-native-uuid'; import { COLORS, FONT, SIZES } from '../../constants'; const activities = { "items": [{ "date": "02-05-03", "name": "Picnic", "imgUrl": "https://awildgeographer.files.wordpress.com/2015/02/john_muir_glacier.jpg" }, { "date": "02-05-03", "name": "Picnic", "imgUrl": "https://awildgeographer.files.wordpress.com/2015/02/john_muir_glacier.jpg" }] }; const Profile = () => { const params = useLocalSearchParams(); const { id, name, status, age, zipCode, phoneNumber, hobbies, curiosities, pastActivities } = params; const hobbiesArr = hobbies.split(","); const curiositiesArr = curiosities.split(","); const [isConnectLoading, setIsConnectLoading] = useState(false); const [btnTitle, setBtnTitle] = useState("Connect"); const [buttonColor, setButtonColor] = useState(COLORS.secondary); // Default color const [data, setData] = useState(null); // Data from the API const [isLoading, setIsLoading] = useState(false); // Loading state for the API call const [error, setError] = useState(null); // Error state for the API call const uuidv4 = uuid.v4(); const handlePress = async () => { setIsConnectLoading(true); setTimeout(() => { setIsConnectLoading(false); setBtnTitle("Pending"); setButtonColor(COLORS.tertiary); }, 2000); }; const Item = ({ title, date, imgUrl }) => ( {imgUrl ? ( ) : null} {title} {date} ); async function getUser(id, role) { // Add role parameter to the function setIsLoading(true); // Start loading before fetching data setError(null); // Reset error state try { const response = await fetch(`http://10.19.178.115:3000/user/${id}?role=${role}`, { // Include role in the query string method: 'GET', headers: { 'Content-Type': 'application/json', } }); if (!response.ok) throw new Error('Something went wrong!'); // Check if the response is ok const result = await response.json(); console.log(result); setData(result); setIsLoading(false); // Stop loading after fetching data } catch (error) { setError(error.toString()); // Set error state setIsLoading(false); // Stop loading on error } } function getRandomInt(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min + 1)) + min; } useEffect(() => { // const randomInt = getRandomInt(1, 10); const uuidv4 = "id3"; const role = 'mentor'; // Define the role or get it from somewhere getUser(uuidv4, role); }, []); if (isLoading) return Loading...; // Show loading message if (error) return Error: {error}; // Show error message return ( {`${name}`} {`${status}`} {`Age: ${age}`} {/* {`Phone Number: ${phoneNumber}`} */} Hobbies {/* Container for hobbies tags */} {hobbiesArr.map((hobby, index) => ( {hobby.trim()} ))} Curiosities {/* Container for curiosities tags */} {curiositiesArr.map((curiosity, index) => ( {curiosity.trim()} ))} {`Past Activities`} } horizontal />