diff --git a/.gitignore b/.gitignore
index 30b3294..0f3156d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -16,3 +16,23 @@
 # Node.js
 **/node_modules
 **/package-lock.json
+**/.DS_Store
+**/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*
diff --git a/planner/src/bin/weekly.rs b/planner/src/bin/weekly.rs
index 9282959..ead7ef2 100644
--- a/planner/src/bin/weekly.rs
+++ b/planner/src/bin/weekly.rs
@@ -11,16 +11,31 @@ use self::planner::solver::{Variables, Domain, Problem};
 ///  Breakfast => RecipeCategory::Breakfast
 ///  Lunch => RecipeCategory::MainCourse
 ///  Dinner => RecipeCategory::MainCourse
-type Day = String;
-const DAYS: &[&str] = &["Lundi", "Mardi", "Mercredi"];
 
-#[allow(dead_code)]
-enum Meals {
-    Breakfast(Day),
-    Lunch(Day),
-    Dinner(Day)
+mod template {
+    //! Exports the [`Template`] struct.
+
+    type Day = String;
+    const DAYS: &[&str] = &["Lundi", "Mardi", "Mercredi"];
+
+    #[allow(dead_code)]
+    enum Meals {
+        Breakfast(Day),
+        Lunch(Day),
+        Dinner(Day)
+    }
+
+    pub struct Template;
+
+    impl Template {
+        fn empty() {
+
+        }
+    }
 }
 
+
+
 impl Into<String> for Meals {
     fn into(self) -> String {
         match self {
diff --git a/planner/src/solver.rs b/planner/src/solver.rs
index 5cd8319..2e1e557 100644
--- a/planner/src/solver.rs
+++ b/planner/src/solver.rs
@@ -18,7 +18,7 @@ type Domains<'a, V> = HashMap<String, &'a Domain<V>>;
 /// The domain of values that can be assigned to variables
 #[derive(Clone)]
 pub struct Domain<V> {
-    pub values: Vec<V>
+    values: Vec<V>
 }
 
 impl<V> Domain<V> {
@@ -26,6 +26,9 @@ impl<V> Domain<V> {
         Domain { values }
     }
 
+    pub fn values(&self) -> &Vec<V> {
+        &self.values
+    }
     /// Returns a new domain with the given filter applied to inner values
     ///
     /// # Examples
diff --git a/web/Cargo.toml b/web/Cargo.toml
index 0c073d9..50e444a 100644
--- a/web/Cargo.toml
+++ b/web/Cargo.toml
@@ -6,6 +6,7 @@ edition = "2018"
 
 [dependencies]
 rocket = "0.4.0"
+rocket_cors = { git = "https://github.com/lawliet89/rocket_cors", branch = "master" }
 cookbook = { path = "../cookbook/" }
 serde = "1.0"
 serde_derive = "1.0"
diff --git a/web/src/main.rs b/web/src/main.rs
index 87b9972..eeb1131 100644
--- a/web/src/main.rs
+++ b/web/src/main.rs
@@ -3,11 +3,15 @@
 #[macro_use] extern crate rocket;
 #[macro_use] extern crate rocket_contrib;
 #[macro_use] extern crate serde_derive;
-
+extern crate rocket_cors;
 extern crate cookbook;
 
 use std::path::Path;
-use rocket::response::{NamedFile, status::NotFound};
+use rocket::{
+    response::{NamedFile, status::NotFound},
+    http::Method,
+};
+use rocket_cors::{AllowedHeaders, AllowedOrigins, Error};
 
 #[get("/")]
 fn index() -> Result<NamedFile, NotFound<String>> {
@@ -66,9 +70,25 @@ mod api {
     }
 }
 
-fn main() {
+fn main() -> Result<(), Error> {
+    let (allowed_origins, failed_origins) = AllowedOrigins::some(&["http://localhost:8080"]);
+    assert!(failed_origins.is_empty());
+
+        // You can also deserialize this
+    let cors = rocket_cors::CorsOptions {
+        allowed_origins: allowed_origins,
+        allowed_methods: vec![Method::Get].into_iter().map(From::from).collect(),
+        allowed_headers: AllowedHeaders::some(&["Authorization", "Accept"]),
+        allow_credentials: true,
+        ..Default::default()
+    }
+    .to_cors()?;
+
     rocket::ignite()
         .attach(api::CookbookDbConn::fairing())
         .mount("/", routes![index])
-        .mount("/api", routes![api::recipes_list, api::delete_recipe]).launch();
+        .mount("/api", routes![api::recipes_list, api::delete_recipe])
+        .attach(cors)
+        .launch();
+    Ok(())
 }
diff --git a/web/vue/README.md b/web/vue/README.md
new file mode 100644
index 0000000..6083444
--- /dev/null
+++ b/web/vue/README.md
@@ -0,0 +1,29 @@
+# vue
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Run your tests
+```
+npm run test
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).
diff --git a/web/vue/babel.config.js b/web/vue/babel.config.js
new file mode 100644
index 0000000..ba17966
--- /dev/null
+++ b/web/vue/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/app'
+  ]
+}
diff --git a/web/vue/package.json b/web/vue/package.json
new file mode 100644
index 0000000..c3de63a
--- /dev/null
+++ b/web/vue/package.json
@@ -0,0 +1,46 @@
+{
+  "name": "vue",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "vue": "^2.5.22"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^3.4.0",
+    "@vue/cli-plugin-eslint": "^3.4.0",
+    "@vue/cli-service": "^3.4.0",
+    "babel-eslint": "^10.0.1",
+    "eslint": "^5.8.0",
+    "eslint-plugin-vue": "^5.0.0",
+    "vue-template-compiler": "^2.5.21"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "rules": {},
+    "parserOptions": {
+      "parser": "babel-eslint"
+    }
+  },
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {}
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}
diff --git a/web/vue/public/favicon.ico b/web/vue/public/favicon.ico
new file mode 100644
index 0000000..c7b9a43
Binary files /dev/null and b/web/vue/public/favicon.ico differ
diff --git a/web/vue/public/index.html b/web/vue/public/index.html
new file mode 100644
index 0000000..eac2e22
--- /dev/null
+++ b/web/vue/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title>vue</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/web/vue/src/App.vue b/web/vue/src/App.vue
new file mode 100644
index 0000000..6a05259
--- /dev/null
+++ b/web/vue/src/App.vue
@@ -0,0 +1,78 @@
+<template>
+  <div id="app">
+    <img alt="Vue logo" src="./assets/logo.png">
+    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <p>{{ items }}</p>
+  </div>
+</template>
+
+<script>
+import HelloWorld from './components/HelloWorld.vue'
+import RecipeDetails from './components/RecipeDetails.vue'
+
+export default {
+  name: 'app',
+  components: {
+    HelloWorld,
+    RecipeDetails
+  },
+  data() {
+    return {
+      items: []
+    }
+  },
+  methods: {
+    setActiveCategory: function(id) {
+      this.active_category = id;
+    },
+    setActiveView: function(idx) {
+      this.active_view = idx;
+    },
+    closeActiveView: function() {
+      this.active_view = -1;
+    },
+    deleteRecipe: function(id) {
+      fetch("http://localhost:8000/api/delete/" + id)
+        .then((res) => res.json())
+        .then((data) => {
+          if (data === true) {
+            this.items.splice(this.active_view, 1);
+            this.closeActiveView();
+            console.log("Deleted :" + data);
+          } else {
+            console.log("Error deleting");
+          }})
+        .catch((err) => console.error(err));
+    },
+    fetchRecipesList: function() {
+      fetch("http://localhost:8000/api/list")
+        .then((res) => res.json())
+        .then((data) => this.items = data)
+        .catch(function(err) {
+          console.error(err);
+        });
+    }
+  },
+  computed: {
+    displayed: function() {
+        return this.items.filter(
+          rec => rec.category == this.active_category
+        );
+    }
+  },
+  mounted () {
+    this.fetchRecipesList();
+  }
+}
+</script>
+
+<style>
+#app {
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>
diff --git a/web/vue/src/assets/logo.png b/web/vue/src/assets/logo.png
new file mode 100644
index 0000000..f3d2503
Binary files /dev/null and b/web/vue/src/assets/logo.png differ
diff --git a/web/vue/src/components/HelloWorld.vue b/web/vue/src/components/HelloWorld.vue
new file mode 100644
index 0000000..d285cb6
--- /dev/null
+++ b/web/vue/src/components/HelloWorld.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>
diff --git a/web/vue/src/components/RecipeDetails.vue b/web/vue/src/components/RecipeDetails.vue
new file mode 100644
index 0000000..450b87d
--- /dev/null
+++ b/web/vue/src/components/RecipeDetails.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="box">
+  <button @click="$emit('close')" class="button is-pulled-right">X close</button>
+    <h4 class="title">{{ item.title }}</h4>
+    <h6 class="subtitle">{{ categories[item.category].name }}</h6>
+    <p><strong>Ingredients : </strong></p>
+    <ul>
+      <li v-for="ing in item.ingredients.split('\n')">{{ ing }}</li>
+    </ul>
+    <button @click="$emit('delete', item.id)"
+            class="button is-danger is-pulled-right">
+      DELETE !
+    </button>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'RecipeDetails',
+  props: ['item'],
+}
diff --git a/web/vue/src/components/RecipeList.vue b/web/vue/src/components/RecipeList.vue
new file mode 100644
index 0000000..e69de29
diff --git a/web/vue/src/main.js b/web/vue/src/main.js
new file mode 100644
index 0000000..63eb05f
--- /dev/null
+++ b/web/vue/src/main.js
@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+Vue.config.productionTip = false
+
+new Vue({
+  render: h => h(App),
+}).$mount('#app')