[002] – First Deploy with Basic UI

It’s been a little while since I’ve posted an update. In typical fashion, its been mostly due to being distracted by all the other things, but I did take a brief break from technology over the new year.

Below is a recap of things that I’ve done since the last update.


Setting Up Deployments

As I mentioned in my previous post, for now, I’m just using a simple setup using Rsync to deploy files.

It’s still somewhat of a manual process but for now, it works! I will work to make this more automated in the future.

I like having a separate repo for the server and the client.

When I’m ready to deploy something, I ‘build‘ the client and then from the server project I run a script that copies over the production-ready client files into the servers build folder. Those are the files that are then deployed.

FrontEnd Prototyping

While I haven’t made a formal update in quite a while, behind the scenes I’ve been doing quite a bit of prototyping for the frontend.

This allows for me to get a sense of how things are going to look and function. It also gave me time for a refresher on React Router and Redux!

This project is certainly going to be an iterative process. I’m going to do my best to plan things out ahead of time because that is what works best for me when it comes to coding.

Initial FrontEnd Build

Even though I am using create-react-app, there was still a bit of setup I needed to do for the client-side.

I had to install and configure ESLint. This is also the first project I am going to use Prettier on.

I still like compiling Sass files, so there was a bit of configuration I needed to do in order to get that to work with create-react-app.

Finally, I worked on getting a basic page structure in place. This consisted of getting Bulma wired up, setting up page components, and displaying those components using React Router.

It’s nothing great, but you can view the updates here:


You can checkout the repo here:



About Those Diversions

It goes without saying that when I work on personal projects, it’s easy for me to get side-tracked.

I may come across a concept that I feel like I want to learn more about or there may be another side project that I want to start or work on.

The worst part about getting side-tracked is coming back to a project that I haven’t touched in a while. It usually takes at least a few hours to get back up to speed on what I last did and what I need to work on next.

To help with this, I’m going to try and keep better track by documenting all the things. I’m not sure yet if I’ll use a simple text file or use an app like Trello.

I love the idea of Trello, but I feel like I need to find the right way to use it that works for me.

Documenting Hurdles

Up to this point, I feel like I haven’t been doing these updates justice because I have not been properly describing the hurdles I’ve had to overcome as well as sharing the resources and fixes I’ve had to put in place.

Going forward, I’m going to try and be better at this!

What’s Next

My plan is to get as much of the frontend completed as possible before starting to wire up the backend. So be on the look-out for more UI enhancements!

[001] – Server Setup, DNS, and Key Decisions

There is quite a bit to catch up on since my last post so let’s get right into it!

CSS Framework

As a FrontEnd Developer, it’s hard to resign myself to using something like a CSS Framework. Initially, I intended to custom style all the things for this project, but the more I thought about it, the more I realized how much time and energy this would consume.

For this reason, I have decided that I will use a CSS framework. For now, my choice is going to be Bulma.io. I’ve known about Bulma for a while and the thing I really like about it is that it is right in the middle when it comes to CSS frameworks. Not too heavy, not too light.


Another major decision I made this past week is that I will be using create-react-app to scaffold the React frontend.

I love Webpack, and for some weird reason, I like configuring it. However, it can be time-consuming to configure and I need really focus on saving time and mental energy especially at the start of this project.

Server Setup

I admit I am a complete noob at DevOps. I know barely enough to be dangerous.

A lot of the server setup and configuration I am using comes from a great course I took over at https://jsfullstacker.com/.  I found this site by watching the awesome videos Rem Zolotykh puts out over on YouTube. Rem is a great teacher and really knows his stuff!

I’ve decided to use Digital Ocean for this project. This is my first experience using it and so far it’s been really great.

Right now, I have a staging and production environment setup. I really have no idea how this workflow will work, but I’d like to try it. Staging will be for active development and once a feature is complete, it will be pushed to prod.

Here is a quick list of things I had to do to get this setup and working:

  • Create a new droplet on Digital Ocean
  • Set the droplet up to use SSH
  • Create a non-root user
  • Install/configure NGINX
  • Create two new A records for my domain. One for @ and one for staging.
  • Setup a virtual host for handling the staging sub-domain
  • Install NodeJS.
  • Install and configure PM2 to manage a super, simple web server instance.


I set up two repos for this project as I want to keep the server/api and frontend separate.

Server/API: https://github.com/efuller/learningtracks-server

FrontEnd: https://github.com/efuller/learningtracks-client


These are something I still need to get setup. I will probably just use a Rsync to push my files to the server. Eventually, I’d like to get something a bit more elaborate setup.


[000] – Introducing the LearningTracks.io Web Application Journal

As I stated in my recap post, I have a passion for building web applications. It’s part of what has been driving me to learn as much as I can about the full stack over the last few years.

Well, I think the time has come for me to put what I’ve been learning into practice and attempt to build out an actual web application.

Say hello to learningtracks.io! You will learn more about what this site will be all about as we move forward.


Before we start this journey, let me first start by listing out a few disclaimers:

  1. I don’t know everything!
  2. This project is a learning exercise.
  3. Some of the time I’ll have no clue what I’m doing and will rely on doing what Google search tells me to do.
  4. Do I really think I’m ready to take on this kind of project? Hell no!

Journaling the Process

Initially, I intended on making this project a huge series of tutorials.

After some thought, I’ve decided that would be way too time-consuming and a huge mental blocker that would continually cause me to freeze and do nothing!

Instead, I am going to take the approach of journaling the process. I’ll include my thought process behind decisions I’ve made, resources I’ve used, and any other tips and tricks I’ve learned along the way. Basically, these journal entries will be filled with lots of golden nuggets!

The main reason I am choosing a journaling approach is that it’s a huge time saver. I can sit down and write out a journal entry in an hour. Whereas a tutorial can take days to write.

These journal entries will be a quicker read as well. No BS, just the good stuff!

Finally, I am still going to write detailed tutorials about different concepts along the way!

In the End

This experiment could end up being a complete failure and I’m OK with that. It’s all about learning.

If by sharing this experience I help even just one person along the way, then it will have been worth it!