Mental Wellness Checker

• 

  Mental Wellness Checker

Inspiration What I Learned

This project helped me explore and strengthen my front-end development skills. Although I come from an HTML/CSS/JavaScript background, I pushed myself to learn and experiment with

React.js for building UI components

TypeScript for type safety

Tailwind CSS for modern, utility-first styling

Chart.js for visualizing mood trends

Local Storage for simple, private data persistence

I also gained hands-on experience using Git and GitHub for version control and Netlify for deployment.

What it does

Mental Wellness Checker is a responsive web app that allows users to:

💬 Log their daily moods using simple text and emoji inputs

📊 Get visual feedback based on emotional tone

📅 View mood history and trend charts over time

🔒 Store data securely in Local Storage — no account needed

🌙 Use the tool regularly to develop self-awareness and track emotional patterns

How we build

The app consists of:

A mood input screen where users log their feelings with text and an emotion icon.

A result screen that responds visually to the user's mood.

A mood history section that includes recent logs and a bar chart of emotional trends.

Data persistence via Local Storage to ensure privacy without sign-in.

The project was built using Vite (for fast builds) and organized into reusable components using React

Challenges we ran into

Understanding Tailwind’s utility classes in real-world layouts

TypeScript type errors and interface design

Debugging why CSS wasn’t applying (later fixed via PostCSS config)

Switching from HTML/CSS/JS to React development mindset

Testing local storage integration and emotion detection logic

Accomplishments that we're proud of

✅ Built a fully responsive and modern UI using Tailwind CSS, without relying on heavy UI libraries

✅ Successfully learned and applied React and TypeScript to create a component-based structure, even as a beginner

✅ Visualized real-time mood data with Chart.js, helping users clearly track emotional trends

✅ Implemented Local Storage to preserve user data across sessions without requiring a login or backend

✅ Deployed the entire app on Netlify using Git for version control and CI/CD practices

✅ Created a complete solo project, handling everything from design to logic to deployment

✅ Kept user privacy in focus, with no third-party tracking or authentication—everything stays on the browser

What we learned

Though I started with a foundation in HTML, CSS, and JavaScript, this project pushed me to learn and work with:

React.js for component-based UI

TypeScript for better structure and type safety

Tailwind CSS for modern styling

Chart.js for dynamic visualizations

Vite as a fast frontend tooling environment

Git and GitHub for version control

Netlify for seamless deployment

What's next for Mental Wellness Checker

1.Integrate a Java Spring Boot backend to enable user accounts, secure authentication, and cloud-based data storage. 2.AI-based emotion analysis using Java NLP libraries like OpenNLP to understand user moods from typed journal entries. 3.Daily motivational quotes and breathing exercises to enhance mental well-being support. 4.Progress history backup with Google or GitHub login so users don’t lose their data. 5.Mobile-first PWA support, making it accessible offline and installable like an app. 6.Data export and insights, offering downloadable mood history summaries.

Built With

• browser-side
• chart.js
• control
• css
• css)
• data
• deployment)
• frameworks
• git
• github
• hosting)
• html
• libraries:
• localstorage
• netlify
• platforms:
• react-chartjs-2)
• react.js
• tailwind
• tools
• typescript
• version
• vite