Tools: EchoState: A Cloud-Powered Music Mood Tracker

The Community ## What I Built ## SussyBakaJr / EchoState ## EchoState - A cloud-powered emotional listening reflection web app built with Firebase Authentication and real-time Firestore. ## How I Built It DEV Weekend Challenge: Community This is a submission for the DEV Weekend Challenge: Community I built EchoState for people who experience their emotions through music. There are certain type of people who don't just play songs but feel them. I’m part of that community. My friends and I listen to a lot of music, and even though we think we understand our moods throughout the day, I started wondering whether our music choices might tell a different story. EchoState is for people like me who want to observe their emotional patterns through the music they choose. Not based on genre, not based on algorithm recommendations, but based on how they personally classify and feel their songs. I built EchoState, a music-based mood tracking web app where users can log the songs they’re listening to and associate each one with a mood and energy level. Instead of automatically pulling data from streaming platforms, the app encourages intentional reflection. When logging a song, the user selects how the song feels to them — calm, nostalgic, hype, focus, etc. — along with an energy level from 1 to 5. From that data, the app generates: Users authenticate using Google login, and all data is stored securely in the cloud using Firebase Firestore with real-time syncing. It can also be used on mobile from the link itself. You can try EchoState live here: 🌐 Live App: https://tourmaline-longma-cf965d.netlify.app/ All data is stored securely in the cloud and updates in real time. The full source code is available on GitHub: 🔗 GitHub Repository: 🎧 EchoState A Music-Based Emotional Reflection Web App EchoState is a music-driven emotional tracking web application that helps users reflect on their mood patterns through the songs they listen to The idea began as a concept to integrate directly with Spotify, but due to API and integration constraints, the project evolved into a manually logged, cloud-powered emotional listening tracker — allowing deeper personal reflection and full customization. Live App https://tourmaline-longma-cf965d.netlify.app/ 🔐Authentication & Cloud Sync -Google Login & Logout (Firebase Authentication) -Secure per-user cloud storage (Firestore) -Real-time data syncing -User-specific data isolation 🎵Song Logging System -Select mood category -Assign energy level (1–5) -Real-time delete support 📊Emotional Analytics Dashboard -Mood Pie Chart Visual representation of dominant emotional patterns. -Energy Trend Graph Track how your listening energy fluctuates over time. -Monthly Mood Calendar View emotional patterns day-by-day with color-coded mood tracking. -Weekly Goal Tracker Set… EchoState was built using a frontend-first architecture with cloud-based data persistence. The interface was created using HTML5 and CSS3, with a glassmorphism-inspired design and dynamic theming that adapts to the user's dominant mood. Background particle animations are rendered using the Canvas API to create a soft, reactive atmosphere. The application logic is written in Vanilla JavaScript (ES6). Mood tracking, streak calculation, weekly goal progress, and chart updates are all handled client-side. For analytics and visualization, I used: Authentication is handled using Firebase Authentication (Google OAuth), and all user data is stored in Firebase Firestore. This ensures: The project is deployed on Netlify. Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well For further actions, you may consider blocking this person and/or reporting abuse - A mood distribution pie chart to show dominant emotional patterns - An energy trend graph to visualize shifts over time - A monthly mood calendar with color-coded days - A streak tracker for consistent daily logging - A weekly goal progress bar - Emoji-based milestone rewards - A dynamic background that adapts to the dominant mood - Log in using Google - Add a few songs with moods and energy levels - Refresh the page to see cloud persistence - Explore the mood pie chart, energy graph, calendar view, and streak tracker - Chart.js for the mood distribution pie chart - A real-time energy trend line graph - A dynamically generated monthly calendar grid - Instant cloud sync - Proper per-user data isolation - Accurate streak and analytics recalculation