Basic flow for creators

App.vue

+<template>
+  <div>
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="scss">
+@import '/assets/semantic/semantic.min.css';
+
+#choice {
+  margin-top: 5rem;
+}
+</style>

index.js

+import VueRouter from 'vue-router';
+
+import Vue from "vue";
+import App from "./App";
+
+import AppIndex from './src/AppIndex';
+import CreatorApp from './src/creators/App';
+import CreatorIndex from './src/creators/Index';
+import CreatorDefine from './src/creators/Define';
+
+Vue.use(VueRouter);
+
+var router = new VueRouter({
+  mode: 'hash',
+  base: window.location.href,
+  routes: [
+    {path: '/', component: AppIndex},
+    {path: '/creator', component: CreatorApp, children: [
+      {path: '',  component: CreatorIndex},
+      {path: 'define',  component: CreatorDefine},
+    ]}
+  ]
+});
+
+new Vue({
+  el: "#app",
+  router,
+  render: h => h(App)
+});

package.json

+{
+  "dependencies": {
+    "poi": "^10.1.6",
+    "vue-router": "^3.0.1"
+  },
+  "devDependencies": {
+    "node-sass": "^4.9.0",
+    "sass-loader": "^7.0.1"
+  }
+}

src/AppIndex.vue

+<template>
+  <div>
+    <div id="choice" class="ui very padded text container center aligned segment">
+      <h1 class="ui header">Choose your experience</h1>
+      <router-link class="ui purple button">I am a contributor</router-link>
+      <router-link to="/creator" class="ui green button">I am a creator</router-link>
+    </div>
+    <div class="ui text container">
+      <p>Tell me what you need, I'll find someone that can help you. Tell me what you can give, I'll find someone who needs it.</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>

src/creators/App.vue

+<template>
+  <div>
+    <div class="ui large inverted menu">
+      <div class="ui container">
+        <router-link to="/" class="header item">
+          Retribute <span class="ui green label">for creators</span>
+        </router-link>
+        <router-link to="/creator" class="item">Home</router-link>
+        <router-link to="/creator" class="item">My needs</router-link>
+        <router-link to="/creator" class="item">Profile</router-link>
+      </div>
+    </div>
+    <div class="ui hidden divider"></div>
+    <div class="ui main text container">
+      <router-view />
+    </div>
+    <div class="ui hidden divider"></div>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>

src/creators/Define.vue

+<template>
+  <div>
+    <h2 class="ui main header">Define your needs</h2>
+    <need-form />
+  </div>
+</template>
+
+<script>
+import NeedForm from './NeedForm';
+
+export default {
+  components: {
+    NeedForm,
+  }
+}
+</script>

src/creators/FeedbackNeed.vue

+<template>
+  <div class="ui fluid card">
+    <div class="content">
+      <div class="header">{{ creator }} needs {{ needed }} feedback</div>
+      <div class="meta">
+        <span v-if="remaining" class="right floated time">{{ remaining }} days remaining</span>
+        <span v-if="recurrent">Recurring every {{ recurrent }} days</span>
+      </div>
+      <div class="description">
+        <slot></slot>
+        <div class="ui hidden divider" />
+        <div v-for="channel in channels" class="ui label">{{ channel }}</div>
+      </div>
+    </div>
+    <div class="extra content">
+      <div class="author">
+        <span><i class="envelope icon" /> {{ current }} on {{ needed}} feedback gathered</span><br />
+        <i class="ui user icon" /> {{ creator }}
+      </div>
+    </div>
+    <div class="ui bottom attached green progress">
+      <div class="bar" :style="{'width': this.progress + '%'}"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    creator: {type: String, required: true},
+    channels: {type: Array, required: true},
+    needed: {type: Number, required: true},
+    recurrent: {type: Number, required: false},
+    current: {type: Number, required: true, default: 0},
+    remaining: {type: Number, required: true, default: 0},
+  },
+  computed: {
+    progress () {
+      return parseInt(this.current * 100 / this.needed) || 0
+    }
+  }
+}
+</script>

src/creators/Index.vue

+<template>
+  <div>
+    <h2 class="ui main header">Hello Emily!</h2>
+    <p>
+      Welcome to Retribute. It looks like you're new here, here is how it works:
+    </p>
+    <ol>
+      <li>As a creator, on Retribute, you define needs: earning 50€ a week, answer a tricky question, get some feedback about your work, get in touch with someone...</li>
+      <li>Retribute makes those needs available on the network</li>
+      <li>You get help from contributors based on what you need</li>
+    </ol>
+    <router-link to="/creator/define" class="ui green button">Get started</router-link>
+    <div class="ui divider" />
+    <h2 class="ui header">Latest needs</h2>
+    <div>
+      <money-need
+        :creator="'Eliot Berriot'"
+        :needed="75"
+        :current="23"
+        :recurrent="7"
+        :channels="['Liberapay', 'Patreon']"
+        :remaining="3">
+        I need this money to make Funkwhale's development more sustainable
+      </money-need>
+      <feedback-need
+        :creator="'Nausicaa'"
+        :needed="10"
+        :current="3"
+        :channels="['Mastodon', 'email']"
+        :remaining="27">
+        Please, let me know, am I spreading enough love?
+      </feedback-need>
+      <money-need
+        :creator="'Datagueule'"
+        :needed="1400"
+        :current="640"
+        :remaining="30"
+        :channels="['Liberapay', 'Ulule', 'Tipeee']">
+        This money will fund our new documentary about democracy.
+      </money-need>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import FeedbackNeed from './FeedbackNeed';
+import MoneyNeed from './MoneyNeed';
+
+export default {
+  components: {
+    MoneyNeed,
+    FeedbackNeed,
+  }
+}
+</script>

src/creators/MoneyNeed.vue

+<template>
+  <div class="ui fluid card">
+    <div class="content">
+      <div class="header">{{ creator }} needs {{ needed }}€</div>
+      <div class="meta">
+        <span v-if="remaining" class="right floated time">{{ remaining }} days remaining</span>
+        <span v-if="recurrent">Recurring every {{ recurrent }} days</span>
+      </div>
+      <div class="description">
+        <slot></slot>
+        <div class="ui hidden divider" />
+        <div v-for="channel in channels" class="ui label">{{ channel }}</div>
+      </div>
+    </div>
+    <div class="extra content">
+      <div class="author">
+        <i class="money icon" /> {{ progress }}% funded<br />
+        <i class="ui user icon" /> {{ creator }}
+      </div>
+    </div>
+    <div class="ui bottom attached green progress">
+      <div class="bar" :style="{'width': this.progress + '%'}"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    creator: {type: String, required: true},
+    channels: {type: Array, required: true},
+    needed: {type: Number, required: true},
+    recurrent: {type: Number, required: false},
+    current: {type: Number, required: true, default: 0},
+    remaining: {type: Number, required: true, default: 0},
+  },
+  computed: {
+    progress () {
+      return parseInt(this.current * 100 / this.needed) || 0
+    }
+  }
+}
+</script>

src/creators/NeedForm.vue

+<template>
+  <div class="ui fluid form">
+    <div class="three fields">
+      <div class="ui field">
+        <label>Type</label>
+        <select class="ui dropdown" v-model="type">
+          <option :value="'money'">Money</option>
+          <option :value="'feedback'">Feedback</option>
+        </select>
+      </div>
+      <div class="ui field">
+        <label>Periodicity</label>
+        <select class="ui dropdown" v-model="recurrent">
+          <option :value="false">None</option>
+          <option :value="7">Weekly</option>
+          <option :value="30">Monthly</option>
+        </select>
+      </div>
+      <div class="ui field">
+        <label>Target</label>
+        <input type="text" v-model="needed" placeholder="How much do you need?" />
+      </div>
+    </div>
+    <div class="ui field">
+      <label>Description</label>
+      <textarea v-model="description" placeholder="Explain why you need this in your own words." />
+    </div>
+    <div class="ui hidden divider" />
+    <h3 class="ui header">Preview</h3>
+    <money-need
+      v-if="type === 'money'"
+      :creator="creator"
+      :needed="needed"
+      :recurrent="recurrent"
+      :current="0">{{ description }}</money-need>
+    <feedback-need
+      v-if="type === 'feedback'"
+      :creator="creator"
+      :needed="needed"
+      :recurrent="recurrent"
+      :current="0">{{ description }}</feedback-need>
+  </div>
+</template>
+
+<script>
+import FeedbackNeed from './FeedbackNeed';
+import MoneyNeed from './MoneyNeed';
+
+export default {
+  components: {
+    MoneyNeed,
+    FeedbackNeed,
+  },
+  data () {
+    return {
+      type: 'money',
+      creator: 'Emily',
+      needed: 0,
+      description: '',
+      remaining: 30,
+      recurrent: false,
+    }
+  },
+  computed: {
+    progress () {
+      return parseInt(this.current * 100 / this.needed)
+    }
+  }
+}
+</script>