The Nuffshell Coding Diary
Tags: coding
Published: 2020-12-08 11:16:50

---
title: The Nuffshell Coding Diary
published: true
description: I'm building a social network and collaboration tool based on mind maps, documenting my work in this series of blog posts
tags: #coding
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/cp54a06ju6avs31zf1v8.gif
---

I'm building a social network and collaboration tool based on mind maps, documenting my work in this series of blog posts. Follow me if you're interested in what I've learned along the way about building web apps with React, Tailwind CSS, Firebase, Apollo/GraphQL, three.js and TypeScript.

### Part I: [Drawing a Mind Map with Three.js and React](https://dev.to/pahund/drawing-a-mind-map-with-three-js-and-react-nuffshell-coding-diary-part-i-1g6n) 

![Cover image of part I](https://dev-to-uploads.s3.amazonaws.com/i/ogsh8ggec8up5wdorvu5.png)

TL;DR: I've figured out how to render React components onto a 3D model.

### Part II: [Drawing a Mind Map with Three.js and React, for Real This Time](https://dev.to/pahund/drawing-a-mind-map-with-three-js-and-react-for-real-this-time-nuffshell-coding-diary-part-ii-1n9m)

![Cover image of part II](https://dev-to-uploads.s3.amazonaws.com/i/6zy4x8ze4qir1zx84k2v.png)

TL;DR: I've managed to arrange the child nodes around my mind map root in a circle.

### Part III: [Still Trying to Draw a Mind Map with Three.js and React](https://dev.to/pahund/drawing-a-mind-map-with-three-js-and-react-for-real-this-time-nuffshell-coding-diary-part-iii-1cj1)

![Cover image of part III](https://dev-to-uploads.s3.amazonaws.com/i/iymu6bwbmvg00q71ggxp.png)

TL;DR: I struggled with adding the next level of mind map child nodes.

### Part IV: [Drawing a Mind Map with Force Directed Graphs](https://dev.to/pahund/drawing-a-mind-map-with-three-js-and-react-force-directed-graphs-nuffshell-coding-diary-part-iv-1b74)

![Cover image of part IV](https://dev-to-uploads.s3.amazonaws.com/i/7sedkfin6v750dkzano0.png)

TL;DR: I threw away most of my former attempts and decided to use a library to render my mind map instead.

### Part V: [How to Fix Blurry Text on HTML Canvases on Mobile Phones](https://dev.to/pahund/how-to-fix-blurry-text-on-html-canvases-on-mobile-phones-3iep)

![Cover image of part V](https://dev-to-uploads.s3.amazonaws.com/i/op0hhkycnfs5zoe4umqe.png)

TL;DR: I found a way to make sure my mind map looks good on screens with high pixel per inch ratio.

### Part VI: [Resizing a Three.js Scene When the Browser Window Size Changes](https://dev.to/pahund/resizing-a-three-js-scene-when-the-browser-window-size-changes-4lnd)

TL;DR: I managed to re-render my mind map when the viewport gets resized.

### Part VII: [Adding Trackball Controls to a Three.js Scene with Sprites](https://dev.to/pahund/adding-trackball-controls-to-a-three-js-scene-with-sprites-48hp)

![Cover image of part VII](https://dev-to-uploads.s3.amazonaws.com/i/8ue1rerx349e7d97d1b1.png)

TL;DR: You can now zoom, pan and rotate the 3D model of my mind map.

### Part VIII: [Local State Management with Apollo Client](https://dev.to/pahund/local-state-management-with-apollo-client-14lf)

![Cover image of part VIII](https://dev-to-uploads.s3.amazonaws.com/i/vrb4re0xt7w83qngym92.png)

TL;DR: I added a button to pause animations, using local state management provided by the Apollo Client library.

### Part IX: [TypeScript All the Things!](https://dev.to/pahund/typescript-all-the-things-2o4p)

![Cover image of part IX](https://dev-to-uploads.s3.amazonaws.com/i/4ah4h969o7u1ametz024.png)

TL;DR: I converted my project to TypeScript.

### Part X: [Adding a Click Handler to a Three.js Model](https://dev.to/pahund/adding-a-click-handler-to-a-three-js-model-1f28)

![Cover image of part X](https://dev-to-uploads.s3.amazonaws.com/i/dybvdymmru80qxd8cgc4.gif)

TL;DR: I managed to log a statement to the browser console when a mind map node is clicked.

### Part XI: [Writing a TypeScript Type Definition for a JavaScript npm Package](https://dev.to/pahund/writing-a-typescript-type-definition-for-a-javascript-npm-package-2803)

TL;DR: I fought TypeScript and I won (sort of).

### Part XII: [Animating Camera Movement in Three.js](https://dev.to/pahund/animating-camera-movement-in-three-js-17e9)

![Cover image of part XII](https://dev-to-uploads.s3.amazonaws.com/i/w4th8jv58ouml11vvzhz.png)

TL;DR: I added a smooth animation to the camera as it focuses on a 3D object when it is clicked.