Pixel Diary

• 

  Landing page

• 

  Dashboard

• 

  Create pixel page

• 

  View pixel modal

Inspiration

Art is a means of communication that goes beyond words. Many people, especially those struggling with mental health, have trouble expressing their emotions, thoughts and ideas. Art provides an outlet for people to acknowledge and convey emotions in a meaningful way. I got inspired to create this project after seeing graffiti artists using art to memorialize those who have died in the news.

Link to news article

I chose pixel art because of how accessible it is. Pixel art is simple and has a low barrier of entry - any person can start creating pixel art without complex tools or advanced art skills.

What it does

Pixel Diary is a website which allows users to reflect on their emotions in a positive and therapeutic way through art. Users can craft daily pixel art reflecting on their emotions guided by single-hue colour palettes. Pixel Diary encourages daily reflection on emotions with its streak and achievement system, helping users make long term improvements in their mental health. Users can also view, download and share their past art works with others or keep them private if they wish.

How we built it

I built this website using Sveltekit, Typescript, Tailwind, DaisyUI, MongoDB and several other libraries. The demo website is hosted on Netlify.

Challenges we ran into

I ran into some challenges with layout design, especially with the dashboard. I was able to overcome this by stepping back and designing the website in Figma.

Accomplishments that we're proud of

I’m proud that I was able to create a fully functioning website with almost all of the features that I had originally planned.

What we learned

In developing this website, I learned more about Sveltekit and how to use the ChartJS library.

What's next for Pixel Diary

I plan to add an opt-in reminder system so that users can make long term improvements in their mental health without having to set their own notifications.

Built With

• chartjs
• daisyui
• mongodb
• quill
• svelte
• sveltekit
• tailwind
• typescript