From 0a59b8e85bc1c123b6152d5f1a0c5dc0583fd523 Mon Sep 17 00:00:00 2001
From: Keith Holliday <krh121791@yahoo.com>
Date: Thu, 20 Jul 2017 14:52:46 -0600
Subject: [PATCH] [WIP] New client challenges (#8842)

* Added initial challenge pages

* Added challenge item and find guilds page

* Added challenge detail

* Added challenge modals

* Ported over challenge service code

* Ported over challenge ctrl code

* Added styles and column

* Minor modal updates

* Removed duplicate keys

* Fixed casing
---
 .../svg/for-css/support-habitica-gems.svg     | 115 ++++++++++
 website/client/assets/svg/member-icon.svg     |   3 +
 website/client/components/appMenu.vue         |   2 +-
 .../components/challenges/challengeDetail.vue | 199 ++++++++++++++++++
 .../components/challenges/challengeItem.vue   | 178 ++++++++++++++++
 .../components/challenges/challengeModal.vue  | 160 ++++++++++++++
 .../challenges/closeChallengeModal.vue        | 104 +++++++++
 .../components/challenges/findChallenges.vue  |  89 ++++++++
 .../client/components/challenges/index.vue    |  19 ++
 .../components/challenges/myChallenges.vue    | 142 +++++++++++++
 .../client/components/challenges/sidebar.vue  | 156 ++++++++++++++
 website/client/components/guilds/myGuilds.vue |  34 +--
 website/client/router.js                      |  30 ++-
 website/client/store/actions/challenges.js    |  75 +++++++
 website/client/store/actions/index.js         |   2 +
 website/common/locales/en/newClient.json      |  24 ++-
 16 files changed, 1312 insertions(+), 20 deletions(-)
 create mode 100644 website/client/assets/svg/for-css/support-habitica-gems.svg
 create mode 100644 website/client/assets/svg/member-icon.svg
 create mode 100644 website/client/components/challenges/challengeDetail.vue
 create mode 100644 website/client/components/challenges/challengeItem.vue
 create mode 100644 website/client/components/challenges/challengeModal.vue
 create mode 100644 website/client/components/challenges/closeChallengeModal.vue
 create mode 100644 website/client/components/challenges/findChallenges.vue
 create mode 100644 website/client/components/challenges/index.vue
 create mode 100644 website/client/components/challenges/myChallenges.vue
 create mode 100644 website/client/components/challenges/sidebar.vue
 create mode 100644 website/client/store/actions/challenges.js

diff --git a/website/client/assets/svg/for-css/support-habitica-gems.svg b/website/client/assets/svg/for-css/support-habitica-gems.svg
new file mode 100644
index 0000000000..bf2f8d8f28
--- /dev/null
+++ b/website/client/assets/svg/for-css/support-habitica-gems.svg
@@ -0,0 +1,115 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="319" height="86" viewBox="0 0 319 86">
+    <g fill="none" fill-rule="evenodd">
+        <path fill="#BDA8FF" d="M32.772 28.281l-5.886 1.607 4.35 4.364 4.351 4.365 1.536-5.972 1.536-5.971zM50.432 23.46l-5.886 1.608-5.887 1.606 4.35 4.365 4.351 4.364 1.536-5.97z"/>
+        <path fill="#E7E0FF" d="M50.432 23.46l-1.536 5.972-1.536 5.971 5.887-1.607 5.886-1.606-4.35-4.365z"/>
+        <path fill="#CDBEFF" d="M37.123 32.646l-1.536 5.97 5.887-1.606 5.886-1.606-4.35-4.365-4.351-4.365z"/>
+        <path fill="#C8B6FF" d="M25.35 35.859l-1.536 5.971 5.886-1.607 5.887-1.606-4.35-4.365-4.352-4.364z"/>
+        <path fill="#CDBEFF" d="M23.814 41.83l22.32 12.609-10.547-15.822z"/>
+        <path fill="#BDA8FF" d="M47.374 35.4l-1.24 19.038 13.013-22.251z"/>
+        <path fill="#E7E0FF" d="M35.587 38.617l10.547 15.822 1.226-19.036z"/>
+        <g>
+            <path fill="#CDC2FF" d="M40.85 1.097L39.314.75l.462 1.522.463 1.521 1.073-1.174 1.074-1.175z"/>
+            <path fill="#CDC2FF" d="M45.458 2.139l-1.536-.348-1.536-.347.463 1.522.462 1.522 1.074-1.175z"/>
+            <path fill="#EDE9FF" d="M45.458 2.139l-1.073 1.174-1.074 1.175 1.536.347 1.537.347-.463-1.522z"/>
+            <path fill="#D9D1FF" d="M41.312 2.619L40.24 3.793l1.536.347 1.536.348-.462-1.522-.463-1.522z"/>
+            <path fill="#D5CCFF" d="M38.24 1.924L37.167 3.1l1.536.347 1.536.347-.463-1.521L39.314.75z"/>
+            <path fill="#D9D1FF" d="M37.167 3.099l3.559 5.577-.487-4.883z"/>
+            <path fill="#CDC2FF" d="M43.315 4.488l-2.59 4.188 5.662-3.493z"/>
+            <path fill="#EDE9FF" d="M40.239 3.793l.486 4.883 2.586-4.188z"/>
+        </g>
+        <g>
+            <path fill="#9A62FF" d="M32.47 28.036l-5.994 1.638 4.443 4.493 4.442 4.493 1.551-6.13 1.552-6.132zM50.452 23.124l-5.994 1.637-5.994 1.637 4.443 4.495 4.442 4.493 1.551-6.131z"/>
+            <path fill="#DBC6FF" d="M50.452 23.124L48.9 29.255l-1.551 6.131 5.994-1.638 5.994-1.636-4.443-4.495z"/>
+            <path fill="#B389FF" d="M36.912 32.53l-1.55 6.13 5.993-1.637 5.993-1.637-4.442-4.494-4.442-4.493z"/>
+            <path fill="#AA7BFF" d="M24.925 35.804l-1.552 6.131 5.994-1.637 5.994-1.637-4.442-4.494-4.443-4.494z"/>
+            <path fill="#B389FF" d="M23.373 41.935l22.77 13.004L35.36 38.66z"/>
+            <path fill="#9A62FF" d="M47.363 35.382l-1.22 19.557L59.35 32.108z"/>
+            <path fill="#DBC6FF" d="M35.361 38.66L46.142 54.94l1.207-19.553z"/>
+        </g>
+        <g>
+            <path fill="#9A62FF" d="M67.006 79.1l-1.25-.575.104 1.416.104 1.416 1.146-.84 1.147-.841z"/>
+            <path fill="#9A62FF" d="M70.758 80.826l-1.25-.575-1.251-.575.104 1.416.104 1.415 1.146-.84z"/>
+            <path fill="#DBC6FF" d="M70.758 80.826l-1.147.84-1.146.841 1.25.575 1.25.576-.103-1.416z"/>
+            <path fill="#B389FF" d="M67.11 80.516l-1.146.841 1.25.575 1.25.575-.103-1.416-.104-1.415z"/>
+            <path fill="#AA7BFF" d="M64.609 79.366l-1.147.84 1.25.576 1.251.575-.103-1.416-.104-1.416z"/>
+            <path fill="#B389FF" d="M63.462 80.207l1.979 5.518.522-4.368z"/>
+            <path fill="#9A62FF" d="M68.468 82.509l-3.027 3.216 5.528-2.066z"/>
+            <path fill="#DBC6FF" d="M65.963 81.357l-.522 4.368 3.024-3.218z"/>
+        </g>
+        <g>
+            <path fill="#BDA8FF" d="M89.04 45.436l-3.876-2.038.147 4.42.147 4.419 3.728-2.382 3.729-2.382z"/>
+            <path fill="#BDA8FF" d="M100.666 51.548l-3.876-2.037-3.875-2.038.147 4.42.147 4.42 3.728-2.383z"/>
+            <path fill="#E7E0FF" d="M100.666 51.548l-3.729 2.382-3.728 2.382 3.876 2.037 3.875 2.038-.147-4.42z"/>
+            <path fill="#CDBEFF" d="M89.186 49.855l-3.728 2.382 3.876 2.037 3.875 2.038-.147-4.42-.147-4.419z"/>
+            <path fill="#C8B6FF" d="M81.436 45.78l-3.729 2.382 3.876 2.037 3.875 2.038-.147-4.42-.147-4.42z"/>
+            <path fill="#CDBEFF" d="M77.707 48.162l5.544 17.54 2.207-13.465z"/>
+            <path fill="#BDA8FF" d="M93.218 56.317L83.251 65.7l17.718-5.309z"/>
+            <path fill="#E7E0FF" d="M85.458 52.237L83.25 65.701l9.96-9.389z"/>
+        </g>
+        <g>
+            <path fill="#6133B4" d="M3.54 59.3L.42 60.913l3.015 2.026 3.015 2.026.104-3.637.105-3.637zM12.899 54.469l-3.12 1.61-3.12 1.611 3.015 2.027 3.014 2.026.105-3.637z"/>
+            <path fill="#C6B6E4" d="M12.899 54.469l-.106 3.637-.105 3.637 3.12-1.611 3.12-1.61-3.015-2.027z"/>
+            <path fill="#8966C7" d="M6.554 61.327l-.104 3.637 3.119-1.611 3.12-1.61-3.015-2.027-3.015-2.026z"/>
+            <path fill="#7A54C0" d="M.316 64.548L.21 68.185l3.12-1.61 3.12-1.611-3.015-2.026L.42 60.912z"/>
+            <path fill="#8966C7" d="M.21 68.185l14.217 4.727-7.978-7.948z"/>
+            <path fill="#6133B4" d="M12.696 61.739l1.73 11.173 4.509-14.394z"/>
+            <path fill="#C6B6E4" d="M6.45 64.964l7.977 7.948-1.738-11.17z"/>
+        </g>
+        <g>
+            <path fill="#CDC2FF" d="M314 60.13l-.957.627 1.006.49 1.006.49-.048-1.117-.05-1.117zM316.873 58.249l-.957.627-.958.627 1.006.49 1.007.49-.05-1.117z"/>
+            <path fill="#EDE9FF" d="M316.873 58.249l.049 1.117.049 1.117.957-.627.958-.627-1.006-.49z"/>
+            <path fill="#D9D1FF" d="M315.007 60.62l.048 1.117.958-.627.958-.627-1.007-.49-1.006-.49z"/>
+            <path fill="#D5CCFF" d="M313.091 61.874l.049 1.117.958-.627.957-.627-1.006-.49-1.007-.49z"/>
+            <path fill="#D9D1FF" d="M313.14 62.99l4.637.834-2.722-2.087z"/>
+            <path fill="#CDC2FF" d="M316.973 60.481l.804 3.343 1.111-4.597z"/>
+            <path fill="#EDE9FF" d="M315.055 61.737l2.722 2.087-.806-3.341z"/>
+            <g>
+                <path fill="#CDC2FF" d="M219.597 71.759l-1.136.247.79.905.79.904.345-1.152.346-1.152zM223.002 71.016l-1.135.247-1.135.248.79.904.79.905.345-1.152z"/>
+                <path fill="#EDE9FF" d="M223.002 71.016l-.345 1.152-.346 1.152 1.136-.248 1.135-.248-.79-.904z"/>
+                <path fill="#D9D1FF" d="M220.386 72.663l-.345 1.152 1.135-.248 1.135-.247-.79-.905-.79-.904z"/>
+                <path fill="#D5CCFF" d="M218.116 73.158l-.346 1.152 1.136-.247 1.135-.248-.79-.904-.79-.905z"/>
+                <path fill="#D9D1FF" d="M217.77 74.31l4.14 2.723-1.87-3.218z"/>
+                <path fill="#CDC2FF" d="M222.314 73.32l-.405 3.713 2.676-4.21z"/>
+                <path fill="#EDE9FF" d="M220.04 73.815l1.87 3.218.401-3.713z"/>
+            </g>
+            <g>
+                <path fill="#9A62FF" d="M236.787 31.737l-5.608 3.681 6.05 3.112 6.048 3.113-.441-6.793-.44-6.794z"/>
+                <path fill="#9A62FF" d="M253.614 20.695l-5.609 3.681-5.609 3.68 6.05 3.114 6.048 3.113-.44-6.794z"/>
+                <path fill="#DBC6FF" d="M253.614 20.695l.44 6.794.44 6.794 5.608-3.681 5.61-3.68-6.05-3.114z"/>
+                <path fill="#B389FF" d="M242.836 34.85l.44 6.793 5.61-3.68 5.608-3.68-6.05-3.114-6.048-3.112z"/>
+                <path fill="#AA7BFF" d="M231.62 42.211l.44 6.794 5.608-3.681 5.609-3.68-6.05-3.114-6.049-3.112z"/>
+                <path fill="#B389FF" d="M232.06 49.005l27.678 5.691-16.462-13.052z"/>
+                <path fill="#9A62FF" d="M254.507 34.274l5.23 20.422 5.987-27.783z"/>
+                <path fill="#DBC6FF" d="M243.277 41.643l16.46 13.053-5.243-20.414z"/>
+            </g>
+            <g>
+                <path fill="#6133B4" d="M276.012 56.987l-5.04-.954 1.671 4.94 1.67 4.938 3.37-3.985 3.369-3.985z"/>
+                <path fill="#6133B4" d="M291.131 59.85l-5.04-.954-5.039-.955 1.67 4.94 1.67 4.939 3.37-3.985z"/>
+                <path fill="#C6B6E4" d="M291.131 59.85l-3.37 3.985-3.368 3.985 5.04.954 5.039.954-1.67-4.94z"/>
+                <path fill="#8966C7" d="M277.682 61.926l-3.368 3.985 5.04.954 5.038.955-1.67-4.94-1.67-4.939z"/>
+                <path fill="#7A54C0" d="M267.603 60.018l-3.369 3.984 5.04.955 5.04.954-1.67-4.94-1.672-4.938z"/>
+                <path fill="#8966C7" d="M264.234 64.002l12.19 17.88-2.11-15.971z"/>
+                <path fill="#6133B4" d="M284.404 67.822l-7.98 14.059 18.06-12.15z"/>
+                <path fill="#C6B6E4" d="M274.314 65.911l2.11 15.97 7.969-14.061z"/>
+            </g>
+            <g>
+                <path fill="#6133B4" d="M276.468 8.001l-1.219-.23.401 1.211.4 1.211.819-.98.818-.981zM280.126 8.692l-1.22-.23-1.218-.23.4 1.211.4 1.211.819-.98z"/>
+                <path fill="#C6B6E4" d="M280.126 8.692l-.82.981-.818.981 1.22.23 1.218.231-.4-1.211z"/>
+                <path fill="#8966C7" d="M276.869 9.213l-.819.98 1.22.23 1.218.231-.4-1.211-.4-1.211z"/>
+                <path fill="#7A54C0" d="M274.431 8.752l-.819.98 1.22.231 1.218.23-.4-1.21-.4-1.212z"/>
+                <path fill="#8966C7" d="M273.612 9.733l2.937 4.38-.499-3.92z"/>
+                <path fill="#6133B4" d="M278.491 10.655l-1.942 3.458 4.38-2.997z"/>
+                <path fill="#C6B6E4" d="M276.05 10.193l.499 3.92 1.94-3.459z"/>
+            </g>
+            <g>
+                <path fill="#BDA8FF" d="M298.634 21.087l-2.861-1.025.518 3.051.517 3.05 2.343-2.025 2.344-2.025zM307.216 24.164l-2.86-1.026-2.861-1.025.517 3.05.518 3.052 2.343-2.026z"/>
+                <path fill="#E7E0FF" d="M307.216 24.164l-2.343 2.025-2.343 2.026 2.86 1.025 2.861 1.026-.517-3.052z"/>
+                <path fill="#CDBEFF" d="M299.151 24.138l-2.343 2.026 2.861 1.025 2.86 1.026-.517-3.051-.517-3.051z"/>
+                <path fill="#C8B6FF" d="M293.43 22.088l-2.344 2.025 2.861 1.025 2.861 1.026-.517-3.051-.518-3.051z"/>
+                <path fill="#CDBEFF" d="M291.086 24.113l5.47 11.612.252-9.561z"/>
+                <path fill="#BDA8FF" d="M302.536 28.217l-5.98 7.508 11.702-5.457z"/>
+                <path fill="#E7E0FF" d="M296.808 26.164l-.252 9.56 5.974-7.51z"/>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/website/client/assets/svg/member-icon.svg b/website/client/assets/svg/member-icon.svg
new file mode 100644
index 0000000000..d7975d5ca5
--- /dev/null
+++ b/website/client/assets/svg/member-icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="16" viewBox="0 0 20 16">
+    <path fill="#A5A1AC" fill-rule="evenodd" d="M14 14a5.968 5.968 0 0 0-1.537-4H14c2.206 0 4 1.794 4 4h-4zM2 14c0-2.206 1.794-4 4-4h2c2.206 0 4 1.794 4 4H2zM7 2a3 3 0 1 1 0 6 3 3 0 0 1 0-6zm4.315.519a3 3 0 1 1 0 4.962A4.94 4.94 0 0 0 12 5a4.94 4.94 0 0 0-.685-2.481zm5.193 6.036A4.983 4.983 0 0 0 18 5c0-2.757-2.243-5-5-5-1.13 0-2.162.391-3 1.026A4.948 4.948 0 0 0 7 0C4.243 0 2 2.243 2 5c0 1.39.573 2.648 1.492 3.555A5.994 5.994 0 0 0 0 14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2 5.994 5.994 0 0 0-3.492-5.445z"/>
+</svg>
diff --git a/website/client/components/appMenu.vue b/website/client/components/appMenu.vue
index 88e35a06f2..794aeee139 100644
--- a/website/client/components/appMenu.vue
+++ b/website/client/components/appMenu.vue
@@ -24,7 +24,7 @@ div
             router-link.dropdown-item(:to="{name: 'tavern'}") {{ $t('tavern') }}
             router-link.dropdown-item(:to="{name: 'myGuilds'}") {{ $t('myGuilds') }}
             router-link.dropdown-item(:to="{name: 'guildsDiscovery'}") {{ $t('guildsDiscovery') }}
-        router-link.nav-item(tag="li", :to="{name: 'challenges'}", exact)
+        router-link.nav-item(tag="li", :to="{name: 'myChallenges'}", exact)
           a.nav-link(v-once) {{ $t('challenges') }}
         router-link.nav-item.dropdown(tag="li", to="/help", :class="{'active': $route.path.startsWith('/help')}")
           a.nav-link(v-once) {{ $t('help') }}
diff --git a/website/client/components/challenges/challengeDetail.vue b/website/client/components/challenges/challengeDetail.vue
new file mode 100644
index 0000000000..589b387ec4
--- /dev/null
+++ b/website/client/components/challenges/challengeDetail.vue
@@ -0,0 +1,199 @@
+<template lang="pug">
+.row
+  challenge-modal(:challenge='challenge')
+  close-challenge-modal
+
+  .col-8.standard-page
+    .row
+      .col-8
+        h1 {{challenge.name}}
+        div
+          strong(v-once) {{$t('createdBy')}}
+          span {{challenge.author}}
+          strong.margin-left(v-once)
+            .svg-icon.calendar-icon(v-html="icons.calendarIcon")
+            | {{$t('endDate')}}
+          span {{challenge.endDate}}
+        .tags
+          span.tag(v-for='tag in challenge.tags') {{tag}}
+      .col-4
+        .box
+          .svg-icon.member-icon(v-html="icons.memberIcon")
+          | {{challenge.memberCount}}
+          .details(v-once) {{$t('participants')}}
+        .box
+          .svg-icon.gem-icon(v-html="icons.gemIcon")
+          | {{challenge.prize}}
+          .details(v-once) {{$t('prize')}}
+    .row
+      task-column.col-6(v-for="column in columns", :type="column", :key="column")
+  .col-4.sidebar.standard-page
+    .acitons
+      div(v-if='!isMember && !isLeader')
+        button.btn.btn-success(v-once) {{$t('joinChallenge')}}
+      div(v-if='isMember')
+        button.btn.btn-danger(v-once) {{$t('leaveChallenge')}}
+      div(v-if='isLeader')
+        button.btn.btn-success(v-once) {{$t('addTask')}}
+      div(v-if='isLeader')
+        button.btn.btn-secondary(v-once, @click='edit()') {{$t('editChallenge')}}
+      div(v-if='isLeader')
+        button.btn.btn-danger(v-once, @click='closeChallenge()') {{$t('endChallenge')}}
+    .description-section
+      h2(v-once) {{$t('challengeDescription')}}
+      p {{challenge.description}}
+</template>
+
+<style lang='scss' scoped>
+  @import '~client/assets/scss/colors.scss';
+
+  h1 {
+    color: $purple-200;
+  }
+
+  .margin-left {
+    margin-left: 1em;
+  }
+
+  span {
+    margin-left: .5em;
+  }
+
+  .calendar-icon {
+    width: 12px;
+    display: inline-block;
+    margin-right: .2em;
+  }
+
+  .tags {
+    margin-top: 1em;
+  }
+
+  .tag {
+    border-radius: 30px;
+    background-color: $gray-600;
+    padding: .5em;
+  }
+
+  .sidebar {
+    background-color: $gray-600;
+  }
+
+  .box {
+    display: inline-block;
+    padding: 1em;
+    border-radius: 2px;
+    background-color: $white;
+    box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
+    margin-left: 1em;
+    width: 120px;
+    height: 76px;
+    text-align: center;
+    font-size: 20px;
+    vertical-align: bottom;
+
+    .svg-icon {
+      width: 30px;
+      display: inline-block;
+      margin-right: .2em;
+      vertical-align: bottom;
+    }
+
+    .details {
+      font-size: 12px;
+      margin-top: 0.4em;
+      color: $gray-200;
+    }
+  }
+
+  .acitons {
+    width: 100%;
+
+    div, button {
+      width: 60%;
+      margin: 0 auto;
+      text-align: center;
+    }
+  }
+
+  .description-section {
+    margin-top: 2em;
+  }
+</style>
+
+<script>
+import { mapState } from 'client/libs/store';
+import closeChallengeModal from './closeChallengeModal';
+import Column from '../tasks/column';
+import challengeModal from './challengeModal';
+
+import gemIcon from 'assets/svg/gem.svg';
+import memberIcon from 'assets/svg/member-icon.svg';
+import calendarIcon from 'assets/svg/calendar.svg';
+
+export default {
+  props: ['challengeId'],
+  components: {
+    closeChallengeModal,
+    challengeModal,
+    TaskColumn: Column,
+  },
+  data () {
+    return {
+      columns: ['habit', 'daily', 'todo', 'reward'],
+      icons: Object.freeze({
+        gemIcon,
+        memberIcon,
+        calendarIcon,
+      }),
+      challenge: {
+        // _id: 1,
+        // title: 'I am the Night! (Official TAKE THIS Challenge June 2017)',
+        // memberCount: 5261,
+        // endDate: '2017-04-04',
+        // tags: ['Habitica Official', 'Tag'],
+        // prize: 10,
+        // description: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium.',
+        // counts: {
+        //   habit: 0,
+        //   dailies: 2,
+        //   todos: 2,
+        //   rewards: 0,
+        // },
+        // author: 'SabreCat',
+      },
+    };
+  },
+  computed: {
+    ...mapState({user: 'user.data'}),
+    isMember () {
+      return this.user.challenges.indexOf(this.challenge._id) !== -1;
+    },
+    isLeader () {
+      return true;
+    },
+  },
+  mounted () {
+    this.getChallenge();
+  },
+  methods: {
+    async getChallenge () {
+      this.challenge = await this.$store.dispatch('challenges:getChallenge', {challengeId: this.challengeId});
+    },
+    async joinChallenge () {
+      // this.challenge = this.$store.dispatch('challenges:joinChallenge', {challengeId: this.challengeId});
+    },
+    async leaveChallenge () {
+      // this.challenge = this.$store.dispatch('challenges:leaveChallenge', {challengeId: this.challengeId});
+    },
+    closeChallenge () {
+      this.$root.$emit('show::modal', 'close-challenge-modal');
+    },
+    edit () {
+      // @TODO: set working challenge
+      this.$root.$emit('show::modal', 'challenge-modal');
+    },
+    // @TODO: view members
+  },
+};
+</script>
diff --git a/website/client/components/challenges/challengeItem.vue b/website/client/components/challenges/challengeItem.vue
new file mode 100644
index 0000000000..04c9bfb8b9
--- /dev/null
+++ b/website/client/components/challenges/challengeItem.vue
@@ -0,0 +1,178 @@
+<template lang="pug">
+.card
+  router-link(:to="{ name: 'challenge', params: { challengeId: challenge._id } }")
+    h3 {{challenge.name}}
+  .row
+    .col-6
+      div.details
+        span
+          .svg-icon.member-icon(v-html="icons.memberIcon")
+        span {{challenge.memberCount}}
+        span
+          .svg-icon.calendar-icon(v-html="icons.calendarIcon")
+        span
+          strong End Date:
+        span {{challenge.endDate}}
+      div.tags
+        span.tag(v-for='tag in challenge.tags') {{tag}}
+    .col-6.prize-section
+      div
+        span.svg-icon.gem(v-html="icons.gemIcon")
+        span.prize {{challenge.prize}}
+      div Challenge Prize
+  .row.description
+    .col-12
+      | {{challenge.description}}
+  .container.well-wrapper(v-if='challenge.counts')
+    .well.row
+      .col-3
+        .count-details
+          .svg-icon.habit-icon(v-html="icons.habitIcon")
+          span.count {{challenge.counts.habit}}
+        div {{$t('habit')}}
+      .col-3
+        .count-details
+          .svg-icon.daily-icon(v-html="icons.dailyIcon")
+          span.count {{challenge.counts.dailies}}
+        div {{$t('daily')}}
+      .col-3
+        .count-details
+          .svg-icon.todo-icon(v-html="icons.todoIcon")
+          span.count {{challenge.counts.todos}}
+        div {{$t('todo')}}
+      .col-3
+        .count-details
+          .svg-icon.reward-icon(v-html="icons.rewardIcon")
+          span.count {{challenge.counts.rewards}}
+        div {{$t('reward')}}
+</template>
+
+<style lang='scss' scoped>
+  @import '~client/assets/scss/colors.scss';
+
+  .card {
+    background-color: $white;
+    box-shadow: 0 2px 2px 0 $gray-600, 0 1px 4px 0 $gray-600;
+    padding: 1em;
+    height: 372px;
+
+    .gem {
+      width: 32px;
+    }
+
+    .member-icon {
+      width: 20px;
+    }
+
+    .calendar-icon {
+      width: 14px;
+    }
+
+    span {
+      display: inline-block;
+      font-size: 14px;
+      color: $gray-200;
+      margin-right: 1em;
+      vertical-align: bottom;
+    }
+
+    .details {
+      margin: 1em 0;
+    }
+
+    .tags {
+      margin-bottom: 1em;
+    }
+
+    .tag {
+      border-radius: 30px;
+      background-color: $gray-600;
+      padding: .5em;
+    }
+
+    .prize {
+      color: $gray-100;
+      font-size: 24px;
+    }
+
+    .prize-section {
+      text-align: right;
+      padding-right: 2em;
+      padding-top: 1em;
+    }
+
+    .description {
+      color: $gray-200;
+      margin-top: 2em;
+      margin-bottom: 2em;
+    }
+
+    .well-wrapper {
+      padding: .8em;
+    }
+
+    .well {
+      background-color: $gray-700;
+      text-align: center;
+      padding: 2em;
+      border-radius: 4px;
+
+      .svg-icon {
+        display: inline-block;
+        margin-left: .5em;
+      }
+
+      .habit-icon {
+        width: 30px;
+      }
+
+      .todo-icon {
+        width: 20px;
+      }
+
+      .daily-icon {
+        width: 24px;
+      }
+
+      .reward-icon {
+        width: 26px;
+      }
+
+      .count-details {
+        padding-left: 1em;
+      }
+
+      .count {
+        font-size: 20px;
+        margin-left: .5em;
+      }
+    }
+  }
+</style>
+
+<script>
+import gemIcon from 'assets/svg/gem.svg';
+import memberIcon from 'assets/svg/member-icon.svg';
+import calendarIcon from 'assets/svg/calendar.svg';
+import habitIcon from 'assets/svg/habit.svg';
+import todoIcon from 'assets/svg/todo.svg';
+import dailyIcon from 'assets/svg/daily.svg';
+import rewardIcon from 'assets/svg/reward.svg';
+
+export default {
+  props: ['challenge'],
+  data () {
+    return {
+      icons: Object.freeze({
+        gemIcon,
+        memberIcon,
+        calendarIcon,
+        habitIcon,
+        todoIcon,
+        dailyIcon,
+        rewardIcon,
+      }),
+    };
+  },
+};
+</script>
diff --git a/website/client/components/challenges/challengeModal.vue b/website/client/components/challenges/challengeModal.vue
new file mode 100644
index 0000000000..1cfdb9e28b
--- /dev/null
+++ b/website/client/components/challenges/challengeModal.vue
@@ -0,0 +1,160 @@
+<template lang="pug">
+div
+  b-modal#challenge-modal(:title="$t('createChallenge')", size='lg')
+    form(@submit.stop.prevent="submit")
+      .form-group
+        label
+          strong(v-once) {{$t('name')}}*
+        b-form-input(type="text", :placeholder="$t('challengeNamePlaceHolder')", v-model="workingChallenge.name")
+      .form-group
+        label
+          strong(v-once) {{$t('description')}}*
+        div.description-count.float-right {{charactersRemaining}} {{ $t('charactersRemaining') }}
+        b-form-input.description-textarea(type="text", textarea, :placeholder="$t('challengeDescriptionPlaceHolder')", v-model="workingChallenge.description")
+      .form-group
+        label
+          strong(v-once) {{$t('guildInformation')}}*
+        a.float-right {{ $t('markdownFormattingHelp') }}
+        b-form-input.information-textarea(type="text", textarea, :placeholder="$t('challengeInformationPlaceHolder')", v-model="workingChallenge.information")
+      .form-group(v-if='creating')
+        label
+          strong(v-once) {{$t('where')}}
+        b-dropdown(:text="$t('sort')", right=true)
+          b-dropdown-item(@click='sort(option.value)')
+      .form-group
+        label
+          strong(v-once) {{$t('categories')}}*
+        b-dropdown(:text="$t('sort')", right=true)
+          b-dropdown-item(@click='sort(option.value)')
+            | Member
+      .form-group
+        label
+          strong(v-once) {{$t('endDate')}}
+        b-form-input.end-date-input
+      .form-group
+        label
+          strong(v-once) {{$t('prize')}}
+        b-dropdown(:text="$t('sort')", right=true)
+          b-dropdown-item(@click='sort(option.value)')
+            | Member
+      .row.footer-wrap
+        .col-12.text-center.submit-button-wrapper
+          button.btn.btn-primary(v-once) {{$t('createChallenge')}}
+        .col-12.text-center
+          p(v-once) {{$t('challengeMinimum')}}
+</template>
+
+<style lang='scss'>
+  @import '~client/assets/scss/colors.scss';
+
+  #challenge-modal {
+    h5 {
+      color: $purple-200;
+      margin-bottom: 1.5em;
+    }
+
+    .modal-header {
+      border: none;
+    }
+
+    .modal-footer {
+      display: none;
+    }
+
+    .description-textarea {
+      height: 90px;
+    }
+
+    .information-textarea {
+      height: 220px;
+    }
+
+    label {
+      width: 130px;
+      margin-right: .5em;
+    }
+
+    .end-date-input {
+      width: 150px;
+      display: inline-block;
+    }
+
+    .form-group {
+      margin-bottom: 2em;
+    }
+
+    .submit-button-wrapper {
+      margin-bottom: .5em;
+    }
+
+    .footer-wrap {
+      margin-top: 2em;
+      margin-bottom: 2em;
+    }
+  }
+</style>
+
+<script>
+import bModal from 'bootstrap-vue/lib/components/modal';
+import bDropdown from 'bootstrap-vue/lib/components/dropdown';
+import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
+import bFormInput from 'bootstrap-vue/lib/components/form-input';
+
+export default {
+  props: ['challenge'],
+  components: {
+    bModal,
+    bDropdown,
+    bDropdownItem,
+    bFormInput,
+  },
+  data () {
+    return {
+      creating: true,
+      charactersRemaining: 250,
+      workingChallenge: {
+        name: '',
+        description: '',
+        information: '',
+      },
+    };
+  },
+  mounted () {
+    if (this.challenge) {
+      this.workingChallenge = this.challenge;
+      this.creating = false;
+    }
+  },
+  computed: {
+    maxPrize () {
+      // var groupBalance = 0;
+      // var group = _.find($scope.groups, { _id: gid });
+      //
+      // if (group && group.balance && group.leader === User.user._id) {
+      //   groupBalance = group.balance * 4;
+      // }
+      //
+      // return groupBalance;
+      // return userBalance + availableGroupBalance;
+    },
+    insufficientGemsForTavernChallenge () {
+      // var balance = User.user.balance || 0;
+      // var isForTavern = $scope.newChallenge.group == TAVERN_ID;
+      //
+      // if (isForTavern) {
+      //   return balance <= 0;
+      // } else {
+      //   return false;
+      // }
+    },
+  },
+  methods: {
+    createChallenge () {
+      // this.$store.dispatch('challenges:createChallenge', {challenge: this.workingChallenge});
+    },
+    updateChallenge () {
+      // this.$store.dispatch('challenges:updateChallenge', {challenge: this.workingChallenge});
+    },
+  },
+};
+</script>
diff --git a/website/client/components/challenges/closeChallengeModal.vue b/website/client/components/challenges/closeChallengeModal.vue
new file mode 100644
index 0000000000..b53e6ec3e1
--- /dev/null
+++ b/website/client/components/challenges/closeChallengeModal.vue
@@ -0,0 +1,104 @@
+<template lang="pug">
+div
+  b-modal#close-challenge-modal(:title="$t('createGuild')", size='md')
+    .header-wrap(slot="modal-header")
+      h2.text-center(v-once) {{$t('endChallenge')}}
+    .row.text-center
+      .col-12
+        .support-habitica
+          // @TODO: Add challenge achievement badge here
+      .col-12
+        strong(v-once) {{$t('selectChallengeWinnersDescription')}}
+      .col-12
+        b-dropdown(:text="$t('sort')", right=true)
+          b-dropdown-item(@click='sort(option.value)')
+            | Member
+      .col-12
+        button.btn.btn-primary(v-once) {{$t('awardWinners')}}
+      .col-12
+        hr
+        .or {{$t('or')}}
+      .col-12
+        strong(v-once) {{$t('doYouWantedToDeleteChallenge')}}
+      .col-12
+        button.btn.btn-danger(v-once) {{$t('deleteChallenge')}}
+    .footer-wrap(slot="modal-footer")
+</template>
+
+<style lang='scss'>
+  @import '~client/assets/scss/colors.scss';
+
+  #close-challenge-modal {
+    h2 {
+      color: $purple-200
+    }
+
+    #close-challenge-modal_modal_body {
+      padding-bottom: 2em;
+    }
+
+    .header-wrap {
+      width: 100%;
+      padding-top: 2em;
+    }
+
+    .support-habitica {
+      background-image: url('~client/assets/svg/for-css/support-habitica-gems.svg');
+      width: 325px;
+      height: 89px;
+      margin: 0 auto;
+    }
+
+    .modal-footer, .modal-header {
+      border: none !important;
+    }
+
+    .footer-wrap {
+      display: none;
+    }
+
+    .col-12 {
+      margin-top: 2em;
+    }
+
+    .or {
+      margin-top: -2em;
+      background: $white;
+      width: 40px;
+      margin-right: auto;
+      margin-left: auto;
+      font-weight: bold;
+    }
+  }
+</style>
+
+<script>
+import bModal from 'bootstrap-vue/lib/components/modal';
+import bDropdown from 'bootstrap-vue/lib/components/dropdown';
+import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
+
+export default {
+  props: ['challenge'],
+  components: {
+    bModal,
+    bDropdown,
+    bDropdownItem,
+  },
+
+  data () {
+    return {
+    };
+  },
+  methods: {
+    closeChallenge () {
+      // this.challenge = this.$store.dispatch('challenges:selectChallengeWinner', {
+      //   challengeId: this.challengeId,
+      //   winnerId: this.winnerId,
+      // });
+    },
+    deleteChallenge () {
+      // this.challenge = this.$store.dispatch('challenges:deleteChallenge', {challengeId: this.challengeId});
+    },
+  },
+};
+</script>
diff --git a/website/client/components/challenges/findChallenges.vue b/website/client/components/challenges/findChallenges.vue
new file mode 100644
index 0000000000..64e13479fe
--- /dev/null
+++ b/website/client/components/challenges/findChallenges.vue
@@ -0,0 +1,89 @@
+<template lang="pug">
+.row
+  challenge-modal
+  sidebar(v-on:search="updateSearch", v-on:filter="updateFilters")
+
+  .col-10.standard-page
+    .row.header-row
+      .col-md-8.text-left
+        h1(v-once) {{$t('findChallenges')}}
+      .col-md-4
+        span.dropdown-label {{ $t('sortBy') }}
+        b-dropdown(:text="$t('sort')", right=true)
+          b-dropdown-item(v-for='sortOption in sortOptions', :key="sortOption.value", @click='sort(sortOption.value)') {{sortOption.text}}
+        button.btn.btn-secondary.create-challenge-button
+          .svg-icon.positive-icon(v-html="icons.positiveIcon")
+          span(v-once, @click='createChallenge()') {{$t('createChallenge')}}
+    .row
+      .col-6(v-for='challenge in challenges')
+        challenge-item(:challenge='challenge')
+</template>
+
+<style lang='scss' scoped>
+  @import '~client/assets/scss/colors.scss';
+
+  .header-row {
+    h1 {
+      color: $purple-200;
+    }
+
+    .create-challenge-button {
+      margin-left: 1em;
+    }
+
+    .positive-icon {
+      color: $green-10;
+      width: 10px;
+      display: inline-block;
+      margin-right: .5em;
+    }
+  }
+</style>
+
+<script>
+import bDropdown from 'bootstrap-vue/lib/components/dropdown';
+import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
+import Sidebar from './sidebar';
+import ChallengeItem from './challengeItem';
+import challengeModal from './challengeModal';
+
+import positiveIcon from 'assets/svg/positive.svg';
+
+export default {
+  components: {
+    Sidebar,
+    ChallengeItem,
+    challengeModal,
+    bDropdown,
+    bDropdownItem,
+  },
+  data () {
+    return {
+      icons: Object.freeze({
+        positiveIcon,
+      }),
+      challenges: [],
+      sortOptions: [],
+    };
+  },
+  mounted () {
+    this.loadchallanges();
+
+    // @TODO: do we need to load groups for filters still?
+  },
+  methods: {
+    updateSearch () {
+
+    },
+    updateFilters () {
+
+    },
+    createChallenge () {
+      this.$root.$emit('show::modal', 'challenge-modal');
+    },
+    async loadchallanges () {
+      this.challenges = await this.$store.dispatch('challenges:getUserChallenges');
+    },
+  },
+};
+</script>
diff --git a/website/client/components/challenges/index.vue b/website/client/components/challenges/index.vue
new file mode 100644
index 0000000000..8a2588ca1b
--- /dev/null
+++ b/website/client/components/challenges/index.vue
@@ -0,0 +1,19 @@
+<template lang="pug">
+.row
+  secondary-menu.col-12
+    router-link.nav-link(:to="{name: 'myChallenges'}", :class="{'active': $route.name === 'myChallenges'}") {{ $t('myChallenges') }}
+    router-link.nav-link(:to="{name: 'findChallenges'}", :class="{'active': $route.name === 'findChallenges'}") {{ $t('findChallenges') }}
+
+  .col-12
+    router-view
+</template>
+
+<script>
+import SecondaryMenu from 'client/components/secondaryMenu';
+
+export default {
+  components: {
+    SecondaryMenu,
+  },
+};
+</script>
diff --git a/website/client/components/challenges/myChallenges.vue b/website/client/components/challenges/myChallenges.vue
new file mode 100644
index 0000000000..7ab1862c0e
--- /dev/null
+++ b/website/client/components/challenges/myChallenges.vue
@@ -0,0 +1,142 @@
+<template lang="pug">
+.row
+  challenge-modal
+  sidebar(v-on:search="updateSearch", v-on:filter="updateFilters")
+
+  .col-10.standard-page
+    .row.header-row
+      .col-md-8.text-left
+        h1(v-once) {{$t('myChallenges')}}
+      .col-md-4
+        span.dropdown-label {{ $t('sortBy') }}
+        b-dropdown(:text="$t('sort')", right=true)
+          b-dropdown-item(v-for='sortOption in sortOptions', :key="sortOption.value", @click='sort(sortOption.value)') {{sortOption.text}}
+        button.btn.btn-secondary.create-challenge-button
+          .svg-icon.positive-icon(v-html="icons.positiveIcon")
+          span(v-once, @click='createChallenge()') {{$t('createChallenge')}}
+
+    .row
+      .no-challenges.text-center.col-md-6.offset-3(v-if='challenges.length === 0')
+        .svg-icon(v-html="icons.challengeIcon")
+        h2(v-once) {{$t('noChallengeTitle')}}
+        p(v-once) {{$t('challengeDescription1')}}
+        p(v-once) {{$t('challengeDescription2')}}
+
+    .row
+      .col-6(v-for='challenge in challenges')
+        challenge-item(:challenge='challenge')
+</template>
+
+<style lang='scss' scoped>
+  @import '~client/assets/scss/colors.scss';
+
+  .header-row {
+    h1 {
+      color: $purple-200;
+    }
+
+    .create-challenge-button {
+      margin-left: 1em;
+    }
+
+    .positive-icon {
+      color: $green-10;
+      width: 10px;
+      display: inline-block;
+      margin-right: .5em;
+    }
+  }
+
+  .no-challenges {
+    color: $gray-300;
+    margin-top: 10em;
+
+    h2 {
+      color: $gray-300;
+    }
+
+    .svg-icon {
+      width: 88.7px;
+      margin: 1em auto;
+    }
+  }
+</style>
+
+<script>
+import bDropdown from 'bootstrap-vue/lib/components/dropdown';
+import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
+import Sidebar from './sidebar';
+import ChallengeItem from './challengeItem';
+import challengeModal from './challengeModal';
+
+import challengeIcon from 'assets/svg/challenge.svg';
+import positiveIcon from 'assets/svg/positive.svg';
+
+export default {
+  components: {
+    Sidebar,
+    ChallengeItem,
+    challengeModal,
+    bDropdown,
+    bDropdownItem,
+  },
+  data () {
+    return {
+      icons: Object.freeze({
+        challengeIcon,
+        positiveIcon,
+      }),
+      challenges: [
+        // {
+        //   _id: 1,
+        //   title: 'I am the Night! (Official TAKE THIS Challenge June 2017)',
+        //   memberCount: 5261,
+        //   endDate: '2017-04-04',
+        //   tags: ['Habitica Official', 'Tag'],
+        //   prize: 10,
+        //   description: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium.',
+        //   counts: {
+        //     habit: 0,
+        //     dailies: 2,
+        //     todos: 2,
+        //     rewards: 0,
+        //   },
+        // },
+        // {
+        //   _id: 2,
+        //   title: '30-Day Money Cleanse 💰',
+        //   memberCount: 112,
+        //   endDate: '2017-04-05',
+        //   tags: ['Owned', 'Tag'],
+        //   prize: 10,
+        //   description: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.',
+        //   counts: {
+        //     habit: 0,
+        //     dailies: 2,
+        //     todos: 30,
+        //     rewards: 0,
+        //   },
+        // },
+      ],
+      sortOptions: [],
+    };
+  },
+  mounted () {
+    this.loadchallanges();
+  },
+  methods: {
+    updateSearch () {
+
+    },
+    updateFilters () {
+
+    },
+    createChallenge () {
+      this.$root.$emit('show::modal', 'challenge-modal');
+    },
+    async loadchallanges () {
+      this.challenges = await this.$store.dispatch('challenges:getUserChallenges');
+    },
+  },
+};
+</script>
diff --git a/website/client/components/challenges/sidebar.vue b/website/client/components/challenges/sidebar.vue
new file mode 100644
index 0000000000..496251d24f
--- /dev/null
+++ b/website/client/components/challenges/sidebar.vue
@@ -0,0 +1,156 @@
+<template lang="pug">
+.col-2.standard-sidebar
+  .form-group
+    input.form-control.search(type="text", :placeholder="$t('search')", v-model='searchTerm')
+
+  form
+    h3(v-once) {{ $t('filter') }}
+    .form-group
+      h5 Category
+      .form-check(
+        v-for="group in categoryOptions",
+        :key="group.key",
+      )
+        label.custom-control.custom-checkbox
+          input.custom-control-input(type="checkbox", :value='group.key' v-model="categoryFilters")
+          span.custom-control-indicator
+          span.custom-control-description(v-once) {{ $t(group.label) }}
+    .form-group
+      h5 Membership
+      .form-check(
+        v-for="group in roleOptions",
+        :key="group.key",
+      )
+        label.custom-control.custom-checkbox
+          input.custom-control-input(type="checkbox", :value='group.key' v-model="roleFilters")
+          span.custom-control-indicator
+          span.custom-control-description(v-once) {{ $t(group.label) }}
+    .form-group
+      h5 Guild Size
+      .form-check(
+        v-for="group in guildSizeOptions",
+        :key="group.key",
+      )
+        label.custom-control.custom-checkbox
+          input.custom-control-input(type="checkbox", :value='group.key' v-model="guildSizeFilters")
+          span.custom-control-indicator
+          span.custom-control-description(v-once) {{ $t(group.label) }}
+</template>
+
+<script>
+import throttle from 'lodash/throttle';
+
+export default {
+  data () {
+    return {
+      categoryFilters: [],
+      categoryOptions: [
+        {
+          label: 'habiticaOfficial',
+          key: 'official',
+        },
+        {
+          label: 'animals',
+          key: 'animals',
+        },
+        {
+          label: 'artDesign',
+          key: 'art_design',
+        },
+        {
+          label: 'booksWriting',
+          key: 'books_writing',
+        },
+        {
+          label: 'comicsHobbies',
+          key: 'comics_hobbies',
+        },
+        {
+          label: 'diyCrafts',
+          key: 'diy_crafts',
+        },
+        {
+          label: 'education',
+          key: 'education',
+        },
+        {
+          label: 'foodCooking',
+          key: 'food_cooking',
+        },
+        {
+          label: 'healthFitness',
+          key: 'health_fitness',
+        },
+        {
+          label: 'music',
+          key: 'music',
+        },
+        {
+          label: 'relationship',
+          key: 'relationship',
+        },
+        {
+          label: 'scienceTech',
+          key: 'science_tech ',
+        },
+      ],
+      roleFilters: [],
+      roleOptions: [
+        {
+          label: 'participating',
+          key: 'participating',
+        },
+        {
+          label: 'not_participating',
+          key: 'not_participating',
+        },
+        {
+          label: 'either',
+          key: 'either',
+        },
+      ],
+      guildSizeFilters: [],
+      guildSizeOptions: [
+        {
+          label: 'owned',
+          key: 'owned',
+        },
+        {
+          label: 'not_owned',
+          key: 'not_owned',
+        },
+        {
+          label: 'either',
+          key: 'either',
+        },
+      ],
+      searchTerm: '',
+    };
+  },
+  watch: {
+    categoryFilters: function categoryFilters () {
+      this.emitFilters();
+    },
+    roleFilters: function roleFilters () {
+      this.emitFilters();
+    },
+    guildSizeFilters: function guildSizeFilters () {
+      this.emitFilters();
+    },
+    searchTerm: throttle(function searchTerm (newSearch) {
+      this.$emit('search', {
+        searchTerm: newSearch,
+      });
+    }, 250),
+  },
+  methods: {
+    emitFilters () {
+      this.$emit('filter', {
+        categories: this.categoryFilters,
+        roles: this.roleFilters,
+        guildSize: this.guildSizeFilters,
+      });
+    },
+  },
+};
+</script>
diff --git a/website/client/components/guilds/myGuilds.vue b/website/client/components/guilds/myGuilds.vue
index 13a834b53e..94ca7da8f8 100644
--- a/website/client/components/guilds/myGuilds.vue
+++ b/website/client/components/guilds/myGuilds.vue
@@ -24,26 +24,26 @@
 </template>
 
 <style lang="scss" scoped>
-@import '~client/assets/scss/colors.scss';
-.sort-select {
-  margin: 2em;
-}
-
-.no-guilds {
-  text-align: center;
-  color: $gray-200;
-  margin-top: 15em;
-
-  p {
-    font-size: 14px;
-    line-height: 1.43;
+  @import '~client/assets/scss/colors.scss';
+  .sort-select {
+    margin: 2em;
   }
 
-  .no-guilds-wrapper {
-    width: 400px;
-    margin: 0 auto;
+  .no-guilds {
+    text-align: center;
+    color: $gray-200;
+    margin-top: 15em;
+
+    p {
+      font-size: 14px;
+      line-height: 1.43;
+    }
+
+    .no-guilds-wrapper {
+      width: 400px;
+      margin: 0 auto;
+    }
   }
-}
 </style>
 
 <script>
diff --git a/website/client/router.js b/website/client/router.js
index 9d391864b5..7935efcd7a 100644
--- a/website/client/router.js
+++ b/website/client/router.js
@@ -72,6 +72,12 @@ const MyGuilds = () => import(/* webpackChunkName: "guilds" */ './components/gui
 const GuildsDiscoveryPage = () => import(/* webpackChunkName: "guilds" */ './components/guilds/discovery');
 const GuildPage = () => import(/* webpackChunkName: "guilds" */ './components/guilds/guild');
 
+// Challenges
+const ChallengeIndex = () => import(/* webpackChunkName: "challenges" */ './components/challenges/index');
+const MyChallenges = () => import(/* webpackChunkName: "challenges" */ './components/challenges/myChallenges');
+const FindChallenges = () => import(/* webpackChunkName: "challenges" */ './components/challenges/findChallenges');
+const ChallengeDetail = () => import(/* webpackChunkName: "challenges" */ './components/challenges/challengeDetail');
+
 Vue.use(VueRouter);
 
 const router = new VueRouter({
@@ -124,7 +130,29 @@ const router = new VueRouter({
         },
       ],
     },
-    { name: 'challenges', path: 'challenges', component: Page },
+    {
+      name: 'challenges',
+      path: '/challenges',
+      component: ChallengeIndex,
+      children: [
+        {
+          name: 'myChallenges',
+          path: 'myChallenges',
+          component: MyChallenges,
+        },
+        {
+          name: 'findChallenges',
+          path: 'findChallenges',
+          component: FindChallenges,
+        },
+        {
+          name: 'challenge',
+          path: 'challenges/:challengeId',
+          component: ChallengeDetail,
+          props: true,
+        },
+      ],
+    },
     {
       path: '/user',
       component: ParentPage,
diff --git a/website/client/store/actions/challenges.js b/website/client/store/actions/challenges.js
new file mode 100644
index 0000000000..4b148788fa
--- /dev/null
+++ b/website/client/store/actions/challenges.js
@@ -0,0 +1,75 @@
+import axios from 'axios';
+import omit from 'lodash/omit';
+
+export async function createChallenge (store, payload) {
+  let response = await axios.post('/api/v3/challenges', {
+    data: payload.challenge,
+  });
+
+  return response.data.data;
+}
+
+export async function joinChallenge (store, payload) {
+  let response = await axios.post(`/api/v3/challenges/${payload.challengeId}/join`);
+
+  return response.data.data;
+}
+
+export async function leaveChallenge (store, payload) {
+  let response = await axios.post(`/api/v3/challenges/${payload.challengeId}/join`, {
+    data: {
+      keep: payload.keep,
+    },
+  });
+
+  return response.data.data;
+}
+
+export async function getUserChallenges () {
+  let response = await axios.get('/api/v3/challenges/user');
+
+  return response.data.data;
+}
+
+export async function getGroupChallenges (store, payload) {
+  let response = await axios.get(`/api/v3/challenges/groups/${payload.groupId}`);
+
+  return response.data.data;
+}
+
+export async function getChallenge (store, payload) {
+  let response = await axios.get(`/api/v3/challenges/${payload.challengeId}`);
+
+  return response.data.data;
+}
+
+export async function exportChallengeCsv (store, payload) {
+  let response = await axios.get(`/api/v3/challenges/challenges/${payload.challengeId}/export/csv`);
+
+  return response.data.data;
+}
+
+
+export async function updateChallenge (store, payload) {
+  let challengeDataToSend = omit(payload.challenge, ['tasks', 'habits', 'todos', 'rewards', 'group']);
+
+  if (challengeDataToSend.leader && challengeDataToSend.leader._id) challengeDataToSend.leader = challengeDataToSend.leader._id;
+
+  let response = await axios.post(`/api/v3/challenges/${payload.challenge._id}`, {
+    data: challengeDataToSend,
+  });
+
+  return response.data.data;
+}
+
+export async function deleteChallenge (store, payload) {
+  let response = await axios.delete(`/api/v3/challenges/challenges/${payload.challengeId}`);
+
+  return response.data.data;
+}
+
+export async function selectChallengeWinner (store, payload) {
+  let response = await axios.post(`/api/v3/challenges/challenges/${payload.challengeId}/selectWinner/${payload.winnerId}`);
+
+  return response.data.data;
+}
diff --git a/website/client/store/actions/index.js b/website/client/store/actions/index.js
index b47a7540e6..2f0abc303a 100644
--- a/website/client/store/actions/index.js
+++ b/website/client/store/actions/index.js
@@ -8,6 +8,7 @@ import * as party from './party';
 import * as members from './members';
 import * as auth from './auth';
 import * as quests from './quests';
+import * as challenges from './challenges';
 
 // Actions should be named as 'actionName' and can be accessed as 'namespace:actionName'
 // Example: fetch in user.js -> 'user:fetch'
@@ -21,6 +22,7 @@ const actions = flattenAndNamespace({
   members,
   auth,
   quests,
+  challenges,
 });
 
 export default actions;
diff --git a/website/common/locales/en/newClient.json b/website/common/locales/en/newClient.json
index b91c21f781..3dc6c4fcd9 100644
--- a/website/common/locales/en/newClient.json
+++ b/website/common/locales/en/newClient.json
@@ -186,5 +186,27 @@
   "emptyMessagesLine1": "You don’t have any messages",
   "emptyMessagesLine2": "Send a message to start a conversation!",
   "contributing": "Contributing",
-  "askAQuestion": "Ask a Question"
+  "askAQuestion": "Ask a Question",
+  "myChallenges": "My Challenges",
+  "findChallenges": "Find Challenges",
+  "noChallengeTitle": "You don’t have any Challenges.",
+  "challengeDescription1": "Challenges are community events in which players compete and earn prizes by completing a group of related tasks.",
+  "challengeDescription2": "Find recommended Challenges based on your interests, browse Habitica’s public Challenges, or create your own Challenges.",
+  "createdBy": "Created By:",
+  "endDate": "End Date:",
+  "joinChallenge": "Join Challenge",
+  "leaveChallenge": "Leave Challenge",
+  "addTask": "Add Task",
+  "editChallenge": "Edit Challenge",
+  "challengeDescription": "Challenge Description",
+  "selectChallengeWinnersDescription": "Select winners from the Challenge participants",
+  "awardWinners": "Award Winners",
+  "doYouWantedToDeleteChallenge": "Do you want to delete this Callenge?",
+  "deleteChallenge": "Delete Challenge",
+  "challengeNamePlaceHolder": "What is your Challenge name?",
+  "challengeDescriptionPlaceHolder": "Write a short description advertising your Challenge to other Habiticans. What is the main purpose of your Challenge and why should people join it? Try to include useful keywords in the description so that Habiticans can easily find it when they search!",
+  "markdownFormattingHelp": "Markdown formatting help",
+  "challengeInformationPlaceHolder": "Write a short description advertising your Challenge to other Habiticans. What is the main purpose of your Challenge and why should people join it? Try to include useful keywords in the description so that Habiticans can easily find it when they search!",
+  "where": "Where*",
+  "challengeMinimum": "Minimum 1 Gem for public Challenges (helps prevent spam, it really does)."
 }