CyberLeet, a Three.js + React, cyberpunk style visualization for leetcode problems -- made for fun
25 Dec 2020
Reading time ~7 minutes
a demo site:
a video Demo
About this project
I am a big fan of the game Cyberpunk 2077, and I have been working on leetcode problems recently because of graduation and job hunting.
I have been interested in WegGL visualization projects, when I am learning the three.js, I decided to find a small project to practice. So this cyberpunk 2077 leetcode visualizations is built, for fun and for practice. I think the analysis of the graph connections for the leetcode questions will be an interesting next step for this project. This version is purely a preliminary basic feature to explore and display.
Authors
- Muyang Guo
Documentations
1. How I get the leetcode questions data:
There are many resources online for that already, the python script I modified is based from here.
This will get the contents we need for each question, their front end ID (the number of the question), the content, the difficulty, we can parsed the data and dump in a JSON format that we can later directly import to our react project.
2. How I combined the three.js and react:
Three.js is not a user friendly library to start with, the documentations and examples are sometimes misleading, you will have to dive into deep and find something you need eventually. I would recommend to use babylon.js or any newer stuff.
Three.js is also not very recommended to build with react. I used the pure three.js instead of the three-react-fiber lib, both will have issues for different reason, anyway, the code below is here:
For the three.js as a react component in ThreeView.js
:
For a complete project codes please visit the github project repo @ here.
Next step:
I will build more data to be displayed, including the company tagged questions, as well similar questions, the aim is to show more interactive contents and perform connection analysis of the data graph.
Copyright 2020 Muyang Guo