VueForum

You can find my learning process here.

Link to site can be found here.

This project serve as a learning purpose to get a better understanding of Vue.js. The course is coming from Vue School Master Class were we will create a Forum Application from scratch.

The course covers the fundamentals, like:

Vue cli, router and State management with Vuex
Modern Javascript (ES6/7/8)
User permissions & protected routes
Third party authentication
Firebase Realtime Database & Cloud functions
Automatic code review with ESLint
Deployment
Application architecture, best practices and many more.

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Open at standard port:8080

localhost:8080

Components structure

Main

_App
  |_PageHome
    |_CategoryListItem

Category

_PageCategory
  |_ForumList
    |_FormListItem

Forum

_PageForum
  |_ThreadList
    |_ThreadListItem
      |_AppDate

Threads

PageThreadShow
  |_AppDate
  |_PostEditor
  |_PostListItem
    |_AppDate

Profile

PageProfile
  |_UserProfileCard
  |_UserProfileCardEditor
  |_PostList

Vuex

Link to code

State

  state: {
    sourceData,
    authId
  }

Mutations

  mutations: {
    setPost(),

    setUser(),

    appendPostToThread(),

    appendPostToUser(),
  },

Actions

  actions: {
    createPost()
    updateUser()
  }

Getters

  getters: {
    authUser()
  }

Change user

You're able to change the user by changing authId in the state. code

  state: {
    authId: 'VXjpr2WHa8Ux4Bnggym8QFLdv5C3' //Update string if you want to change the user.
  },

niyorn/VueForum