Mental Mural

Inspiration

Let's face it, we've all struggled with our mental health at some point.

What it does

Mental Mural is a mental health tracking up. It allows the user to write journal entries, track their mood, get tips on improving their mental health, check the weather...etc. among many other activities that are designed to allow the user to relax and get their mind off what may burden them. A big feature of the app was the mural that would be created uniquely for every user based off their mood and activity.

How we built it

Mental Mural is a ASP.NET hosted app with SQlite backend and HTML/CSS frontend. We used Visual Studio 2022 for development and used GitHub for version control.

Challenges we ran into

.gitignore & Visual Studio

A moment of forgetfulness costed the team 2 hours of development time in order to properly set up our repository to play nicely with VS 2022.

Database Connection

WebAssembly App emulated a Client-Host application system, requiring weeding out the causes of bad HTTP requests.

Frontend Design

Blazor presents its own ways of attempting to implement dynamic elements, as well as a jarring way of implementing CSS transitions and animations.

Mural Creation/SVG Generation

API/Library used and SVG graphics had quirky behaviors, preventing us from freely drawing at any coordinate on the mural, and obscuring axes of rotation.

Accomplishments that we're proud of

Pretty UI with animations!
Working database on our machines!
Some mural components and animations looked great, sadly they didn't make it to the prototype.

What we learned

Drawing with SVG is hard! (We managed to do some of it, not all)
Most team members' first experience with Blazor
Don't ever, ever, EVER(!) forget the .gitignore file when creating a repo

What's next for Mental Mural

We would love to see the rest of the features we planned out and the mural generation complete! Such as:

The relaxing games and puzzles (examples: spot the difference)
Background music
Sketching area (ideally, this would be integrated with the journal)

Built With

.net
blazorwasm
css
html
sqlite

Submitted to

HackKU 2023

Created by

I was the person that suggested using Blazor in the first place! I mainly worked on the SVG files and the mural generation. I learned a lot about drawing SVGs in HTML and creating razor components, so I am proud of what I was able to learn and accomplish! I also was the one to pick the color palettes for our design and contributed to planning the general architecture of our app.

Yara Al-Shorman
I came up with the idea behind our project and led UI development. I had a lot of fun designing CSS to make transitions and animations that cooperated well with Blazor. Even more so I appreciate the wonderful team I got lead and build experience with this past weekend!

Adair Torres
I worked with SQLite to build the database for user data and journal entries. This was my first time working with databases or query languages in earnest, so this project was a very interesting and valuable experience!

Isabel Loney