Repository files navigation

Moodlyst

Moodlyst is a compassionate wellbeing companion that helps people log their moods, stay consistent, explore live city mood data, and discover events that match how they feel. It blends Firebase persistence, Google Gemini insights, and location-aware discovery into a single experience.

Tech stack

  • Framework: React 19 + Vite for a fast, modular SPA shell.
  • Styling: PostCSS + Tailwind (via @tailwindcss/vite) with custom gradients, animations, and the Poppins font.
  • State & Routing: React hooks paired with React Router v7 to split public landing pages from protected dashboards.
  • Integrations: Firebase Auth & Firestore, Google Gemini (via @google/generative-ai), Ticketmaster, OpenStreetMap tiles, Framer Motion, Leaflet (React-Leaflet), and react-icons.

Experiences & pages

  1. Home / Marketing: Hero, dual-value sections, features, and mood education components that explain what Moodlyst stands for and drive people toward logging in.
  2. Dashboard: Tracks morning/evening/anytime check-ins, enforces a 5-log-per-day cap, shows streaks, the latest mood, timeline, and location status. Users can open the MoodLogModal, refresh moods, and generate AI insights powered by Gemini.
  3. Map: Fullscreen Leaflet map that listens to the cityMoods Firestore collection, displays mood clusters with color-coded markers, and centers on the user when geolocation is allowed.
  4. Events: Ticketmaster-powered discovery with search, category/date/distance filters, mood-aware sorting, an event detail modal, and graceful fallbacks to curated demo events when the API key or user location is missing.
  5. Authentication flow: Firebase Auth guards /dashboard, /map, and /events. Unauthenticated visitors are redirected to /login, and authenticated users see profile dropdowns and logout controls.

Services summary

ServiceRole
aiService.jsFormats the last five mood logs, sends them to Google Gemini (gemini-2.5-flash), and returns a structured JSON insight payload. Future providers (Bedrock/OpenAI) can be plugged in via the AI_PROVIDER switch.
eventsService.jsQueries Ticketmaster’s Discovery API with location/radius/category parameters, exposes mood-based recommendations, and ships demo data for environments without a key.
moodService.jsHandles mood log persistence, streak calculations, today’s check-ins, timeline feeds, city aggregates, event aggregates, and helper queries for the map listener. It also reverse-geocodes coordinates using BigDataCloud to enrich location metadata.

Getting started

  1. Install dependencies: yarn install (or npm install).
  2. Add a .env file (kept out of Git) with the required env vars described below.
  3. Run yarn dev (npm run dev) and open http://localhost:5174 to explore the experience.
  4. Build for production with yarn build (npm run build) and test previews via yarn preview.

Required environment variables

NamePurpose
VITE_TICKETMASTER_API_KEYEnables the Ticketmaster-powered event discovery experience on /events. If it’s missing, the app falls back to demo events.
VITE_GEMINI_API_KEYPowers the AI insights flow on the dashboard by allowing aiService.js to call Google Gemini.

Deployment & workflow

  • The repository links to Netlify so every push builds with Vite and deploys automatically. Keep the environment variables above configured under Site settings → Build & deploy → Environment so the live site can access Ticketmaster and Gemini.
  • When you rotate any secret, update it in Netlify and trigger a deploy either by pushing a commit (even an empty one) or hitting “Trigger deploy” in the dashboard. Deploys typically finish within 1–3 minutes.

Quality & tooling

  • ESLint with @eslint/js, React plugins, and eslint-plugin-react-refresh keeps modern syntax in check; run yarn lint (npm run lint).
  • Tailwind’s utility classes are bundled via @tailwindcss/postcss + @tailwindcss/vite.
  • There are no automated tests yet—manual QA and linting are the current guardrails.

What’s next

  • Expand AI providers (Bedrock/OpenAI) through aiService.js’s provider switch.
  • Add onboarding or reminder flows inside the dashboard to nudge streaks.

About

Resources

Stars

1 star

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Skip to content

Repository files navigation

Moodlyst

Moodlyst is a compassionate wellbeing companion that helps people log their moods, stay consistent, explore live city mood data, and discover events that match how they feel. It blends Firebase persistence, Google Gemini insights, and location-aware discovery into a single experience.

Tech stack

  • Framework: React 19 + Vite for a fast, modular SPA shell.
  • Styling: PostCSS + Tailwind (via @tailwindcss/vite) with custom gradients, animations, and the Poppins font.
  • State & Routing: React hooks paired with React Router v7 to split public landing pages from protected dashboards.
  • Integrations: Firebase Auth & Firestore, Google Gemini (via @google/generative-ai), Ticketmaster, OpenStreetMap tiles, Framer Motion, Leaflet (React-Leaflet), and react-icons.

Experiences & pages

  1. Home / Marketing: Hero, dual-value sections, features, and mood education components that explain what Moodlyst stands for and drive people toward logging in.
  2. Dashboard: Tracks morning/evening/anytime check-ins, enforces a 5-log-per-day cap, shows streaks, the latest mood, timeline, and location status. Users can open the MoodLogModal, refresh moods, and generate AI insights powered by Gemini.
  3. Map: Fullscreen Leaflet map that listens to the cityMoods Firestore collection, displays mood clusters with color-coded markers, and centers on the user when geolocation is allowed.
  4. Events: Ticketmaster-powered discovery with search, category/date/distance filters, mood-aware sorting, an event detail modal, and graceful fallbacks to curated demo events when the API key or user location is missing.
  5. Authentication flow: Firebase Auth guards /dashboard, /map, and /events. Unauthenticated visitors are redirected to /login, and authenticated users see profile dropdowns and logout controls.

Services summary

ServiceRole
aiService.jsFormats the last five mood logs, sends them to Google Gemini (gemini-2.5-flash), and returns a structured JSON insight payload. Future providers (Bedrock/OpenAI) can be plugged in via the AI_PROVIDER switch.
eventsService.jsQueries Ticketmaster’s Discovery API with location/radius/category parameters, exposes mood-based recommendations, and ships demo data for environments without a key.
moodService.jsHandles mood log persistence, streak calculations, today’s check-ins, timeline feeds, city aggregates, event aggregates, and helper queries for the map listener. It also reverse-geocodes coordinates using BigDataCloud to enrich location metadata.

Getting started

  1. Install dependencies: yarn install (or npm install).
  2. Add a .env file (kept out of Git) with the required env vars described below.
  3. Run yarn dev (npm run dev) and open http://localhost:5174 to explore the experience.
  4. Build for production with yarn build (npm run build) and test previews via yarn preview.

Required environment variables

NamePurpose
VITE_TICKETMASTER_API_KEYEnables the Ticketmaster-powered event discovery experience on /events. If it’s missing, the app falls back to demo events.
VITE_GEMINI_API_KEYPowers the AI insights flow on the dashboard by allowing aiService.js to call Google Gemini.

Deployment & workflow

  • The repository links to Netlify so every push builds with Vite and deploys automatically. Keep the environment variables above configured under Site settings → Build & deploy → Environment so the live site can access Ticketmaster and Gemini.
  • When you rotate any secret, update it in Netlify and trigger a deploy either by pushing a commit (even an empty one) or hitting “Trigger deploy” in the dashboard. Deploys typically finish within 1–3 minutes.

Quality & tooling

  • ESLint with @eslint/js, React plugins, and eslint-plugin-react-refresh keeps modern syntax in check; run yarn lint (npm run lint).
  • Tailwind’s utility classes are bundled via @tailwindcss/postcss + @tailwindcss/vite.
  • There are no automated tests yet—manual QA and linting are the current guardrails.

What’s next

  • Expand AI providers (Bedrock/OpenAI) through aiService.js’s provider switch.
  • Add onboarding or reminder flows inside the dashboard to nudge streaks.

About

Resources

Stars

1 star

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Force GitHub README to respect dark mode (function() { var style = document.createElement('style'); style.textContent = ' .markdown-body { color-scheme: dark light; } .markdown-body pre { background: #161b22 !important; } .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; } .markdown-body table th, .markdown-body table td { border-color: #30363d !important; } .markdown-body img { background: #0d1117; } .markdown-body blockquote { border-left-color: #8b949e; } .markdown-body hr { border-color: #30363d; } '; document.head.appendChild(style); })(); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Repository files navigation

Moodlyst

Moodlyst is a compassionate wellbeing companion that helps people log their moods, stay consistent, explore live city mood data, and discover events that match how they feel. It blends Firebase persistence, Google Gemini insights, and location-aware discovery into a single experience.

Tech stack

  • Framework: React 19 + Vite for a fast, modular SPA shell.
  • Styling: PostCSS + Tailwind (via @tailwindcss/vite) with custom gradients, animations, and the Poppins font.
  • State & Routing: React hooks paired with React Router v7 to split public landing pages from protected dashboards.
  • Integrations: Firebase Auth & Firestore, Google Gemini (via @google/generative-ai), Ticketmaster, OpenStreetMap tiles, Framer Motion, Leaflet (React-Leaflet), and react-icons.

Experiences & pages

  1. Home / Marketing: Hero, dual-value sections, features, and mood education components that explain what Moodlyst stands for and drive people toward logging in.
  2. Dashboard: Tracks morning/evening/anytime check-ins, enforces a 5-log-per-day cap, shows streaks, the latest mood, timeline, and location status. Users can open the MoodLogModal, refresh moods, and generate AI insights powered by Gemini.
  3. Map: Fullscreen Leaflet map that listens to the cityMoods Firestore collection, displays mood clusters with color-coded markers, and centers on the user when geolocation is allowed.
  4. Events: Ticketmaster-powered discovery with search, category/date/distance filters, mood-aware sorting, an event detail modal, and graceful fallbacks to curated demo events when the API key or user location is missing.
  5. Authentication flow: Firebase Auth guards /dashboard, /map, and /events. Unauthenticated visitors are redirected to /login, and authenticated users see profile dropdowns and logout controls.

Services summary

ServiceRole
aiService.jsFormats the last five mood logs, sends them to Google Gemini (gemini-2.5-flash), and returns a structured JSON insight payload. Future providers (Bedrock/OpenAI) can be plugged in via the AI_PROVIDER switch.
eventsService.jsQueries Ticketmaster’s Discovery API with location/radius/category parameters, exposes mood-based recommendations, and ships demo data for environments without a key.
moodService.jsHandles mood log persistence, streak calculations, today’s check-ins, timeline feeds, city aggregates, event aggregates, and helper queries for the map listener. It also reverse-geocodes coordinates using BigDataCloud to enrich location metadata.

Getting started

  1. Install dependencies: yarn install (or npm install).
  2. Add a .env file (kept out of Git) with the required env vars described below.
  3. Run yarn dev (npm run dev) and open http://localhost:5174 to explore the experience.
  4. Build for production with yarn build (npm run build) and test previews via yarn preview.

Required environment variables

NamePurpose
VITE_TICKETMASTER_API_KEYEnables the Ticketmaster-powered event discovery experience on /events. If it’s missing, the app falls back to demo events.
VITE_GEMINI_API_KEYPowers the AI insights flow on the dashboard by allowing aiService.js to call Google Gemini.

Deployment & workflow

  • The repository links to Netlify so every push builds with Vite and deploys automatically. Keep the environment variables above configured under Site settings → Build & deploy → Environment so the live site can access Ticketmaster and Gemini.
  • When you rotate any secret, update it in Netlify and trigger a deploy either by pushing a commit (even an empty one) or hitting “Trigger deploy” in the dashboard. Deploys typically finish within 1–3 minutes.

Quality & tooling

  • ESLint with @eslint/js, React plugins, and eslint-plugin-react-refresh keeps modern syntax in check; run yarn lint (npm run lint).
  • Tailwind’s utility classes are bundled via @tailwindcss/postcss + @tailwindcss/vite.
  • There are no automated tests yet—manual QA and linting are the current guardrails.

What’s next

  • Expand AI providers (Bedrock/OpenAI) through aiService.js’s provider switch.
  • Add onboarding or reminder flows inside the dashboard to nudge streaks.

About

Resources

Stars

1 star

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Highlight search terms from Google/DuckDuckGo/Bing referrer (function() { var ref = document.referrer; var terms = []; if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) { var url = new URL(ref); var q = url.searchParams.get('q') || url.searchParams.get('p'); if (q) { terms = q.split(/\s+/).filter(function(t) { return t.length > 2; }); } } if (terms.length === 0) return; var style = document.createElement('style'); style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }'; document.head.appendChild(style); function highlight(node) { if (node.nodeType === 3) { // text node var text = node.textContent; var found = false; terms.forEach(function(term) { var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi'); if (regex.test(text)) { found = true; var frag = document.createDocumentFragment(); var parts = text.split(regex); parts.forEach(function(part, i) { if (i % 2 === 0) { frag.appendChild(document.createTextNode(part)); } else { var span = document.createElement('span'); span.className = 'userscript-highlight'; span.textContent = part; frag.appendChild(span); } }); node.parentNode.replaceChild(frag, node); } }); } else if (node.nodeType === 1 && node.childNodes) { // element var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT']; if (!skipTags.includes(node.tagName)) { Array.from(node.childNodes).forEach(highlight); } } } highlight(document.body); // Re-highlight on dynamic content var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1 || node.nodeType === 3) highlight(node); }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Repository files navigation

Moodlyst

Moodlyst is a compassionate wellbeing companion that helps people log their moods, stay consistent, explore live city mood data, and discover events that match how they feel. It blends Firebase persistence, Google Gemini insights, and location-aware discovery into a single experience.

Tech stack

  • Framework: React 19 + Vite for a fast, modular SPA shell.
  • Styling: PostCSS + Tailwind (via @tailwindcss/vite) with custom gradients, animations, and the Poppins font.
  • State & Routing: React hooks paired with React Router v7 to split public landing pages from protected dashboards.
  • Integrations: Firebase Auth & Firestore, Google Gemini (via @google/generative-ai), Ticketmaster, OpenStreetMap tiles, Framer Motion, Leaflet (React-Leaflet), and react-icons.

Experiences & pages

  1. Home / Marketing: Hero, dual-value sections, features, and mood education components that explain what Moodlyst stands for and drive people toward logging in.
  2. Dashboard: Tracks morning/evening/anytime check-ins, enforces a 5-log-per-day cap, shows streaks, the latest mood, timeline, and location status. Users can open the MoodLogModal, refresh moods, and generate AI insights powered by Gemini.
  3. Map: Fullscreen Leaflet map that listens to the cityMoods Firestore collection, displays mood clusters with color-coded markers, and centers on the user when geolocation is allowed.
  4. Events: Ticketmaster-powered discovery with search, category/date/distance filters, mood-aware sorting, an event detail modal, and graceful fallbacks to curated demo events when the API key or user location is missing.
  5. Authentication flow: Firebase Auth guards /dashboard, /map, and /events. Unauthenticated visitors are redirected to /login, and authenticated users see profile dropdowns and logout controls.

Services summary

ServiceRole
aiService.jsFormats the last five mood logs, sends them to Google Gemini (gemini-2.5-flash), and returns a structured JSON insight payload. Future providers (Bedrock/OpenAI) can be plugged in via the AI_PROVIDER switch.
eventsService.jsQueries Ticketmaster’s Discovery API with location/radius/category parameters, exposes mood-based recommendations, and ships demo data for environments without a key.
moodService.jsHandles mood log persistence, streak calculations, today’s check-ins, timeline feeds, city aggregates, event aggregates, and helper queries for the map listener. It also reverse-geocodes coordinates using BigDataCloud to enrich location metadata.

Getting started

  1. Install dependencies: yarn install (or npm install).
  2. Add a .env file (kept out of Git) with the required env vars described below.
  3. Run yarn dev (npm run dev) and open http://localhost:5174 to explore the experience.
  4. Build for production with yarn build (npm run build) and test previews via yarn preview.

Required environment variables

NamePurpose
VITE_TICKETMASTER_API_KEYEnables the Ticketmaster-powered event discovery experience on /events. If it’s missing, the app falls back to demo events.
VITE_GEMINI_API_KEYPowers the AI insights flow on the dashboard by allowing aiService.js to call Google Gemini.

Deployment & workflow

  • The repository links to Netlify so every push builds with Vite and deploys automatically. Keep the environment variables above configured under Site settings → Build & deploy → Environment so the live site can access Ticketmaster and Gemini.
  • When you rotate any secret, update it in Netlify and trigger a deploy either by pushing a commit (even an empty one) or hitting “Trigger deploy” in the dashboard. Deploys typically finish within 1–3 minutes.

Quality & tooling

  • ESLint with @eslint/js, React plugins, and eslint-plugin-react-refresh keeps modern syntax in check; run yarn lint (npm run lint).
  • Tailwind’s utility classes are bundled via @tailwindcss/postcss + @tailwindcss/vite.
  • There are no automated tests yet—manual QA and linting are the current guardrails.

What’s next

  • Expand AI providers (Bedrock/OpenAI) through aiService.js’s provider switch.
  • Add onboarding or reminder flows inside the dashboard to nudge streaks.

About

Resources

Stars

1 star

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Strip utm_, fbclid, gclid, etc. from all links on page (function() { var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid', 'ref', 'ref_src', 'source', 'medium', 'campaign']; function cleanUrl(url) { try { var u = new URL(url, window.location.origin); var changed = false; trackingParams.forEach(function(p) { if (u.searchParams.has(p)) { u.searchParams.delete(p); changed = true; } }); return changed ? u.toString() : url; } catch (e) { return url; } } function cleanLinks() { document.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } cleanLinks(); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1) { if (node.tagName === 'A') cleanLinks(); node.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '
Skip to content

Repository files navigation

Moodlyst

Moodlyst is a compassionate wellbeing companion that helps people log their moods, stay consistent, explore live city mood data, and discover events that match how they feel. It blends Firebase persistence, Google Gemini insights, and location-aware discovery into a single experience.

Tech stack

  • Framework: React 19 + Vite for a fast, modular SPA shell.
  • Styling: PostCSS + Tailwind (via @tailwindcss/vite) with custom gradients, animations, and the Poppins font.
  • State & Routing: React hooks paired with React Router v7 to split public landing pages from protected dashboards.
  • Integrations: Firebase Auth & Firestore, Google Gemini (via @google/generative-ai), Ticketmaster, OpenStreetMap tiles, Framer Motion, Leaflet (React-Leaflet), and react-icons.

Experiences & pages

  1. Home / Marketing: Hero, dual-value sections, features, and mood education components that explain what Moodlyst stands for and drive people toward logging in.
  2. Dashboard: Tracks morning/evening/anytime check-ins, enforces a 5-log-per-day cap, shows streaks, the latest mood, timeline, and location status. Users can open the MoodLogModal, refresh moods, and generate AI insights powered by Gemini.
  3. Map: Fullscreen Leaflet map that listens to the cityMoods Firestore collection, displays mood clusters with color-coded markers, and centers on the user when geolocation is allowed.
  4. Events: Ticketmaster-powered discovery with search, category/date/distance filters, mood-aware sorting, an event detail modal, and graceful fallbacks to curated demo events when the API key or user location is missing.
  5. Authentication flow: Firebase Auth guards /dashboard, /map, and /events. Unauthenticated visitors are redirected to /login, and authenticated users see profile dropdowns and logout controls.

Services summary

ServiceRole
aiService.jsFormats the last five mood logs, sends them to Google Gemini (gemini-2.5-flash), and returns a structured JSON insight payload. Future providers (Bedrock/OpenAI) can be plugged in via the AI_PROVIDER switch.
eventsService.jsQueries Ticketmaster’s Discovery API with location/radius/category parameters, exposes mood-based recommendations, and ships demo data for environments without a key.
moodService.jsHandles mood log persistence, streak calculations, today’s check-ins, timeline feeds, city aggregates, event aggregates, and helper queries for the map listener. It also reverse-geocodes coordinates using BigDataCloud to enrich location metadata.

Getting started

  1. Install dependencies: yarn install (or npm install).
  2. Add a .env file (kept out of Git) with the required env vars described below.
  3. Run yarn dev (npm run dev) and open http://localhost:5174 to explore the experience.
  4. Build for production with yarn build (npm run build) and test previews via yarn preview.

Required environment variables

NamePurpose
VITE_TICKETMASTER_API_KEYEnables the Ticketmaster-powered event discovery experience on /events. If it’s missing, the app falls back to demo events.
VITE_GEMINI_API_KEYPowers the AI insights flow on the dashboard by allowing aiService.js to call Google Gemini.

Deployment & workflow

  • The repository links to Netlify so every push builds with Vite and deploys automatically. Keep the environment variables above configured under Site settings → Build & deploy → Environment so the live site can access Ticketmaster and Gemini.
  • When you rotate any secret, update it in Netlify and trigger a deploy either by pushing a commit (even an empty one) or hitting “Trigger deploy” in the dashboard. Deploys typically finish within 1–3 minutes.

Quality & tooling

  • ESLint with @eslint/js, React plugins, and eslint-plugin-react-refresh keeps modern syntax in check; run yarn lint (npm run lint).
  • Tailwind’s utility classes are bundled via @tailwindcss/postcss + @tailwindcss/vite.
  • There are no automated tests yet—manual QA and linting are the current guardrails.

What’s next

  • Expand AI providers (Bedrock/OpenAI) through aiService.js’s provider switch.
  • Add onboarding or reminder flows inside the dashboard to nudge streaks.

About

Resources

Stars

1 star

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Auto-enable theater mode on YouTube (function() { function tryTheater() { var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]'); if (btn && !btn.classList.contains('activated')) { btn.click(); } } // Try immediately tryTheater(); // Try after navigation (SPA) var lastUrl = location.href; setInterval(function() { if (location.href !== lastUrl) { lastUrl = location.href; setTimeout(tryTheater, 500); } }, 1000); // Also try on player load var observer = new MutationObserver(tryTheater); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Repository files navigation

Moodlyst

Moodlyst is a compassionate wellbeing companion that helps people log their moods, stay consistent, explore live city mood data, and discover events that match how they feel. It blends Firebase persistence, Google Gemini insights, and location-aware discovery into a single experience.

Tech stack

  • Framework: React 19 + Vite for a fast, modular SPA shell.
  • Styling: PostCSS + Tailwind (via @tailwindcss/vite) with custom gradients, animations, and the Poppins font.
  • State & Routing: React hooks paired with React Router v7 to split public landing pages from protected dashboards.
  • Integrations: Firebase Auth & Firestore, Google Gemini (via @google/generative-ai), Ticketmaster, OpenStreetMap tiles, Framer Motion, Leaflet (React-Leaflet), and react-icons.

Experiences & pages

  1. Home / Marketing: Hero, dual-value sections, features, and mood education components that explain what Moodlyst stands for and drive people toward logging in.
  2. Dashboard: Tracks morning/evening/anytime check-ins, enforces a 5-log-per-day cap, shows streaks, the latest mood, timeline, and location status. Users can open the MoodLogModal, refresh moods, and generate AI insights powered by Gemini.
  3. Map: Fullscreen Leaflet map that listens to the cityMoods Firestore collection, displays mood clusters with color-coded markers, and centers on the user when geolocation is allowed.
  4. Events: Ticketmaster-powered discovery with search, category/date/distance filters, mood-aware sorting, an event detail modal, and graceful fallbacks to curated demo events when the API key or user location is missing.
  5. Authentication flow: Firebase Auth guards /dashboard, /map, and /events. Unauthenticated visitors are redirected to /login, and authenticated users see profile dropdowns and logout controls.

Services summary

ServiceRole
aiService.jsFormats the last five mood logs, sends them to Google Gemini (gemini-2.5-flash), and returns a structured JSON insight payload. Future providers (Bedrock/OpenAI) can be plugged in via the AI_PROVIDER switch.
eventsService.jsQueries Ticketmaster’s Discovery API with location/radius/category parameters, exposes mood-based recommendations, and ships demo data for environments without a key.
moodService.jsHandles mood log persistence, streak calculations, today’s check-ins, timeline feeds, city aggregates, event aggregates, and helper queries for the map listener. It also reverse-geocodes coordinates using BigDataCloud to enrich location metadata.

Getting started

  1. Install dependencies: yarn install (or npm install).
  2. Add a .env file (kept out of Git) with the required env vars described below.
  3. Run yarn dev (npm run dev) and open http://localhost:5174 to explore the experience.
  4. Build for production with yarn build (npm run build) and test previews via yarn preview.

Required environment variables

NamePurpose
VITE_TICKETMASTER_API_KEYEnables the Ticketmaster-powered event discovery experience on /events. If it’s missing, the app falls back to demo events.
VITE_GEMINI_API_KEYPowers the AI insights flow on the dashboard by allowing aiService.js to call Google Gemini.

Deployment & workflow

  • The repository links to Netlify so every push builds with Vite and deploys automatically. Keep the environment variables above configured under Site settings → Build & deploy → Environment so the live site can access Ticketmaster and Gemini.
  • When you rotate any secret, update it in Netlify and trigger a deploy either by pushing a commit (even an empty one) or hitting “Trigger deploy” in the dashboard. Deploys typically finish within 1–3 minutes.

Quality & tooling

  • ESLint with @eslint/js, React plugins, and eslint-plugin-react-refresh keeps modern syntax in check; run yarn lint (npm run lint).
  • Tailwind’s utility classes are bundled via @tailwindcss/postcss + @tailwindcss/vite.
  • There are no automated tests yet—manual QA and linting are the current guardrails.

What’s next

  • Expand AI providers (Bedrock/OpenAI) through aiService.js’s provider switch.
  • Add onboarding or reminder flows inside the dashboard to nudge streaks.

About

Resources

Stars

1 star

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Remove or un-stick sticky/fixed headers that block content (function() { function unstick() { document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) { if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') { el.style.position = 'static'; el.style.top = 'auto'; el.style.zIndex = 'auto'; } }); } unstick(); var observer = new MutationObserver(unstick); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); })(); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Repository files navigation

Moodlyst

Moodlyst is a compassionate wellbeing companion that helps people log their moods, stay consistent, explore live city mood data, and discover events that match how they feel. It blends Firebase persistence, Google Gemini insights, and location-aware discovery into a single experience.

Tech stack

  • Framework: React 19 + Vite for a fast, modular SPA shell.
  • Styling: PostCSS + Tailwind (via @tailwindcss/vite) with custom gradients, animations, and the Poppins font.
  • State & Routing: React hooks paired with React Router v7 to split public landing pages from protected dashboards.
  • Integrations: Firebase Auth & Firestore, Google Gemini (via @google/generative-ai), Ticketmaster, OpenStreetMap tiles, Framer Motion, Leaflet (React-Leaflet), and react-icons.

Experiences & pages

  1. Home / Marketing: Hero, dual-value sections, features, and mood education components that explain what Moodlyst stands for and drive people toward logging in.
  2. Dashboard: Tracks morning/evening/anytime check-ins, enforces a 5-log-per-day cap, shows streaks, the latest mood, timeline, and location status. Users can open the MoodLogModal, refresh moods, and generate AI insights powered by Gemini.
  3. Map: Fullscreen Leaflet map that listens to the cityMoods Firestore collection, displays mood clusters with color-coded markers, and centers on the user when geolocation is allowed.
  4. Events: Ticketmaster-powered discovery with search, category/date/distance filters, mood-aware sorting, an event detail modal, and graceful fallbacks to curated demo events when the API key or user location is missing.
  5. Authentication flow: Firebase Auth guards /dashboard, /map, and /events. Unauthenticated visitors are redirected to /login, and authenticated users see profile dropdowns and logout controls.

Services summary

ServiceRole
aiService.jsFormats the last five mood logs, sends them to Google Gemini (gemini-2.5-flash), and returns a structured JSON insight payload. Future providers (Bedrock/OpenAI) can be plugged in via the AI_PROVIDER switch.
eventsService.jsQueries Ticketmaster’s Discovery API with location/radius/category parameters, exposes mood-based recommendations, and ships demo data for environments without a key.
moodService.jsHandles mood log persistence, streak calculations, today’s check-ins, timeline feeds, city aggregates, event aggregates, and helper queries for the map listener. It also reverse-geocodes coordinates using BigDataCloud to enrich location metadata.

Getting started

  1. Install dependencies: yarn install (or npm install).
  2. Add a .env file (kept out of Git) with the required env vars described below.
  3. Run yarn dev (npm run dev) and open http://localhost:5174 to explore the experience.
  4. Build for production with yarn build (npm run build) and test previews via yarn preview.

Required environment variables

NamePurpose
VITE_TICKETMASTER_API_KEYEnables the Ticketmaster-powered event discovery experience on /events. If it’s missing, the app falls back to demo events.
VITE_GEMINI_API_KEYPowers the AI insights flow on the dashboard by allowing aiService.js to call Google Gemini.

Deployment & workflow

  • The repository links to Netlify so every push builds with Vite and deploys automatically. Keep the environment variables above configured under Site settings → Build & deploy → Environment so the live site can access Ticketmaster and Gemini.
  • When you rotate any secret, update it in Netlify and trigger a deploy either by pushing a commit (even an empty one) or hitting “Trigger deploy” in the dashboard. Deploys typically finish within 1–3 minutes.

Quality & tooling

  • ESLint with @eslint/js, React plugins, and eslint-plugin-react-refresh keeps modern syntax in check; run yarn lint (npm run lint).
  • Tailwind’s utility classes are bundled via @tailwindcss/postcss + @tailwindcss/vite.
  • There are no automated tests yet—manual QA and linting are the current guardrails.

What’s next

  • Expand AI providers (Bedrock/OpenAI) through aiService.js’s provider switch.
  • Add onboarding or reminder flows inside the dashboard to nudge streaks.

About

Resources

Stars

1 star

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Universal Dark Mode - works on any site (function() { var enabled = true; function applyDarkMode() { if (!enabled) return; // Create style element if it doesn't exist var style = document.getElementById('universal-dark-mode-style'); if (!style) { style = document.createElement('style'); style.id = 'universal-dark-mode-style'; document.head.appendChild(style); } // Dark mode CSS - inverts colors but preserves images/video style.textContent = ' /* Invert everything except media */ html { filter: invert(1) hue-rotate(180deg) !important; background: #1a1a2e !important; } /* Restore images, videos, iframes, canvas */ img, video, iframe, canvas, svg, picture, [style*="background-image"] { filter: invert(1) hue-rotate(180deg) !important; } /* Preserve specific elements that should not be inverted */ .no-dark-mode, .no-dark-mode *, [data-theme="light"], [data-theme="light"], .ace_editor, .ace_editor *, .CodeMirror, .CodeMirror *, .monaco-editor, .monaco-editor *, .markdown-body pre, .markdown-body pre *, .highlight, .highlight *, pre code, pre code * { filter: none !important; } /* Fix common UI elements */ .modal, .popup, .dropdown-menu, .tooltip, .popover { filter: invert(1) hue-rotate(180deg) !important; background: #2d2d44 !important; border-color: #444 !important; } /* Scrollbars */ ::-webkit-scrollbar { background: #1a1a2e !important; } ::-webkit-scrollbar-thumb { background: #444 !important; } ::-webkit-scrollbar-thumb:hover { background: #555 !important; } /* Selection */ ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; } ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; } '; } function removeDarkMode() { var style = document.getElementById('universal-dark-mode-style'); if (style) style.remove(); } // Toggle with Alt+Shift+D document.addEventListener('keydown', function(e) { if (e.altKey && e.shiftKey && e.key === 'D') { e.preventDefault(); enabled = !enabled; if (enabled) { applyDarkMode(); console.log('[Universal Dark Mode] Enabled'); } else { removeDarkMode(); console.log('[Universal Dark Mode] Disabled'); } } }); // Apply on load applyDarkMode(); // Re-apply on dynamic content var observer = new MutationObserver(function(mutations) { if (enabled && !document.getElementById('universal-dark-mode-style')) { applyDarkMode(); } }); observer.observe(document.head, { childList: true }); console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle'); })(); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();
Skip to content

Repository files navigation

Moodlyst

Moodlyst is a compassionate wellbeing companion that helps people log their moods, stay consistent, explore live city mood data, and discover events that match how they feel. It blends Firebase persistence, Google Gemini insights, and location-aware discovery into a single experience.

Tech stack

  • Framework: React 19 + Vite for a fast, modular SPA shell.
  • Styling: PostCSS + Tailwind (via @tailwindcss/vite) with custom gradients, animations, and the Poppins font.
  • State & Routing: React hooks paired with React Router v7 to split public landing pages from protected dashboards.
  • Integrations: Firebase Auth & Firestore, Google Gemini (via @google/generative-ai), Ticketmaster, OpenStreetMap tiles, Framer Motion, Leaflet (React-Leaflet), and react-icons.

Experiences & pages

  1. Home / Marketing: Hero, dual-value sections, features, and mood education components that explain what Moodlyst stands for and drive people toward logging in.
  2. Dashboard: Tracks morning/evening/anytime check-ins, enforces a 5-log-per-day cap, shows streaks, the latest mood, timeline, and location status. Users can open the MoodLogModal, refresh moods, and generate AI insights powered by Gemini.
  3. Map: Fullscreen Leaflet map that listens to the cityMoods Firestore collection, displays mood clusters with color-coded markers, and centers on the user when geolocation is allowed.
  4. Events: Ticketmaster-powered discovery with search, category/date/distance filters, mood-aware sorting, an event detail modal, and graceful fallbacks to curated demo events when the API key or user location is missing.
  5. Authentication flow: Firebase Auth guards /dashboard, /map, and /events. Unauthenticated visitors are redirected to /login, and authenticated users see profile dropdowns and logout controls.

Services summary

ServiceRole
aiService.jsFormats the last five mood logs, sends them to Google Gemini (gemini-2.5-flash), and returns a structured JSON insight payload. Future providers (Bedrock/OpenAI) can be plugged in via the AI_PROVIDER switch.
eventsService.jsQueries Ticketmaster’s Discovery API with location/radius/category parameters, exposes mood-based recommendations, and ships demo data for environments without a key.
moodService.jsHandles mood log persistence, streak calculations, today’s check-ins, timeline feeds, city aggregates, event aggregates, and helper queries for the map listener. It also reverse-geocodes coordinates using BigDataCloud to enrich location metadata.

Getting started

  1. Install dependencies: yarn install (or npm install).
  2. Add a .env file (kept out of Git) with the required env vars described below.
  3. Run yarn dev (npm run dev) and open http://localhost:5174 to explore the experience.
  4. Build for production with yarn build (npm run build) and test previews via yarn preview.

Required environment variables

NamePurpose
VITE_TICKETMASTER_API_KEYEnables the Ticketmaster-powered event discovery experience on /events. If it’s missing, the app falls back to demo events.
VITE_GEMINI_API_KEYPowers the AI insights flow on the dashboard by allowing aiService.js to call Google Gemini.

Deployment & workflow

  • The repository links to Netlify so every push builds with Vite and deploys automatically. Keep the environment variables above configured under Site settings → Build & deploy → Environment so the live site can access Ticketmaster and Gemini.
  • When you rotate any secret, update it in Netlify and trigger a deploy either by pushing a commit (even an empty one) or hitting “Trigger deploy” in the dashboard. Deploys typically finish within 1–3 minutes.

Quality & tooling

  • ESLint with @eslint/js, React plugins, and eslint-plugin-react-refresh keeps modern syntax in check; run yarn lint (npm run lint).
  • Tailwind’s utility classes are bundled via @tailwindcss/postcss + @tailwindcss/vite.
  • There are no automated tests yet—manual QA and linting are the current guardrails.

What’s next

  • Expand AI providers (Bedrock/OpenAI) through aiService.js’s provider switch.
  • Add onboarding or reminder flows inside the dashboard to nudge streaks.

About

Resources

Stars

1 star

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages