Content
- Introduction
- Building the Static UI
- Building the Backend Core in a Single Weekend
- Adding Statefulness with Redux Toolkit
- How I Approach My Work Now
- Conclusion
Introduction
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
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.
Conclusion
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 (3)
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:
Incentives:
This project will never be another method for evaluating students.
You should add a color blind mode! Pretty cool nice work.
I will definitely do this. Thank you for the input. :)