I'll help you create the MindMates mobile application using React Native Expo. Let's start with the frontend setup. import React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { Ionicons } from '@expo/vector-icons'; // Screens import LoginScreen from './screens/LoginScreen'; import SignupScreen from './screens/SignupScreen'; import ChatbotScreen from './screens/ChatbotScreen'; import CommunityScreen from './screens/CommunityScreen'; import ProfileScreen from './screens/ProfileScreen'; import AdminDashboard from './screens/admin/AdminDashboard'; import AdminChatView from './screens/admin/AdminChatView'; const Stack = createStackNavigator(); const Tab = createBottomTabNavigator(); function MainTabNavigator() { return ( ({ tabBarIcon: ({ focused, color, size }) => { let iconName; if (route.name === 'Chatbot') { iconName = focused ? 'chatbubbles' : 'chatbubbles-outline'; } else if (route.name === 'Community') { iconName = focused ? 'people' : 'people-outline'; } else if (route.name === 'Profile') { iconName = focused ? 'person' : 'person-outline'; } return ; }, })} tabBarOptions={{ activeTintColor: '#6a51ae', inactiveTintColor: 'gray', }} > ); } function AdminStack() { return ( ); } export default function App() { return ( ); } import React, { useState } from 'react'; import { View, Text, TextInput, TouchableOpacity, StyleSheet, Image, Alert } from 'react-native'; export default function LoginScreen({ navigation }) { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const handleLogin = () => { // Replace with actual authentication logic if (email === 'admin@mindmates.com' && password === 'admin123') { navigation.navigate('Admin'); } else { navigation.navigate('Main'); } }; const handleAnonymousLogin = () => { navigation.navigate('Main'); }; return ( {/* Replace with your butterfly logo image */} MindMates Your mental health companion Login navigation.navigate('Signup')}> Don't have an account? Sign up Continue as Anonymous ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20, backgroundColor: '#f5f5f5', }, logo: { width: 120, height: 120, marginBottom: 20, }, title: { fontSize: 32, fontWeight: 'bold', color: '#6a51ae', marginBottom: 5, }, subtitle: { fontSize: 16, color: '#666', marginBottom: 30, }, input: { width: '100%', height: 50, borderColor: '#ddd', borderWidth: 1, borderRadius: 10, paddingHorizontal: 15, marginBottom: 15, backgroundColor: '#fff', }, button: { width: '100%', height: 50, backgroundColor: '#6a51ae', borderRadius: 10, justifyContent: 'center', alignItems: 'center', marginBottom: 20, }, buttonText: { color: '#fff', fontSize: 18, fontWeight: 'bold', }, linkText: { color: '#6a51ae', marginBottom: 15, }, anonymousText: { color: '#666', fontStyle: 'italic', }, }); import React, { useState } from 'react'; import { View, Text, TextInput, TouchableOpacity, StyleSheet, Image } from 'react-native'; export default function SignupScreen({ navigation }) { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [confirmPassword, setConfirmPassword] = useState(''); const [username, setUsername] = useState(''); const handleSignup = () => { // Add validation and signup logic here navigation.navigate('Main'); }; return ( Create Account Sign Up navigation.goBack()}> Already have an account? Login ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20, backgroundColor: '#f5f5f5', }, logo: { width: 100, height: 100, marginBottom: 20, }, title: { fontSize: 24, fontWeight: 'bold', color: '#6a51ae', marginBottom: 30, }, input: { width: '100%', height: 50, borderColor: '#ddd', borderWidth: 1, borderRadius: 10, paddingHorizontal: 15, marginBottom: 15, backgroundColor: '#fff', }, button: { width: '100%', height: 50, backgroundColor: '#6a51ae', borderRadius: 10, justifyContent: 'center', alignItems: 'center', marginBottom: 20, }, buttonText: { color: '#fff', fontSize: 18, fontWeight: 'bold', }, linkText: { color: '#6a51ae', }, }); import React, { useState, useEffect } from 'react'; import { View, Text, TextInput, TouchableOpacity, StyleSheet, FlatList, KeyboardAvoidingView, Platform, Image } from 'react-native'; import { Ionicons } from '@expo/vector-icons'; const ChatbotScreen = () => { const [messages, setMessages] = useState([ { id: '1', text: 'Hello! I\'m Mindy, your MindMates companion. How are you feeling today?', sender: 'bot' }, ]); const [inputText, setInputText] = useState(''); const [showTriggerWarning, setShowTriggerWarning] = useState(false); const triggerWords = ['suicide', 'kill myself', 'end my life', 'self-harm', 'hurt myself', 'depressed', 'hopeless']; const checkForTriggerWords = (text) => { return triggerWords.some(word => text.toLowerCase().includes(word.toLowerCase())); }; const handleSend = () => { if (inputText.trim() === '') return; const hasTrigger = checkForTriggerWords(inputText); // Add user message const newUserMessage = { id: Date.now().toString(), text: inputText, sender: 'user' }; setMessages(prev => [...prev, newUserMessage]); setInputText(''); if (hasTrigger) { setShowTriggerWarning(true); // In a real app, this would notify the admin/guidance counselor const warningMessage = { id: (Date.now() + 1).toString(), text: 'I notice you might be going through a tough time. Your school guidance counselor has been notified to offer support. Would you like to talk about what\'s bothering you?', sender: 'bot', isWarning: true }; setTimeout(() => setMessages(prev => [...prev, warningMessage]), 1000); } else { // Simulate bot response const botResponses = [ "I hear you. Would you like to talk more about that?", "That sounds challenging. Remember you're not alone in this.", "Thank you for sharing. How can I support you right now?", "I appreciate you opening up. What would help you feel better?", "That's understandable. Would you like some coping strategies?" ]; const randomResponse = botResponses[Math.floor(Math.random() * botResponses.length)]; setTimeout(() => { setMessages(prev => [...prev, { id: Date.now().toString(), text: randomResponse, sender: 'bot' }]); }, 1000); } }; const renderMessage = ({ item }) => ( {item.sender === 'bot' && ( )} {item.text} ); return ( Mindy Your mental health companion item.id} contentContainerStyle={styles.messagesList} inverted /> {showTriggerWarning && ( Help is available. Your guidance counselor has been notified. )} ); }; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#f9f9f9', }, header: { padding: 15, borderBottomWidth: 1, borderBottomColor: '#eee', backgroundColor: '#fff', }, headerTitle: { fontSize: 20, fontWeight: 'bold', color: '#6a51ae', }, headerSubtitle: { fontSize: 14, color: '#666', }, messagesList: { padding: 15, }, messageContainer: { maxWidth: '80%', marginBottom: 15, padding: 12, borderRadius: 12, flexDirection: 'row', alignItems: 'flex-end', }, botMessage: { alignSelf: 'flex-start', backgroundColor: '#fff', borderWidth: 1, borderColor: '#eee', }, userMessage: { alignSelf: 'flex-end', backgroundColor: '#6a51ae', }, warningMessage: { backgroundColor: '#ff6b6b', borderColor: '#ff6b6b', }, messageText: { fontSize: 16, }, botMessageText: { color: '#333', }, userMessageText: { color: '#fff', }, avatar: { width: 30, height: 30, borderRadius: 15, marginRight: 8, }, inputContainer: { flexDirection: 'row', padding: 10, backgroundColor: '#fff', borderTopWidth: 1, borderTopColor: '#eee', }, input: { flex: 1, minHeight: 50, maxHeight: 100, paddingHorizontal: 15, backgroundColor: '#f5f5f5', borderRadius: 25, marginRight: 10, }, sendButton: { width: 50, height: 50, borderRadius: 25, backgroundColor: '#6a51ae', justifyContent: 'center', alignItems: 'center', }, warningBanner: { backgroundColor: '#ff6b6b', padding: 10, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', }, warningText: { color: '#fff', marginLeft: 5, }, }); export default ChatbotScreen; import React, { useState } from 'react'; import { View, Text, TextInput, TouchableOpacity, StyleSheet, FlatList, Image } from 'react-native'; import { Ionicons } from '@expo/vector-icons'; const CommunityScreen = () => { const [posts, setPosts] = useState([ { id: '1', username: 'Anonymous123', content: 'Feeling really stressed about finals. Anyone else feeling this way?', comments: 5, likes: 12, timestamp: '2 hours ago' }, { id: '2', username: 'Anonymous456', content: 'Just wanted to share that talking to the guidance counselor really helped me. Don\'t be afraid to reach out!', comments: 8, likes: 24, timestamp: '5 hours ago' }, { id: '3', username: 'Anonymous789', content: 'Does anyone have tips for dealing with anxiety before presentations?', comments: 15, likes: 30, timestamp: '1 day ago' }, ]); const [newPost, setNewPost] = useState(''); const handlePost = () => { if (newPost.trim() === '') return; const randomUsername = `Anonymous${Math.floor(100 + Math.random() * 900)}`; setPosts(prev => [{ id: Date.now().toString(), username: randomUsername, content: newPost, comments: 0, likes: 0, timestamp: 'Just now' }, ...prev]); setNewPost(''); }; const renderPost = ({ item }) => ( {item.username} {item.timestamp} {item.content} {item.comments} {item.likes} ); return ( Community Support Connect with others who understand Post item.id} contentContainerStyle={styles.postsList} /> ); }; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#f9f9f9', }, header: { padding: 15, borderBottomWidth: 1, borderBottomColor: '#eee', backgroundColor: '#fff', }, headerTitle: { fontSize: 20, fontWeight: 'bold', color: '#6a51ae', }, headerSubtitle: { fontSize: 14, color: '#666', }, createPostContainer: { padding: 15, backgroundColor: '#fff', borderBottomWidth: 1, borderBottomColor: '#eee', }, postInput: { minHeight: 60, maxHeight: 120, padding: 10, backgroundColor: '#f5f5f5', borderRadius: 10, marginBottom: 10, }, postButton: { alignSelf: 'flex-end', paddingVertical: 8, paddingHorizontal: 20, backgroundColor: '#6a51ae', borderRadius: 20, }, postButtonText: { color: '#fff', fontWeight: 'bold', }, postsList: { paddingBottom: 20, }, postContainer: { backgroundColor: '#fff', padding: 15, marginBottom: 10, borderBottomWidth: 1, borderBottomColor: '#eee', }, postHeader: { flexDirection: 'row', alignItems: 'center', marginBottom: 10, }, avatar: { width: 40, height: 40, borderRadius: 20, marginRight: 10, }, postUserInfo: { flex: 1, }, username: { fontWeight: 'bold', }, timestamp: { fontSize: 12, color: '#999', }, postContent: { fontSize: 16, marginBottom: 15, lineHeight: 22, }, postFooter: { flexDirection: 'row', justifyContent: 'space-between', paddingHorizontal: 20, }, footerButton: { flexDirection: 'row', alignItems: 'center', }, footerButtonText: { marginLeft: 5, color: '#666', }, }); export default CommunityScreen; import React from 'react'; import { View, Text, TouchableOpacity, StyleSheet, Image } from 'react-native'; import { Ionicons } from '@expo/vector-icons'; const ProfileScreen = ({ navigation }) => { const isAnonymous = true; // This would come from your auth state return ( {isAnonymous ? 'Anonymous User' : 'John Doe'} {isAnonymous && ( Anonymous Mode )} navigation.navigate('Login')} > Login / Signup Settings Help & Support Privacy Policy About MindMates MindMates is a safe space for students to seek mental health support, connect with peers, and access resources. Version 1.0.0 ); }; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#f9f9f9', }, profileHeader: { alignItems: 'center', padding: 30, backgroundColor: '#fff', borderBottomWidth: 1, borderBottomColor: '#eee', }, profileImage: { width: 100, height: 100, borderRadius: 50, marginBottom: 15, }, username: { fontSize: 20, fontWeight: 'bold', }, anonymousTag: { marginTop: 5, paddingHorizontal: 10, paddingVertical: 3, backgroundColor: '#f0f0f0', borderRadius: 10, fontSize: 12, color: '#666', }, menuContainer: { marginTop: 20, backgroundColor: '#fff', borderTopWidth: 1, borderTopColor: '#eee', borderBottomWidth: 1, borderBottomColor: '#eee', }, menuItem: { flexDirection: 'row', alignItems: 'center', padding: 15, borderBottomWidth: 1, borderBottomColor: '#f5f5f5', }, menuText: { flex: 1, marginLeft: 15, fontSize: 16, }, aboutSection: { marginTop: 20, padding: 20, backgroundColor: '#fff', borderTopWidth: 1, borderTopColor: '#eee', borderBottomWidth: 1, borderBottomColor: '#eee', }, aboutTitle: { fontSize: 18, fontWeight: 'bold', marginBottom: 10, color: '#6a51ae', }, aboutText: { fontSize: 14, color: '#666', lineHeight: 20, marginBottom: 15, }, versionText: { fontSize: 12, color: '#999', textAlign: 'right', }, }); export default ProfileScreen; import React, { useState } from 'react'; import { View, Text, TouchableOpacity, StyleSheet, FlatList } from 'react-native'; import { Ionicons } from '@expo/vector-icons'; const AdminDashboard = ({ navigation }) => { const [alerts, setAlerts] = useState([ { id: '1', studentId: 'Anonymous123', message: 'Trigger words detected: "I want to end my life"', timestamp: '10 mins ago', read: false }, { id: '2', studentId: 'Anonymous456', message: 'Trigger words detected: "I feel hopeless"', timestamp: '25 mins ago', read: true }, { id: '3', studentId: 'Anonymous789', message: 'Trigger words detected: "I can\'t take it anymore"', timestamp: '1 hour ago', read: true }, { id: '4', studentId: 'Anonymous101', message: 'Trigger words detected: "I want to hurt myself"', timestamp: '2 hours ago', read: true }, ]); const handleViewConversation = (alert) => { navigation.navigate('AdminChatView', { studentId: alert.studentId }); }; const renderAlert = ({ item }) => ( handleViewConversation(item)} > {item.studentId} {item.timestamp} {item.message} {!item.read && } ); return ( Admin Dashboard Trigger Warning Alerts item.id} contentContainerStyle={styles.alertsList} /> 4 Total Alerts 1 Unread 3 Follow-ups ); }; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#f9f9f9', }, header: { padding: 15, borderBottomWidth: 1, borderBottomColor: '#eee', backgroundColor: '#fff', }, headerTitle: { fontSize: 20, fontWeight: 'bold', color: '#6a51ae', }, headerSubtitle: { fontSize: 14, color: '#666', }, alertsList: { paddingBottom: 20, }, alertItem: { backgroundColor: '#fff', padding: 15, marginBottom: 10, borderBottomWidth: 1, borderBottomColor: '#eee', }, unreadAlert: { backgroundColor: '#fff8f8', }, alertHeader: { flexDirection: 'row', justifyContent: 'space-between', marginBottom: 5, }, studentId: { fontWeight: 'bold', }, timestamp: { fontSize: 12, color: '#999', }, alertMessage: { color: '#666', }, unreadBadge: { position: 'absolute', top: 15, left: 5, width: 8, height: 8, borderRadius: 4, backgroundColor: '#ff6b6b', }, statsContainer: { flexDirection: 'row', justifyContent: 'space-around', padding: 15, backgroundColor: '#fff', borderTopWidth: 1, borderTopColor: '#eee', }, statCard: { alignItems: 'center', }, statNumber: { fontSize: 24, fontWeight: 'bold', color: '#6a51ae', }, statLabel: { fontSize: 14, color: '#666', }, }); export default AdminDashboard; import React, { useState } from 'react'; import { View, Text, StyleSheet, FlatList } from 'react-native'; import { Ionicons } from '@expo/vector-icons'; const AdminChatView = ({ route }) => { const { studentId } = route.params; const [conversation, setConversation] = useState([ { id: '1', text: 'Hello! I\'m Mindy, your MindMates companion. How are you feeling today?', sender: 'bot' }, { id: '2', text: 'Not good. I want to end my life.', sender: 'user' }, { id: '3', text: 'I notice you might be going through a tough time. Your school guidance counselor has been notified to offer support. Would you like to talk about what\'s bothering you?', sender: 'bot', isWarning: true }, ]); const renderMessage = ({ item }) => ( {item.text} ); return ( Conversation with {studentId} Trigger Warning Detected item.id} contentContainerStyle={styles.messagesList} /> Assign Counselor Mark as Resolved ); }; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#f9f9f9', }, header: { padding: 15, borderBottomWidth: 1, borderBottomColor: '#eee', backgroundColor: '#fff', }, headerTitle: { fontSize: 18, fontWeight: 'bold', }, headerSubtitle: { fontSize: 14, color: '#ff6b6b', }, messagesList: { padding: 15, }, messageContainer: { maxWidth: '80%', marginBottom: 15, padding: 12, borderRadius: 12, }, botMessage: { alignSelf: 'flex-start', backgroundColor: '#fff', borderWidth: 1, borderColor: '#eee', }, userMessage: { alignSelf: 'flex-end', backgroundColor: '#6a51ae', }, warningMessage: { backgroundColor: '#ff6b6b', borderColor: '#ff6b6b', }, messageText: { fontSize: 16, }, botMessageText: { color: '#333', }, userMessageText: { color: '#fff', }, actionButtons: { flexDirection: 'row', padding: 10, backgroundColor: '#fff', borderTopWidth: 1, borderTopColor: '#eee', }, actionButton: { flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', padding: 10, marginHorizontal: 5, backgroundColor: '#6a51ae', borderRadius: 5, }, actionButtonText: { color: '#fff', marginLeft: 5, }, }); export default AdminChatView; { "name": "mindmates-app", "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": "^12.0.0", "@react-navigation/bottom-tabs": "^6.5.0", "@react-navigation/native": "^6.1.0", "@react-navigation/stack": "^6.3.0", "expo": "~47.0.12", "expo-status-bar": "~1.4.2", "react": "18.1.0", "react-native": "0.70.5", "react-native-gesture-handler": "~2.8.0", "react-native-reanimated": "~2.12.0", "react-native-safe-area-context": "4.4.1", "react-native-screens": "~3.18.0" }, "devDependencies": { "@babel/core": "^7.12.9" }, "private": true } To run this application: 1. First install the required dependencies: ```bash npm install ``` 2. Then start the Expo development server: ```bash npm start ``` 3. You can then: - Open the app in an iOS simulator by pressing 'i' - Open the app in an Android emulator by pressing 'a' - Scan the QR code with the Expo Go app on your physical device Important notes about the implementation: 1. Image assets: - Place your butterfly logo image at `/assets/images/logo.png` - Create bot avatar image at `/assets/images/bot_avatar.png` - Create default user avatar at `/assets/images/default_avatar.png` 2. Key features implemented: - Anonymous login option - Trigger word detection with admin alerts - Community support forum - Separate admin dashboard - Conversation monitoring for counselors 3. Next steps for full implementation: - Connect to a real backend/database - Implement proper authentication - Add push notifications for alerts - Enhance the AI chatbot responses - Add more comprehensive mental health resources