Update README.md

README.md

@@ -1,7 +1,56 @@
-# Vue 3 + Vite
+<div id="top"></div>
 
-This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+<!-- PROJECT LOGO -->
+<br />
+<div align="center">
 
-## Recommended IDE Setup
 
-- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
+  <h3 align="center">VisualTree</h3>
+  <img src="https://user-images.githubusercontent.com/30842498/147685192-7071225f-34bf-46fb-9c3f-a00f946addd8.png" alt="Preview" >
+  <p align="center">
+    A tool that allows you to visualize and interact with the output of your tree command.
+    <br />
+    <a href="https://github.com/othneildrew/Best-README-Template">View Demo</a>
+  </p>
+
+</div>
+
+
+<!-- ABOUT THE PROJECT -->
+## About The Project
+
+This tool allows you to interact with the output of you tree command, which is pretty useful in case you want to archive your file structure at some point and be able to interact with it later.
+
+<p align="right">(<a href="#top">back to top</a>)</p>
+
+<!-- GETTING STARTED -->
+## Getting Started
+
+To get a local copy up and running follow these simple example steps.
+
+### Installation
+
+1. Clone the repo
+   ```sh
+   git clone https://github.com/xyvs/visualtree.git
+   ```
+2. Install NPM packages
+   ```sh
+   npm install
+   ```
+3. Run the server
+   ```sh
+   npm run dev
+   ```
+4. Go to [localhost:3000](https://localhost:3000)
+
+<p align="right">(<a href="#top">back to top</a>)</p>
+
+
+<!-- LICENSE -->
+## License
+
+Distributed under the MIT License. See `LICENSE.txt` for more information.
+
+<p align="right">(<a href="#top">back to top</a>)</p>
+