This is a submission for the DEV Weekend Challenge: Community
The 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.
What I Built
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:
- 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
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.
Demo
You can try EchoState live here:
🌐 Live App:
https://tourmaline-longma-cf965d.netlify.app/
To test it:
- 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
All data is stored securely in the cloud and updates in real time.
Video Demo:
Code
The full source code is available on GitHub:
🔗 GitHub Repository:
SussyBakaJr
/
EchoState
EchoState - A cloud-powered emotional listening reflection web app built with Firebase Authentication and real-time Firestore.
🎧 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/
🌟 Core Features
🔐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
-Add songs manually
-Select mood category
-Assign energy level (1–5)
-Timestamped logging
-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…
How I Built It
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:
- Chart.js for the mood distribution pie chart
- A real-time energy trend line graph
- A dynamically generated monthly calendar grid
Authentication is handled using Firebase Authentication (Google OAuth), and all user data is stored in Firebase Firestore.
This ensures:
- Instant cloud sync
- Proper per-user data isolation
- Accurate streak and analytics recalculation
The project is deployed on Netlify.
Top comments (0)