https://github.com/abritopach/vue-graphcool-blog

Sample project that shows how to build a Blog App with VueJS, GraphQL, Apollo Client and Graphcool.
https://github.com/abritopach/vue-graphcool-blog

apollo-client graphcool graphql typescript vuejs

Last synced: 2 months ago
JSON representation

Sample project that shows how to build a Blog App with VueJS, GraphQL, Apollo Client and Graphcool.

• Host: GitHub
• URL: https://github.com/abritopach/vue-graphcool-blog
• Owner: abritopach
• License: mit
• Created: 2018-02-25T15:33:04.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-11-07T16:50:50.000Z (almost 7 years ago)
• Last Synced: 2025-02-11T11:42:20.152Z (8 months ago)
• Topics: apollo-client, graphcool, graphql, typescript, vuejs
• Language: Vue
• Homepage:
• Size: 17.5 MB
• Stars: 2
• Watchers: 4
• Forks: 0
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Vue-Graphcool-Blog

Sample project that shows how to build a Blog App (Role Based Authentication) with VueJS, Vuex, GraphQL, Apollo Client and Graphcool.

This example is based on the example ["Build a Blog with VueJS, GraphQL and Apollo Client"](https://scotch.io/tutorials/build-a-blog-with-vue-graphql-and-apollo-client) that I modified to practice my skills. The original post uses GraphQL server built with AdonisJS and it also uses Bulma CSS. I have decided to replace "GraphQL server built with AdonisJS and Bulma CSS" with Graphcool and Vuetify. This project integrates Typescript in VueJS.

This project shows you how to:

    * Integrates Typescript in VueJS.

    * Role based authentication.

    * Use vuex to manage state app.

    * Use graphql: queries, mutations, subscriptions.

    * User login and signup.

    * Forgot password: 

        - Sendgrid is used for sending emails: [outdated documentation]https://github.com/graphcool/templates/tree/master/outdated/auth/email-user-management/functions/reset-password

    * If you are a simple user

        * Edit your profile (change your avatar image).

        * Show the latest posts published by users.

        * Show post details

        * Manage your posts: show, filter, edit, delete.

    * If you are a admin user (extra functionality)

        * Manage all posts: show, filter, edit, delete.

        * Manage all users: show, filter, edit, delete (delete posts associated with a user when the user is deleted.).

    * Infinite scroll in latest post view.

    * Skeleton Screen in latest post view.

Technologies: Vue.js, Vuetify.js, Vuex, Typescript, GraphQL, Apollo Client and Graphcool.

![Technologies](readme_resources/graphql_apollo_vue_graphcool.png "Technologies")

NOTE: Sample project using Prisma instead of GraphCool in [prisma branch](https://github.com/abritopach/vue-graphcool-blog/tree/prisma).

      [Prisma server](https://github.com/abritopach/prisma-blog)

## App Example

![App example](readme_resources/app.gif "App example")

## Build Setup

Before you go through this example, you should have at least a basic understanding of Vue concepts. You must also already have Vue Cli installed on your machine.

``` bash

# Install dependencies.

npm install

# Serve with hot reload at localhost:8080

npm run dev

# Build for production with minification

npm run build

```

For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).

## Requirements

* [Node.js](http://nodejs.org/)

* [Vue cli](https://github.com/vuejs/vue-cli)