Project Skill Tree: Designing the Technical Frontend Part 1

Mission Statement

Contents

• Introduction
• Two Separate Frontend App Layers
• Overlay UI Component Layer Features and Implementation
• Skill Tree Background Layer Features and Implementation
• Conclusion

Introduction

  Although I defined the tech stack in a previous article, I will need to go in depth about how features will be built. The more specific the better. As much as I would like to get straight to writing code, writing code for an application this large without thinking about implementation is a rookie mistake. I learned this from my last incomplete project (project Semblance) where I merely defined my tech stack instead of thinking of how features will be technically implemented and with what packages. There are tons of time-saving JavaScript libraries, packages, and alternatives out there: here's a neat web app for finding alternatives.

Two Separate Frontend App Layers

  The main application will consist of two layers: the overlay and the background. The overlay is the UI component used to interact with nodes in the background. When the user clicks on the skill tree background, the app will hide the overlay and allow the user to scroll around and zoom in and out of the skill tree background. This allows users to see the bigger picture like looking at a map from an RPG.

Template

• Feature
  • Implementation

Overlay UI Component Layer Features and Implementation

• Markdown document, edit, and preview
  • Forem open source code
  • perhaps an alternative library
• Search bar
  • Algola
• Menu drop down
  • Tailwind CSS
• Statistics bar graph
  • d3
• Overlay Node Data loading
  • NextJS lazyLoading

Skill Tree Background Layer Features and Implementation

  The easy way to build the skill tree background layer would be to separate nodes and lines from the background image.

Background Image Layer

  This seems to be the easy part.

• Default Images
  • Static Assets
• Image Upload

Node and Line Building

  This is the hard part.

• default Node Icons
  • Static Assets
• skill tree line and node building
  • d3
  • Make nodes and lines three types of sizes and lengths, respectively, (short, medium, long)

Conclusion

  In my last major project, I simply started coding and tried to make things work. The worst part of doing it this way for a large project is that you build out large parts of infrastructure only to rebuild it. This time, I'm probably going to try to use a sandbox like Code Pen to practice, test, and build out prototypes for d3, Forem (markdown document CRUD), and Algola (search engine?). I'm not sure about Algola since it might need a backend. I might not need Algola after all.

  What I will do in the future is create a tutorial post for each feature that I'm figuring out.