The Nuffshell Coding Diary

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

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

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

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

Part IV: Drawing a Mind Map with Force Directed Graphs

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

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

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

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

Part VIII: Local State Management with Apollo Client

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!

TL;DR: I converted my project to TypeScript.

Part X: Adding a Click Handler to a Three.js Model

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

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

Part XII: Animating Camera Movement in Three.js

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