How to create directory tree of the folder structure using ‘tree’ command

`end result —`

`Step 1`

Assuming you’re using Apple OS X/macOS, install Homebrew on macOS and then type the following brew command:

brew install tree

`Step 2`

Go to the directory whose tree structure you need

cd “your_directory_name”

`Step 3`

type this command to get the tree structure:

tree -v --charset utf-8

`Note`

Don’t be an idiot and make sure to delete the node_module files if its a front-end project

I made this mistake multiple times 🤦

Example:


.
├── LICENSE
├── README.md
├── index.html
├── package-lock.json
├── package.json
├── postcss.config.js
├── src
│   ├── App.jsx
│   ├── assets
│   │   ├── constants.js
│   │   ├── favicon.ico
│   │   ├── index.js
│   │   ├── loader.svg
│   │   └── logo.svg
│   ├── components
│   │   ├── ArtistCard.jsx
│   │   ├── DetailsHeader.jsx
│   │   ├── Error.jsx
│   │   ├── Loader.jsx
│   │   ├── MusicPlayer
│   │   │   ├── Controls.jsx
│   │   │   ├── Player.jsx
│   │   │   ├── Seekbar.jsx
│   │   │   ├── Track.jsx
│   │   │   ├── VolumeBar.jsx
│   │   │   └── index.jsx
│   │   ├── PlayPause.jsx
│   │   ├── RelatedSongs.jsx
│   │   ├── Searchbar.jsx
│   │   ├── Sidebar.jsx
│   │   ├── SongBar.jsx
│   │   ├── SongCard.jsx
│   │   ├── TopPlay.jsx
│   │   └── index.js
│   ├── index.css
│   ├── index.jsx
│   ├── pages
│   │   ├── AroundYou.jsx
│   │   ├── Discover.jsx
│   │   ├── MyFaves.jsx
│   │   ├── Search.jsx
│   │   ├── SongDetails.jsx
│   │   ├── TopArtists.jsx
│   │   ├── TopCharts.jsx
│   │   └── index.js
│   └── redux
│       ├── features
│       │   └── playerSlice.js
│       ├── services
│       │   └── shazamCore.js
│       └── store.js
├── tailwind.config.js
└── vite.config.js