diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..403adbc
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/README.md b/README.md
index c60b6e4..09deec5 100644
--- a/README.md
+++ b/README.md
@@ -1,46 +1,24 @@
-# algorithm-visualizer
-### Live Link
+# algo
-### Completed Algorithm
-* Sorting
- * Bubble Sort
- * Insertion Sort
-* Searching
- * Linear Search
- * Binary Search
-
-
-
-
-
-
-
-## Setup
-
-The first thing to do is to clone the repository:
-
-```sh
-$ git clone https://github.com/Bappy4u/algorithm-visualizer.git
+## Project setup
+```
+npm install
```
-Then open `index.html` in the browser. That's it
-
-### What I've used in this project
-
-* JavaScript
-* Async & Await function of javaScript
-* D3.js for data visualization
-* Algorithms
-* Html & CSS
-
-
-### Incomplete feature:
-
-* More Sorting algorithms visualizations
-* Linked list visualization
-* Tree visualization
-* And More...
-###
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+### Compiles and minifies for production
+```
+npm run build
+```
+### Lints and fixes files
+```
+npm run lint
+```
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).
diff --git a/babel.config.js b/babel.config.js
new file mode 100644
index 0000000..e955840
--- /dev/null
+++ b/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+ presets: [
+ '@vue/cli-plugin-babel/preset'
+ ]
+}
diff --git a/jsconfig.json b/jsconfig.json
new file mode 100644
index 0000000..4aafc5f
--- /dev/null
+++ b/jsconfig.json
@@ -0,0 +1,19 @@
+{
+ "compilerOptions": {
+ "target": "es5",
+ "module": "esnext",
+ "baseUrl": "./",
+ "moduleResolution": "node",
+ "paths": {
+ "@/*": [
+ "src/*"
+ ]
+ },
+ "lib": [
+ "esnext",
+ "dom",
+ "dom.iterable",
+ "scripthost"
+ ]
+ }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..a8fdca3
--- /dev/null
+++ b/package.json
@@ -0,0 +1,61 @@
+{
+ "name": "algo",
+ "version": "1.0.0",
+ "private": true,
+ "description": "* Sorting\r * Bubble Sort\r * Insertion Sort\r * Searching\r * Linear Search\r * Binary Search",
+ "author": "",
+ "scripts": {
+ "serve": "vue-cli-service serve",
+ "build": "vue-cli-service build",
+ "lint": "vue-cli-service lint",
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "main": "index.js",
+ "dependencies": {
+ "core-js": "^3.8.3",
+ "vue": "^3.2.13",
+ "vue-router": "^4.2.2"
+ },
+ "devDependencies": {
+ "@babel/core": "^7.12.16",
+ "@babel/eslint-parser": "^7.12.16",
+ "@vue/cli": "^5.0.8",
+ "@vue/cli-plugin-babel": "~5.0.0",
+ "@vue/cli-plugin-eslint": "~5.0.0",
+ "@vue/cli-service": "~5.0.0",
+ "eslint": "^7.32.0",
+ "eslint-plugin-vue": "^8.0.3"
+ },
+ "eslintConfig": {
+ "root": true,
+ "env": {
+ "node": true
+ },
+ "extends": [
+ "plugin:vue/vue3-essential",
+ "eslint:recommended"
+ ],
+ "parserOptions": {
+ "parser": "@babel/eslint-parser"
+ },
+ "rules": {}
+ },
+ "browserslist": [
+ "> 1%",
+ "last 2 versions",
+ "not dead",
+ "not ie 11"
+ ],
+ "_id": "algo@1.0.0",
+ "bugs": {
+ "url": "https://github.com/Bappy4u/algorithm-visualizer/issues"
+ },
+ "homepage": "https://github.com/Bappy4u/algorithm-visualizer#readme",
+ "keywords": [],
+ "license": "ISC",
+ "readme": "ERROR: No README data found!",
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/Bappy4u/algorithm-visualizer.git"
+ }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000..df36fcf
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..ad561d9
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,17 @@
+
+
+