Edvinas Urbasius

@edvinasurbasius

Front-end developer. Interested in IT, history and economics. The life-long learner.

https://edvinasurbasius.com/

I am finally building apps that are useful

Photo by Kelly Sikkema on Unsplash

I finally reached a stage where I can dedicate my free time for my own projects. You can’t just read tutorials and expect to become an awesome front-end developer. You have to take a leap and venture into the unknown. You have to build.

So, as a real developer, I went to freeCodeCamp and looked for some inspiration. I found an article written by Flavio Copes where he lists a sample of web apps you can build. I liked it and suddenly I was preparing to dive deep into building things.

Requirements

My first project was a weight tracking app and the requirements were:

  • It accepts a set of manual entries of weight measurements taken at different dates
  • It can plot a graph
  • It can allow tracking multiple entities, for example, more than one person weight
  • Store them somewhere

The app is very simple, but it's a great opportunity to practice JavaScript and the use of APIs.

The Process

I knew that my app will need a database to store weight records, so I designed a test database with SQL and ran it with MySQL. The reason why I did this, is that I wanted to verify the model before diving deep into coding.

When I had a working model, I started looking into client-side databases, Web Storage API just wasn't enough. I found Dexie.js which is minimalistic IndexedDB wrapper and IndexedDB itself is a database.

What's great about Dexie.js is that it's easy to interact with it. The tutorial and documentation are also easy to understand. For example, to create tables, you use this piece of code:

db.version(1).stores({
weight: '++id, weight, date'
});

To put values into the database you use this piece of code:

db.weight.put({weight: weight.value, date: date.value});

As for JavaScript code, the app has a bunch of functions and a few selectors. I tried to keep it as simple as possible.

function onSubmit(e) {
e.preventDefault();

db.weight.put({weight: weight.value, date: date.value})
.then(function() {
form.reset();
})
.then(returnWeight);
}

To show a graph I used Plotly.js API library. The range for results is one year. At first, it was hard-coded, but I used some JavaScript to detect the first and last day of the year and now it’s dynamic. I am still experimenting with it. At the moment my graph displays 6 months, 1 month and 'all' results.

Conclusion

Here is a link to a final product: https://github.com/edvinasurbasius/weightAppNoAuthentication It's still not finished. I need to add the design part and authentication. Improve the code itself. I am also planning to build a second version with Vue.js. Nevertheless, it was a fun process to build something useful, which I can use for myself. I will keep working on more apps because it's a great way to improve as a developer.


You'll only receive email when Edvinas Urbasius publishes a new post

More from Edvinas Urbasius: