Project init with nuxt and vuetifyjs

.dockerignore

@@ -0,0 +1,8 @@
+.git
+node_modules
+dist
+packages/*/node_modules
+packages/*/dist
+packages/*/*.tgz
+Dockerfile*
+**/*.sw?

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintrc.js

@@ -0,0 +1,28 @@
+module.exports = {
+  root: true,
+  parser: 'babel-eslint',
+  env: {
+    browser: true,
+    node: true,
+  },
+  extends: 'airbnb-base',
+  // required to lint *.vue files
+  plugins: [
+    'html',
+  ],
+  // add your custom rules here
+  rules: {
+    // don't require .vue extension when importing
+    'import/extensions': ['error', 'always', {
+      js: 'never',
+      vue: 'never'
+    }],
+  },
+  globals: {},
+  settings: {
+    'import/resolver': {
+      webpack: 'webpack.config.js',
+    },
+  },
+};
+

.gitignore

@@ -0,0 +1,14 @@
+# dependencies
+node_modules
+
+# logs
+npm-debug.log
+
+# Nuxt build
+.nuxt
+
+# Nuxt generate
+dist
+
+# Backpack build
+build

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "bracketSpacing": true,
+  "arrowParens": "always",
+}

.sequelizerc

@@ -0,0 +1,8 @@
+const path = require('path');
+
+module.exports = {
+  'config': path.resolve('config', 'database.js'),
+  'models-path': path.resolve('server', 'models'),
+  'seeders-path': path.resolve('server', 'seeders'),
+  'migrations-path': 'migrations'
+}

Dockerfile

@@ -0,0 +1,11 @@
+FROM node:10
+
+WORKDIR /usr/src/app
+
+COPY package.json package-lock.json /usr/src/app/
+
+RUN npm install
+
+COPY . /usr/src/app
+
+CMD ["npm", "run", "dev"]

Dockerfile.production

@@ -0,0 +1,11 @@
+FROM node:10
+
+COPY . /usr/src/app
+
+WORKDIR /usr/src/app
+
+# TODO: make it multi-build and only run npm install production
+RUN npm install
+RUN npm run build
+
+CMD ["npm", "start"]

README.md

@@ -0,0 +1,47 @@
+# puttyimages
+
+Puttyimegs is an open stock image DApp that live within the
+[LikeCoin](https://like.co/) ecosystem.
+
+## Development Setup
+
+The suggested way of development environment is docker based. This guide will
+assume you have Docker Community Edition 18+ installed. Please download at 
+[https://store.docker.com](https://store.docker.com) and follow the
+installation instruction.
+
+After you setup docker, fun the following command to setup the docker image
+and basic DB schema. Also kick start the docker container for development.
+
+``` bash
+# Build the docker images, run it for the first time or you have dependency
+# updates
+$ docker-compose build
+
+# Run the DB migration and reseed the DB for the first time run or after you
+# pull an update.
+$ docker-compose run nuxt npm run sequelize db:migrate
+$ docker-compose run nuxt npm run sequelize db:seed:all
+
+# Kick of the development setup
+$ docker-compose up
+```
+
+Local files are mount into docker you can modify file in your fs and will
+hot reload.
+
+## Production
+
+``` bash
+$ docker-compose -f docker-compose.production.yml build
+$ docker-compose -f docker-compose.production.yml up
+```
+
+For detailed explanation on how things work, checkout the [Nuxt.js
+docs](https://github.com/nuxt/nuxt.js).
+
+## Backpack
+
+We use [backpack](https://github.com/palmerhq/backpack) to watch and build the
+application, so you can use the latest ES6 features (module syntax,
+async/await, etc.).

assets/css/main.scss

@@ -0,0 +1,30 @@
+@import 'node_modules/vuetify/dist/vuetify.min.css';
+
+html, body
+{
+  background-color: #fff;
+  color: #000;
+  letter-spacing: 0.5px;
+  font-family: "Source Sans Pro", Arial, sans-serif;
+  height: 100vh;
+  margin: 0;
+}
+
+footer
+{
+  padding: 20px;
+  text-align: center;
+  border-top: 1px solid #ddd;
+}
+
+a, a:hover, a:focus, a:visited
+{
+  color: #000;
+}
+
+.logo {
+  width: 100%;
+  height: auto;
+  max-width: 400px;
+  max-height: 289px;
+}

backpack.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  webpack: (config, options, webpack) => { // eslint-disable-line no-unused-vars
+    config.entry.main = './server/index.js'; // eslint-disable-line no-param-reassign
+    return config;
+  },
+};

components/Footer.vue

@@ -0,0 +1,5 @@
+<template>
+  <footer>
+    Visit our website for more documentation : <a href="https://nuxtjs.org" target="_blank">nuxtjs.org</a>
+  </footer>
+</template>

config/database.js

@@ -0,0 +1,8 @@
+module.exports = {
+  development: {
+    username: process.env.DB_USERNAME || 'postgres',
+    database: process.env.DB_NAME || 'postgres',
+    host: process.env.DB_HOSTNAME || 'db',
+    dialect: 'postgres',
+  },
+};

docker-compose.production.yml

@@ -0,0 +1,27 @@
+version: '2'
+
+services:
+  nuxt:
+    extends:
+      file: docker-compose.yml
+      service: nuxt
+    build:
+      context: .
+      dockerfile: Dockerfile.production
+    volumes:
+      - /usr/src/app
+  db:
+    extends:
+      file: docker-compose.yml
+      service: db
+
+  ipfs:
+    extends:
+      file: docker-compose.yml
+      service: ipfs
+
+volumes:
+  db_data:
+    driver: local
+  ipfs_data:
+    driver: local

docker-compose.yml

@@ -0,0 +1,37 @@
+version: '3'
+
+services:
+  nuxt:
+    build:
+      context: .
+    depends_on:
+    - db
+    - ipfs
+    ports:
+      - "3000:3000"
+    volumes:
+      - ./:/usr/src/app
+      - /usr/src/app/node_modules
+    environment:
+      HOST: 0.0.0.0
+      IPFS_HOST: ipfs
+
+  db:
+    image: postgres:10.4
+    ports:
+      - "5432:5432"
+    volumes:
+      - db_data:/var/lib/postgresql/data
+
+  ipfs:
+    image: ipfs/go-ipfs:v0.4.15
+    ports:
+      - "8080:8080"
+    volumes:
+      - ipfs_data:/data/ipfs
+
+volumes:
+  db_data:
+    driver: local
+  ipfs_data:
+    driver: local

layouts/default.vue

@@ -0,0 +1,67 @@
+<template>
+  <v-app>
+    <v-toolbar>
+      <v-toolbar-title>PuttyImage</v-toolbar-title>
+      <v-spacer></v-spacer>
+      <v-toolbar-items class="hidden-sm-and-down">
+        <v-btn flat>Login</v-btn>
+      </v-toolbar-items>
+    </v-toolbar>
+    <v-content>
+      <v-container fluid>
+        <nuxt/>
+        <my-footer/>
+      </v-container>
+    </v-content>
+  </v-app>
+</template>
+
+<script>
+import MyFooter from '~/components/Footer';
+
+export default {
+  components: {
+    MyFooter,
+  },
+};
+</script>
+
+<style>
+.container
+{
+  margin: 0;
+  width: 100%;
+  padding: 0;
+  text-align: center;
+}
+
+.content {
+  padding-top: 56px !important;
+}
+
+.button, .button:visited
+{
+  display: inline-block;
+  color: black;
+  letter-spacing: 1px;
+  background-color: #fff;
+  border: 2px solid #000;
+  text-decoration: none;
+  text-transform: uppercase;
+  padding: 15px 45px;
+}
+
+.button:hover, .button:focus
+{
+  color: #fff;
+  background-color: #000;
+}
+
+.title
+{
+  color: #000;
+  font-weight: 300;
+  font-size: 2.5em;
+  margin: 0;
+}
+</style>

layouts/error.vue

@@ -0,0 +1,37 @@
+<template>
+  <section class="container">
+    <img src="../assets/img/logo.png" alt="Nuxt.js Logo" class="logo" />
+    <h1 class="title">
+      {{ error.statusCode }}
+    </h1>
+    <h2 class="info">
+      {{ error.message }}
+    </h2>
+    <nuxt-link class="button" to="/" v-if="error.statusCode === 404">
+      Homepage
+    </nuxt-link>
+  </section>
+</template>
+<script>
+export default {
+  props: ['error'],
+};
+</script>
+
+<style scoped>
+.title
+{
+  margin-top: 15px;
+  font-size: 5em;
+}
+.info
+{
+  font-weight: 300;
+  color: #9aabb1;
+  margin: 0;
+}
+.button
+{
+  margin-top: 50px;
+}
+</style>

migrations/20180601081626-create-user.js

@@ -0,0 +1,16 @@
+module.exports = {
+  up: (queryInterface, Sequelize) =>
+    queryInterface.createTable('user', {
+      id: {
+        allowNull: false,
+        autoIncrement: true,
+        primaryKey: true,
+        type: Sequelize.INTEGER,
+      },
+      name: {
+        allowNull: false,
+        type: Sequelize.TEXT,
+      },
+    }),
+  down: queryInterface => queryInterface.dropTable('user'),
+};