khamwas / houser-vue

Houser Real Estate App in Vue

a project by Emmanuel Bravo

Project started Jan 4, 2019 and completed on Jan 4, 2019. Approximately 6 hours worked independently.

Walkthrough

Wizard Step 1

Wizard Step 2

Wizard Step 3 (Add a Listing)

Delete Listing

Table of Contents

• Preplanning - Component Tree - Schema
• Main Challenges - 1. Learning Vue - 2. Learning Vuetify - 3. Learning Vuex - 4. Learning Vue-Router
• Technology - Vue - Vuetify - Vuex - Vue-Router - Express - Massive - Axios

Preplanning

Component Tree

Below is the initial component tree created during pre-planning

Schema

Technology

Vue

Coming from a React background, Vue was fairly straightforward to learn. Many ideas are parallel and of those that are not, they are fairly intuitive.

The organization of files in Vue is better suited to the way I personally work best in programming.

Vuetify

Design libraries are incredibly useful to create a consistent standard to adhere to in your projects. That is why I decided to simultaneously learn Vuetify during my first attempt to implement the Vue framework.

Vuetify elements utilized

<v-app style="{}">
	<v-content />

	<v-container />
	<v-layout />
	<v-flex />
	<v-grid />

	<v-toolbar />
	<v-toolbar-title />
	<v-toolbar-side-icon />

	<v-card />
	<v-card-title />
	<v-card-text />
	<v-card-actions />

	<v-form />
	<v-text-field />

	<v-tooltip />
	<v-tabs />
	<v-tab />
	<v-tab-item />

	<v-spacer />
	<v-btn />
	<v-img
/></v-app>

Vuex

the setup for the Vuex store and action creators

import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';

Vue.use(Vuex);

export default new Vuex.Store({
	state: {
		houses: []
	},

	mutations: {
		SET_HOUSES(state, houses) {
			state.houses = houses;
		},

		ADD_HOUSE(state, houses) {
			state.houses = houses;
		},

		DELETE_HOUSE(state, houses) {
			state.houses = houses;
		}
	},

	actions: {
		setHouses() {
			axios.get('/api/houses').then((res) => {
				this.commit('SET_HOUSES', res.data);
			});
		},

		deleteHouse(context, id) {
			axios.delete(`/api/houses/${id}`).then((res) => {
				this.commit('DELETE_HOUSE', res.data);
			});
		},

		addHouse(context, house) {
			axios.post('/api/houses', house).then((res) => {
				this.commit('ADD_HOUSE', res.data);
			});
		}
	}
});

integrating the store into the project

new Vue({
	router,
	store,
	render: (h) => h(App)
}).$mount('#app');

implementing the store

//values
computed:  {
houseList() {
return  this.$store.state.houses;
}},
//actions
mounted() {
this.$store.dispatch("setHouses");
}

Vue-Router

The set up for the router file

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

export default new Router({
	mode: 'history',
	base: __dirname,
	routes: [
		{
			path: '/wizard',
			name: 'wizard',
			component: () => import('./components/Wizard.vue')
		},
		{
			path: '/house/:id',
			name: 'house',
			component: () => import('./components/House.vue')
		},
		{
			path: '/',
			name: 'dashboard',
			component: () => import('./components/Dashboard.vue')
		}
	]
});

integrating the routing into the project

new Vue({
	router,
	store,
	render: (h) => h(App)
}).$mount('#app');

implementing routing

<template>
	<v-app style="background: #afd4c0">
		<header></header>
		<v-content align-center>
			<router-view :key="$route.fullPath"></router-view>
		</v-content>
	</v-app>
</template>

Express

Massive

Axios

PostgreSQL

Heroku