My Five Minute Journal


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


March 2018 - Present


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


Web Application


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? 


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


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.use(express.static('public'));'/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



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{
"journal": data

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

       console.log("Not 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++) {
var sendData = {
          data: mongoData
res.render('pages/index', sendData);


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.


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

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

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

error: function(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