Data Selfie and Express tutorial

For this week we had two different assignments, the first one was to run the data selfie app and try to make some changes to it and the second one was to complete the express tutorial. I decided to dedicate more time to slowly go throw the express tutorial and be able to understand what I was doing. My goal was to reach the end of the tutorial by having an overall understanding of what I was doing and how I might use this in future projects.

I started with the Data Selfie project, I ran it, deleted Joey’s (very funny) selfies from the db document in order to be able to populate it with only my selfies.

Deleting Joey's selfies from db

Deleting Joey's selfies from db

I didn’t know if I was going to be able to add a new element to the form therefore I decided to start by creating a concept around the selfie collection and change the colors of the font and background. I started by collecting selfies every time I was feeling like I didn’t know what I was doing (I probably escaped a lot of those moments).

Weird selfies collection

Weird selfies collection

Since I have been trying to keep track of how I feel around food and how it makes me feel, I decided to use the selfie collection to track the moments when I feel “Hangry”, a combination between being hungry and angry, which happens very frequently since I tend to eat a lot of snacks, however sometimes I just stay at the floor and for different reasons, end up being hungry in front of the computer. I decided to collect those moments and document them with a selfie and a reason (text input) for me to indicate the app why am I hungry? what is the reason why? Did I escape a meal time? did I forget my food at home?, did I get too invested in a project and I forgot to buy lunch? (and the list continues….).

New data input

New data input

I also change the text instructions for the data collection and I added a text field with a placeholder indicating: “Why are you hangry?”. This is how the data collection screen looks like:

Data log + new text field

Data log + new text field

I didn’t continue focussing on this assignment because I wanted to dedicate more time to the Express tutorial, which I found very clear and I followed until the end. It was very interesting to see how powerful creating my own API can feel and the amount of possibilities that I have now with this new tools. These are some screenshots from the Express tutorial.

Express tutorial using postman

Express tutorial using postman

Running the p5.js sketch

Running the p5.js sketch