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
I use an Express Template called ejs to create a separate HTML file within the node.js server, where to show the data I pull from my MongoDB collection. Click here to see the ejs file on Github.
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.