emerald-mood

byLinda Hamdan

🎧 “MoodMix” — a social mood + music app Think of it like a cross between Spotify, BeReal, and a low-pressure social diary. 💡 Core idea Teens log their mood once or twice a day using quick taps (no long journaling). The app then: Generates a music playlist that matches their vibe Lets them share their “mood snapshot” with friends Shows how their mood changes over time (like emotional stats 📊) 🔥 Why it works No cringe oversharing required Music is already central to teen life Feels personal but still social Could integrate with Spotify or Apple Music later 🧱 Basic MVP Features Select mood (happy, stressed, tired, excited, etc.) Generate a playlist (mocked at first) View mood history Simple social feed (friends’ moods) 🧪 Simple Starter Code (React Native with Expo) This is a basic working prototype UI to get you started: 1. Setup npx create-expo-app MoodMix cd MoodMix npm start 2. Replace App.js with this: import React, { useState } from 'react'; import { StyleSheet, Text, View, TouchableOpacity, FlatList } from 'react-native'; const moods = [ { id: '1', name: '😊 Happy', playlist: ['Sunroof', 'Good as Hell', 'Levitating'] }, { id: '2', name: '😴 Tired', playlist: ['Slow Dancing', 'Location', 'Pink + White'] }, { id: '3', name: '😤 Stressed', playlist: ['Lo-fi Beats', 'Weightless', 'Chill Study'] }, { id: '4', name: '🔥 Hype', playlist: ['SICKO MODE', 'POWER', 'HUMBLE.'] }, ]; export default function App() { const [selectedMood, setSelectedMood] = useState(null); return ( <View style={styles.container}> <Text style={styles.title}>MoodMix 🎧</Text> <Text style={styles.subtitle}>How are you feeling?</Text> <View style={styles.moodContainer}> {moods.map((mood) => ( <TouchableOpacity key={mood.id} style={styles.moodButton} onPress={() => setSelectedMood(mood)} > <Text style={styles.moodText}>{mood.name}</Text> </TouchableOpacity> ))} </View> {selectedMood && ( <View style={styles.playlistContainer}> <Text style={styles.playlistTitle}> Your {selectedMood.name} Playlist: </Text> <FlatList data={selectedMood.playlist} keyExtractor={(item, index) => index.toString()} renderItem={({ item }) => ( <Text style={styles.song}>{item}</Text> )} /> </View> )} </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#121212', alignItems: 'center', justifyContent: 'center', padding: 20, }, title: { fontSize: 32, color: '#1DB954', fontWeight: 'bold', marginBottom: 20, }, subtitle: { fontSize: 18, color: 'white', marginBottom: 15, }, moodContainer: { flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'center', }, moodButton: { backgroundColor: '#282828', padding: 10, margin: 8, borderRadius: 10, }, moodText: { color: 'white', fontSize: 16, }, playlistContainer: { marginTop: 20, alignItems: 'center', }, playlistTitle: { color: '#1DB954', fontSize: 18, marginBottom: 10, }, song: { color: 'white', fontSize: 16, marginVertical: 2, }, }); 🚀 Where to take it next If you want to level this up from “cool project” to “people actually use this”: Add login (Firebase 🔐) Save mood history (so users can track patterns) Real music API (Spotify API 🎶) Friend system + mood feed Streaks (teens love streaks more than sleep)