Project Skill Tree: Designing the Technical Frontend Part 1
Tags: design, webdev, nextjs, fauna
Published: 2022-03-10 16:17:39

## [Mission Statement](https://dev.to/tieje/the-beginning-of-project-skill-tree-1je2)

## Contents

- [Introduction](#introduction)
- [Two Separate Frontend App Layers](#two-separate-frontend-app-layers)
- [Overlay UI Component Layer Features and Implementation](#overlay-ui-component-layer-features-and-implementation)
- [Skill Tree Background Layer Features and Implementation](#skill-tree-background-layer-features-and-implementation)
- [Conclusion](#conclusion)

## Introduction

&emsp; Although I [defined the tech stack in a previous article](https://dev.to/tieje/project-skill-tree-tech-stack-1274), 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)](http://semblance.us/) 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](https://www.libhunt.com/).

## Two Separate Frontend App Layers

&emsp; The main application will consist of [two layers: the overlay and the background](https://www.figma.com/file/2HIVXfIRBTeEJy5QnTphSY/skill-tree?node-id=3%3A19). 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

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

### Background Image Layer

&emsp; This seems to be the easy part.

- Default Images
    - Static Assets
- Image Upload

### Node and Line Building

&emsp; 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

&emsp; 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](https://codepen.io/features/) 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.

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