Software Architect / Microsoft MVP (AI) and Technical Author

ASP.NET Core, Azure Open AI, C#, Chat GPT, Computer Vision, Daily Tracker, MVC, OpenAI, Productivity, Prototyping, Sentiment Analysis, Text Analytics

How To: Creating a Private Journal and Mood Tracking App Using .NET 6, Chat GPT, C# and Visual Studio 2022

The Idea

This idea is the result of a tweet.  It came to me whilst out with my youngest son.

 

Like most kids, he often says or does funny things. It would be good to look back on these as time goes by.  A private digital photobook / journal sort of thing.

 

In this guide, you will see how to quickly build your own personal and private journal and mood tracking application.

 

Main requirements:

  • being able to supply text an image and mood for that day
  • being able to view all existing statuses for a given year

 

From a technical perspective:

  • quick and simple to code
  • as few dependencies as possible
  • easy to use on mobile and simple interface
  • no database back end

~

Technology and Tools

The following technology tools and services were used to create this:

  • .NET 6
  • C#
  • Chat GPT
  • Copilot
  • Dev Tunnels
  • Font Awesome
  • JavaScript
  • Open-Source web template
  • Visual Studio 2022

 

I used an out-of-the-box dot .NET Core Web Project, open-source web template, ChatGPT and a new feature in Visual Studio 2022 called dev tunnels to speed up development.

 

The solution that follows was “designed”, written, and tested in less than 2-3 hours.

 

Screenshots and example code are provided with a video demo also available.

~

Finding a Suitable Web Template

The first thing to do was to find a suitable web template. I found a collection of open-source templates by Somanth Goudar.

 

I picked the Twitter clone then imported the HTML and CSS into a fresh Visual Studio solution.

I used placehold.co to embed image placeholders to get a feel for how each element would look.

~

Font Awesome

When I was happy with the overall look. Some icons were needed to supply the mood and an image.

 

To display emoji and file upload icons, it was over to Font Awesome and to search for 3 emojis and a file/image upload icon:

 

At this point, all user interface components are available for use.

~

Modelling a Status

A view model is needed to model the data in the user interface and that must be saved to JSON.

The following is used:

namespace StatusUpdater.Models
{
    public class StatusViewModel
    {
        public int id { get; set; }

        public string Status { get; set; }

        public string UserName { get; set; }

        public string UserImage { get; set; }

        public string Image { get; set; }

        public string Emotion { get; set; }

        public DateTime DateTime { get; set; }
    }
}

Each of the field are self-explanatory.  The ID field is not used but is a placeholder and gives the option of adding a unique identifier for each status.

 

The image property will be a base 64 string that contains the binary for an uploaded image.

 

The property emotion will contain one of three values to represent each mood.

~

Using Chat GPT to Generate Serialization Code

The following prompt was used:

 

The output: