I'll help you create the MindMates application frontend using React Native Expo. Let's start with the initial setup and basic structure. { "name": "mindmates", "version": "1.0.0", "main": "node_modules/expo/AppEntry.js", "scripts": { "start": "expo start", "android": "expo start --android", "ios": "expo start --ios", "web": "expo start --web" }, "dependencies": { "@expo/vector-icons": "^13.0.0", "@react-native-async-storage/async-storage": "^1.19.3", "@react-navigation/bottom-tabs": "^6.5.9", "@react-navigation/native": "^6.1.8", "@react-navigation/native-stack": "^6.9.14", "expo": "~49.0.0", "expo-font": "~11.4.0", "expo-status-bar": "~1.6.0", "react": "18.2.0", "react-native": "0.72.0", "react-native-gesture-handler": "~2.12.0", "react-native-paper": "^5.10.3", "react-native-safe-area-context": "4.6.3", "react-native-screens": "~3.22.0", "react-native-vector-icons": "^10.0.0" }, "devDependencies": { "@babel/core": "^7.20.0" }, "private": true } import React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { StatusBar } from 'expo-status-bar'; import { SafeAreaProvider } from 'react-native-safe-area-context'; // Screens import WelcomeScreen from './screens/WelcomeScreen'; import LoginScreen from './screens/LoginScreen'; import SignupScreen from './screens/SignupScreen'; import MainAppScreen from './screens/MainAppScreen'; import ChatScreen from './screens/ChatScreen'; import SupportGroupsScreen from './screens/SupportGroupsScreen'; import AdminDashboard from './screens/admin/AdminDashboard'; import AdminChatMonitor from './screens/admin/AdminChatMonitor'; const Stack = createNativeStackNavigator(); export default function App() { return ( ); } import React from 'react'; import { View, Text, Image, StyleSheet, TouchableOpacity } from 'react-native'; import { useNavigation } from '@react-navigation/native'; const WelcomeScreen = () => { const navigation = useNavigation(); return ( {/* Replace with your butterfly logo image */} MindMates Your mental health companion navigation.navigate('Login')} > Login navigation.navigate('MainApp')} > Continue as Guest navigation.navigate('Signup')}> Don't have an account? Sign Up ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f5f5f5', padding: 20, }, logo: { width: 150, height: 150, marginBottom: 30, }, title: { fontSize: 32, fontWeight: 'bold', color: '#3a86ff', marginBottom: 10, }, subtitle: { fontSize: 16, color: '#666', marginBottom: 40, }, button: { backgroundColor: '#3a86ff', padding: 15, borderRadius: 25, width: '100%', alignItems: 'center', marginBottom: 15, }, secondaryButton: { backgroundColor: 'transparent', borderWidth: 1, borderColor: '#3a86ff', }, buttonText: { color: 'white', fontSize: 16, fontWeight: 'bold', }, secondaryButtonText: { color: '#3a86ff', }, signupText: { marginTop: 20, color: '#3a86ff', }, }); export default WelcomeScreen; import React, { useState } from 'react'; import { View, Text, TextInput, TouchableOpacity, StyleSheet, Image } from 'react-native'; import { useNavigation } from '@react-navigation/native'; const LoginScreen = () => { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const navigation = useNavigation(); const handleLogin = () => { // Add authentication logic here navigation.navigate('MainApp'); }; return ( Login to MindMates Login navigation.navigate('Signup')}> Don't have an account? Sign Up ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f5f5f5', padding: 20, }, logo: { width: 100, height: 100, marginBottom: 20, }, title: { fontSize: 24, fontWeight: 'bold', color: '#3a86ff', marginBottom: 30, }, input: { width: '100%', height: 50, borderColor: '#ddd', borderWidth: 1, borderRadius: 10, paddingHorizontal: 15, marginBottom: 15, backgroundColor: 'white', }, button: { backgroundColor: '#3a86ff', padding: 15, borderRadius: 25, width: '100%', alignItems: 'center', marginTop: 10, marginBottom: 20, }, buttonText: { color: 'white', fontSize: 16, fontWeight: 'bold', }, signupText: { color: '#3a86ff', }, }); export default LoginScreen; import React, { useState } from 'react'; import { View, Text, TextInput, TouchableOpacity, StyleSheet, Image } from 'react-native'; import { useNavigation } from '@react-navigation/native'; const SignupScreen = () => { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [confirmPassword, setConfirmPassword] = useState(''); const [userType, setUserType] = useState('student'); const navigation = useNavigation(); const handleSignup = () => { // Add signup logic here if (userType === 'admin') { navigation.navigate('AdminDashboard'); } else { navigation.navigate('MainApp'); } }; return ( Create an Account setUserType('student')} > Student setUserType('admin')} > Admin/Counselor Sign Up navigation.navigate('Login')}> Already have an account? Login ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f5f5f5', padding: 20, }, logo: { width: 100, height: 100, marginBottom: 20, }, title: { fontSize: 24, fontWeight: 'bold', color: '#3a86ff', marginBottom: 30, }, input: { width: '100%', height: 50, borderColor: '#ddd', borderWidth: 1, borderRadius: 10, paddingHorizontal: 15, marginBottom: 15, backgroundColor: 'white', }, radioContainer: { flexDirection: 'row', justifyContent: 'space-between', width: '100%', marginBottom: 20, }, radioButton: { flex: 1, padding: 15, borderWidth: 1, borderColor: '#ddd', borderRadius: 10, marginHorizontal: 5, alignItems: 'center', backgroundColor: 'white', }, radioButtonSelected: { borderColor: '#3a86ff', backgroundColor: '#e6f0ff', }, radioText: { color: '#333', }, button: { backgroundColor: '#3a86ff', padding: 15, borderRadius: 25, width: '100%', alignItems: 'center', marginBottom: 20, }, buttonText: { color: 'white', fontSize: 16, fontWeight: 'bold', }, loginText: { color: '#3a86ff', }, }); export default SignupScreen; import React from 'react'; import { View, Text, StyleSheet, TouchableOpacity, Image } from 'react-native'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { useNavigation } from '@react-navigation/native'; import Icon from 'react-native-vector-icons/MaterialIcons'; // Tab Screens import ChatScreen from './ChatScreen'; import SupportGroupsScreen from './SupportGroupsScreen'; import ResourcesScreen from './ResourcesScreen'; import ProfileScreen from './ProfileScreen'; const Tab = createBottomTabNavigator(); const MainAppScreen = () => { return ( ({ tabBarIcon: ({ focused, color, size }) => { let iconName; if (route.name === 'Chat') { iconName = 'chat'; } else if (route.name === 'Groups') { iconName = 'group'; } else if (route.name === 'Resources') { iconName = 'menu-book'; } else if (route.name === 'Profile') { iconName = 'person'; } return ; }, tabBarActiveTintColor: '#3a86ff', tabBarInactiveTintColor: 'gray', tabBarStyle: { paddingBottom: 5, height: 60, }, headerShown: false, })} > ); }; export default MainAppScreen; import React, { useState, useEffect } from 'react'; import { View, Text, TextInput, TouchableOpacity, StyleSheet, FlatList, KeyboardAvoidingView, Platform } from 'react-native'; import Icon from 'react-native-vector-icons/MaterialIcons'; const ChatScreen = () => { const [messages, setMessages] = useState([]); const [inputText, setInputText] = useState(''); const [showTriggerWarning, setShowTriggerWarning] = useState(false); const handleSend = () => { if (inputText.trim() === '') return; // Add user message const newUserMessage = { id: Date.now(), text: inputText, sender: 'user', timestamp: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }), }; setMessages(prev => [...prev, newUserMessage]); setInputText(''); // Check for trigger words const triggerWords = ['suicide', 'kill myself', 'self-harm', 'end it all', 'want to die']; const hasTrigger = triggerWords.some(word => inputText.toLowerCase().includes(word.toLowerCase()) ); if (hasTrigger) { setShowTriggerWarning(true); // In a real app, this would notify admin/counselor } // Simulate AI response after a delay setTimeout(() => { const aiResponse = { id: Date.now() + 1, text: hasTrigger ? "I'm really concerned about what you're saying. It might help to talk to someone. Would you like me to connect you with a counselor?" : "I'm here to listen. Can you tell me more about how you're feeling?", sender: 'ai', timestamp: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }), }; setMessages(prev => [...prev, aiResponse]); }, 1000); }; const renderMessage = ({ item }) => ( {item.text} {item.timestamp} ); return ( {showTriggerWarning && ( We've detected concerning content. A counselor has been notified. )} item.id.toString()} contentContainerStyle={styles.messagesList} inverted /> ); }; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#f5f5f5', }, chatContainer: { flex: 1, padding: 10, }, warningBanner: { backgroundColor: '#ff6b6b', padding: 10, borderRadius: 5, marginBottom: 10, }, warningText: { color: 'white', textAlign: 'center', fontWeight: 'bold', }, messagesList: { paddingBottom: 10, }, messageContainer: { maxWidth: '80%', padding: 10, borderRadius: 10, marginBottom: 10, }, userMessage: { alignSelf: 'flex-end', backgroundColor: '#3a86ff', borderTopRightRadius: 0, }, aiMessage: { alignSelf: 'flex-start', backgroundColor: '#e9ecef', borderTopLeftRadius: 0, }, messageText: { color: '#333', }, userMessageText: { color: 'white', }, timestamp: { fontSize: 10, color: '#666', marginTop: 5, textAlign: 'right', }, inputContainer: { flexDirection: 'row', alignItems: 'center', padding: 10, backgroundColor: 'white', borderRadius: 25, marginBottom: 10, }, input: { flex: 1, minHeight: 40, maxHeight: 100, paddingHorizontal: 15, }, sendButton: { backgroundColor: '#3a86ff', borderRadius: 20, width: 40, height: 40, justifyContent: 'center', alignItems: 'center', marginLeft: 10, }, }); export default ChatScreen; import React from 'react'; import { View, Text, FlatList, TouchableOpacity, StyleSheet, Image } from 'react-native'; import { useNavigation } from '@react-navigation/native'; const SupportGroupsScreen = () => { const navigation = useNavigation(); const groups = [ { id: '1', name: 'Anxiety Support', members: 42, description: 'A safe space to discuss anxiety and coping strategies', icon: '😰', }, { id: '2', name: 'Depression Support', members: 38, description: 'Share experiences and support each other', icon: '😞', }, { id: '3', name: 'Stress Management', members: 27, description: 'Tips and techniques for managing stress', icon: '😫', }, { id: '4', name: 'Self-Care Circle', members: 19, description: 'Encouraging positive self-care habits', icon: '💆‍♀️', }, ]; const renderGroup = ({ item }) => ( navigation.navigate('GroupChat', { groupId: item.id })} > {item.icon} {item.name} {item.members} members {item.description} ); return ( Support Groups Connect with others who understand item.id} contentContainerStyle={styles.listContainer} /> Create New Group ); }; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#f5f5f5', padding: 20, }, title: { fontSize: 24, fontWeight: 'bold', color: '#3a86ff', marginBottom: 5, }, subtitle: { fontSize: 16, color: '#666', marginBottom: 20, }, listContainer: { paddingBottom: 20, }, groupCard: { backgroundColor: 'white', borderRadius: 10, padding: 15, marginBottom: 15, shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.1, shadowRadius: 4, elevation: 2, }, groupHeader: { flexDirection: 'row', alignItems: 'center', marginBottom: 10, }, groupIcon: { fontSize: 24, marginRight: 15, }, groupName: { fontSize: 18, fontWeight: 'bold', color: '#333', }, groupMembers: { fontSize: 12, color: '#666', }, groupDescription: { color: '#666', lineHeight: 20, }, createButton: { backgroundColor: '#3a86ff', padding: 15, borderRadius: 25, alignItems: 'center', marginTop: 10, }, createButtonText: { color: 'white', fontSize: 16, fontWeight: 'bold', }, }); export default SupportGroupsScreen; import React from 'react'; import { View, Text, FlatList, TouchableOpacity, StyleSheet } from 'react-native'; import { useNavigation } from '@react-navigation/native'; import Icon from 'react-native-vector-icons/MaterialIcons'; const AdminDashboard = () => { const navigation = useNavigation(); const alerts = [ { id: '1', studentId: 'S12345', username: 'AnonymousUser1', message: 'I just want to end it all...', time: '10:30 AM', status: 'new', }, { id: '2', studentId: 'S67890', username: 'AnonymousUser2', message: 'I can\'t take this anymore', time: 'Yesterday', status: 'in-progress', }, { id: '3', studentId: 'S54321', username: 'AnonymousUser3', message: 'Thinking about self-harm', time: '2 days ago', status: 'resolved', }, ]; const renderAlert = ({ item }) => ( navigation.navigate('AdminChatMonitor', { alertId: item.id })} > {item.studentId} ({item.username}) {item.message} {item.time} ); return ( Student Alerts Recent trigger warnings from students item.id} contentContainerStyle={styles.listContainer} /> ); }; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#f5f5f5', padding: 20, }, title: { fontSize: 24, fontWeight: 'bold', color: '#3a86ff', marginBottom: 5, }, subtitle: { fontSize: 16, color: '#666', marginBottom: 20, }, listContainer: { paddingBottom: 20, }, alertCard: { backgroundColor: 'white', borderRadius: 10, padding: 15, marginBottom: 15, shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.1, shadowRadius: 4, elevation: 2, }, alertHeader: { flexDirection: 'row', alignItems: 'center', marginBottom: 10, }, statusIndicator: { width: 12, height: 12, borderRadius: 6, marginRight: 10, }, statusNew: { backgroundColor: '#ff6b6b', }, statusInProgress: { backgroundColor: '#ffd166', }, statusResolved: { backgroundColor: '#06d6a0', }, studentId: { fontWeight: 'bold', color: '#333', marginRight: 5, }, username: { color: '#666', fontSize: 12, }, messagePreview: { color: '#333', marginBottom: 10, }, alertFooter: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', }, time: { color: '#666', fontSize: 12, }, }); export default AdminDashboard; import React from 'react'; import { View, Text, StyleSheet, FlatList } from 'react-native'; import { useRoute } from '@react-navigation/native'; const AdminChatMonitor = () => { const route = useRoute(); const { alertId } = route.params; // In a real app, this would fetch the conversation based on alertId const conversation = [ { id: '1', text: 'I just want to end it all...', sender: 'student', timestamp: '10:30 AM', }, { id: '2', text: 'I\'m really concerned about what you\'re saying. Would you like to talk to a counselor?', sender: 'ai', timestamp: '10:31 AM', }, { id: '3', text: 'I don\'t know... nobody understands', sender: 'student', timestamp: '10:33 AM', }, { id: '4', text: 'I understand this is hard. You\'re not alone. I can connect you with someone who can help right now.', sender: 'ai', timestamp: '10:34 AM', }, ]; const renderMessage = ({ item }) => ( {item.text} {item.timestamp} ); return ( Student Conversation Alert ID: {alertId} item.id} contentContainerStyle={styles.messagesList} /> Contact Student Mark as Resolved ); }; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#f5f5f5', }, header: { padding: 20, backgroundColor: 'white', borderBottomWidth: 1, borderBottomColor: '#eee', }, headerTitle: { fontSize: 20, fontWeight: 'bold', color: '#333', }, headerSubtitle: { fontSize: 14, color: '#666', marginTop: 5, }, messagesList: { padding: 20, paddingBottom: 100, }, messageContainer: { maxWidth: '80%', padding: 10, borderRadius: 10, marginBottom: 10, }, studentMessage: { alignSelf: 'flex-start', backgroundColor: '#e9ecef', borderTopLeftRadius: 0, }, aiMessage: { alignSelf: 'flex-end', backgroundColor: '#3a86ff', borderTopRightRadius: 0, }, messageText: { color: '#333', }, aiMessageText: { color: 'white', }, timestamp: { fontSize: 10, color: '#666', marginTop: 5, textAlign: 'right', }, actionButtons: { position: 'absolute', bottom: 0, left: 0, right: 0, flexDirection: 'row', padding: 15, backgroundColor: 'white', borderTopWidth: 1, borderTopColor: '#eee', }, button: { flex: 1, padding: 15, borderRadius: 8, alignItems: 'center', marginHorizontal: 5, }, contactButton: { backgroundColor: '#3a86ff', }, resolveButton: { backgroundColor: '#06d6a0', }, buttonText: { color: 'white', fontWeight: 'bold', }, }); export default AdminChatMonitor; import React from 'react'; import { View, Text, FlatList, TouchableOpacity, StyleSheet } from 'react-native'; const ResourcesScreen = () => { const resources = [ { id: '1', title: 'Coping with Anxiety', type: 'article', duration: '5 min read', }, { id: '2', title: 'Mindfulness Meditation', type: 'audio', duration: '10 min', }, { id: '3', title: 'Dealing with Depression', type: 'article', duration: '8 min read', }, { id: '4', title: 'Breathing Exercises', type: 'video', duration: '4 min', }, { id: '5', title: 'Building Resilience', type: 'article', duration: '7 min read', }, ]; const renderResource = ({ item }) => ( {item.type === 'article' && 📄} {item.type === 'audio' && 🎧} {item.type === 'video' && 🎬} {item.title} {item.type} • {item.duration} ); return ( Mental Health Resources Tools to support your wellbeing item.id} contentContainerStyle={styles.listContainer} /> ); }; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#f5f5f5', padding: 20, }, title: { fontSize: 24, fontWeight: 'bold', color: '#3a86ff', marginBottom: 5, }, subtitle: { fontSize: 16, color: '#666', marginBottom: 20, }, listContainer: { paddingBottom: 20, }, resourceCard: { backgroundColor: 'white', borderRadius: 10, padding: 15, marginBottom: 15, flexDirection: 'row', alignItems: 'center', shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.1, shadowRadius: 4, elevation: 2, }, resourceIcon: { marginRight: 15, }, iconText: { fontSize: 24, }, resourceInfo: { flex: 1, }, resourceTitle: { fontSize: 16, fontWeight: 'bold', color: '#333', marginBottom: 5, }, resourceMeta: { fontSize: 12, color: '#666', }, }); export default ResourcesScreen; import React from 'react'; import { View, Text, StyleSheet, TouchableOpacity, Image } from 'react-native'; import { useNavigation } from '@react-navigation/native'; const ProfileScreen = () => { const navigation = useNavigation(); // In a real app, this would come from user data const user = { username: 'AnonymousUser123', studentId: 'S98765', joinDate: 'Joined 3 months ago', }; return ( {user.username} {user.studentId} {user.joinDate} Account Edit Profile Notification Settings Privacy Settings Support Help Center Terms of Service Privacy Policy navigation.navigate('Welcome')} > Log Out ); }; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#f5f5f5', padding: 20, }, profileHeader: { alignItems: 'center', marginBottom: 30, }, profileImage: { width: 100, height: 100, borderRadius: 50, marginBottom: 15, }, username: { fontSize: 20, fontWeight: 'bold', color: '#333', marginBottom: 5, }, studentId: { fontSize: 16, color: '#666', marginBottom: 5, }, joinDate: { fontSize: 14, color: '#999', }, settingsSection: { backgroundColor: 'white', borderRadius: 10, padding: 15, marginBottom: 20, shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.1, shadowRadius: 4, elevation: 2, }, sectionTitle: { fontSize: 16, fontWeight: 'bold', color: '#3a86ff', marginBottom: 15, }, settingItem: { paddingVertical: 15, borderBottomWidth: 1, borderBottomColor: '#eee', }, settingText: { fontSize: 16, color: '#333', }, logoutButton: { backgroundColor: '#ff6b6b', padding: 15, borderRadius: 25, alignItems: 'center', marginTop: 20, }, logoutButtonText: { color: 'white', fontSize: 16, fontWeight: 'bold', }, }); export default ProfileScreen; To run the MindMates application: 1. First install the required dependencies: ```bash npm install ``` 2. Then start the development server: ```bash npm start ``` 3. You can then: - Press 'w' to open in web browser - Scan the QR code with your phone (using Expo Go app) for mobile testing - Press 'a' to run on Android emulator - Press 'i' to run on iOS simulator Key features implemented: - Welcome screen with login/signup options - Anonymous guest access - AI chat with trigger word detection - Support groups listing - Resources section - Admin dashboard for monitoring alerts - Admin chat monitoring view - Profile and settings For the AI chatbot functionality, you'll need to: 1. Choose an AI service (like OpenAI, Dialogflow, etc.) 2. Get an API key 3. Implement the API calls in the ChatScreen component The app is designed to be cloud-based with: - User authentication - Real-time chat monitoring - Anonymous user support - Admin oversight capabilities For images: - Replace the placeholder logo.png with your butterfly logo - Add any additional images to the assets/images folder - Update profile-placeholder.png with a default avatar image