© 2019 Mengzhen Xiao

My Five Minute Journal

PROJECT BRIEF

My Five Minute Journal is a web App for helping people focus on the good in life, and become more grateful and motivated.

DATE

March 2018 - Present

TOOLKITS

Node.js, Mongo DB, RESTful API, jQuery, HTML, CSS

KEYWORD

Web Application

Ideation

I got inspiration from a habit I have: keeping tracking myself in a journal called The Five Minute Journal. By answering a few questions every day, it helps me become more mindful and live with intention. But sometimes when I go traveling or go on business, I forget to bring my journal with me. So I started thinking: why not making the journal in a digital way, and taking advantage of the digital tool to make these data more meaningful? 

​Node.js

I use Node.js to write the server-side. 

Express

I use Express, a web framework for node, to host files on a web server. And I make routes to host different web pages for the website. In order to submit information to the server for processing, I use POST method making the request behind the scenes.

app.listen(80);
 

app.use(express.static('public'));

app.post('/myjournal', function(req, res) {
  var data = {
    dailyChallenge: req.body.checkBox,
    learnt: req.body.thingsIlearnt,
    better: req.body.thingsToBetter,
    gratefulthings: {
      first: req.body.grateful1,
      second: req.body.grateful2,
      third: req.body.grateful3
    }
  };

});

Template

Data Storage

I use MongoDB as the database where I insert and pull data. Each record is made into an object in MongoDB.

To insert a record

 db.myjournal.save({
   
"journal": data
    },

  function(err, saved) {
    if (err || !saved)

       console.log("Not saved");
    else

       console.log("Saved");
  }

);

To pull a record

db.myjournal.find({}, function(err, saved) {
    if (err || !saved) {
     
console.log("No results");
    }

    else {
     
saved.forEach(function(record) {
       
var mongoData = [];
        for (var i = 0; i <
saved.length; i++) {
         
mongoData.push(saved[i]);
        }
       
var sendData = {
          data: mongoData
        };
       
res.render('pages/index', sendData);
      });
    }
  });

API

For the background image on the front page, I use Unsplash API to pull a random image with a keyword Motivation. Responses from Unsplash API are sent as JSON.

AJAX

I use AJAX functions to load the JSON file I get from the Unsplash API.

$.ajax({
      url: "***",
      data: {},
     
success: function(data) {
       
var scr = data.urls.raw;

        $(".backgroundImg").attr('src', scr);

      },
     
error: function(err) {
       
alert(err);
      }
});

Front-end Design

After users submit their answers on the front page, they can review their previous journal on the second page. With a filter, they can see the answers to each question respectively.

What's next?

More APIs

For each of positive quotes and daily challenges, finding an appropriate API to generate different content every day.

Data Statistics & Data Visualization

Making a personal data visualization based on the words that the user used in the answers. For example, it can show what does the user care about most, or what are the most important things in his or her life. The data visualization works as a clear and vivid feedback to each user about his or her recent life.

Thank You!

Read Another Case Study