DEV Community

Cover image for Skill Tree Update 4/4/2022

Posted on • Updated on

Skill Tree Update 4/4/2022


April Fool's update


  It's been a ride. I remember three weeks ago when I was starry-eyed about incorporating new technologies like NextJS and FaunaDB. What ended up happening is I fell back to technologies that I was familiar with: Django for REST APIs and PostgreSQL. Part of the reason why I wanted to use new technologies was because it was frustrating getting my development environment working with an M1 Mac Air. Fortunately, I figured it out. Building the static UI was a breeze; it only took a day. Making the static UI stateful, well that took the next two weeks. The following is an overview of the major updates I have accomplished so far. The most important update being how I approach my work now.

Building the Static UI

static ui

  The UI was built using Tailwind CSS in a create-react-app TypeScript template with a box of scraps. Because I already designed how it would basically look, the biggest issue I ran into while creating the static UI was determining if I should add a submit button. Unfortunately, this is not an April Fool's joke. This UI decision affects how often I will send updates to the API. Is it better to do many small updates or one big update to the API? Said in a different way: How many trips to the grocery store do you want to make? Exactly, one big update with a single submit button would be the most optimal method of updating the API. However, it would also be more cumbersome and dangerous for most people. Yes, dangerous, and I'll explain why.

  Having a single Edit/Submit button would open all forms to change at once. Changing one part of the form and accidentally changing another part of the form can cause a serious error in miscommunication of ideas or loss of work. A single Edit/Submit button can streamline work, however, it is not sufficiently safe for our purposes.

Building the Backend Core in a Single Weekend

  When I'm tasked with creating an API with batteries included as quickly as possible, I fall back on Django. Is it because it's the best backend? Nope. It's because it's the backend that I understand the best and because it's the first web framework I learned. And honestly, if I had to code in a single language for the rest of life, it would probably be Python.

  As I mentioned before, the hardest part of setting up the backend was making sure that when I migrate to a PostgreSQL database, Django's ORM can communicate with it through psycopg2.

  The backend core features REST APIs that I will need to use for testing data fetching and data fetching techniques on the frontend with Redux Toolkit.

Adding Statefulness with Redux Toolkit

  It if weren't for Redux Toolkit, I probably would have used a different state manager. Vanilla Redux without Toolkit is fairly difficult to figure out on a single pass of reading the documentation. Fortunately, I had built a fake Redux replica from a book tutorial prior so I already had good idea on how Redux worked under the hood. I can safely recommend using Redux Toolkit and its data-fetching counterpart, Redux Toolkit Query. State management has been a breeze with Redux Toolkit.

From all the hype of React Query, I thought I could use it to replace Redux, but it clearly says on its website that it is not a replacement for state management systems like Redux. I spent a good five hours comparing Redux and React Query only to realize that React Query is not the state management killer that I thought it was.

How I Approach My Work Now

  As I struggled to fall asleep after a stressful sprint of three consecutive 14-hour workdays, Cal Newport's book, Deep Work, popped into my head. Deep Work is focusing solely on knowledge work without distractions. I've known about it since its inception, but I gave up on it several times in the past due to lack of motivation. I could not possibly sustain my self-destructive work schedule, so I put my phone on Do Not Disturb, I abstained from reading news, emails, or watching youtube videos. And I politely told my family not to disturb me from 8am to 12pm. The general limit for deep work is about four hours. The result: I felt very productive and I was able to finish at least one or two project goals per day.


  From these past three weeks, I needed to solve many technical problems, but also human problems like fixing how I approach work. In the future, I'd like to recognize my own personal human problems sooner so I don't get in the way of my work.

Top comments (5)

tieje profile image
tieje • Edited

First off, thanks for being my first comment!

Anyways, this project is a website meant for creating shareable skill trees for FREE. My larger goal is to make education more student-centered. I feel like a step in the right direction is to gamify school through something like a cool skill tree. At some point, I want to be able to create a default theme like what I have now, as well as a Skyrim Theme like the following:

skyrim tree


  • Students get to
    • review their teacher's notes for lessons
    • look at the bigger picture. They may feel less overwhelmed and feel like they have some direction in their education.
    • get to keep track of what they feel like they know and what they feel like they don't know (Using colors)
  • Teachers get
    • Optional Quantitative Feedback from students about how well they feel like they understand a lesson
    • Optional Verbal Feedback from students about how they're feeling about the topic or just things in general

This project will never be another method for evaluating students.

nathankurz91 profile image
Nathan Kurz

You should add a color blind mode! Pretty cool nice work.

tieje profile image
tieje • Edited

I will definitely do this. Thank you for the input. :)
color blind mode