This web app fetches any website's DOM and displays it in visual form - as a tree!
Visit https://treeify-app.herokuapp.com/ for a working demo of the app. Some suggestions for good-looking URLs:
Warning: if a website has too large of a DOM, tree rendering may slow down significantly, or it may try to render on a canvas larger than your browser will allow. If this happens, reload the tab (or close and reopen) and try again with a different URL.
- Clone or download the code into a directory of your choosing
- In the project's root directory, run
yarn startto start the Express server and verify CLI printsApp listening at port: 3001 - In the project's client directory (
cd client), runyarn startto start the React app
- User inputs a URL and clicks treeify
- React app sends URL to Express server in a POST request
- Server makes a GET request to the external site and fetches its DOM
- Server parses the data with a tree traversal, adding drawing information to each node
- React app receives data from the server
- React app renders the tree on screen
- Express backend (asynchronous logic, error handling)
- React frontend (form validation, POST request to server, UI gracefully handles loading & error states)
- Depth-first and breadth-first tree traversal algorithms to build the DOM object and draw the tree
- p5.js embedded in React through useRef & useEffect hooks
Issues can be found in this repo's Issues tab.
Drawing a balanced, good-looking tree is harder than it sounds. Credit to Bill Mill for this extensive article discussing methods and key principles.
Tl;dr:
Principle 1: The edges of the tree should not cross each other.
Principle 2: All nodes at the same depth should be drawn on the same horizontal line. This helps make clear the structure of the tree.
Principle 3: Trees should be drawn as narrowly as possible.
Principle 4: A parent should be centered over its children.
