GraphQL Blog Client

This repository is a React Apollo client for a GraphQL blog. It does not contain the API necessary. It consumes and presents the data from an API identical to graphql-blog-api.

Technologies

• React - A declarative, efficient, and flexible JavaScript library for building user interfaces.
• webpack - Module bundler.
• TSLint - An extensible linter for the TypeScript language.
• TypeScript - TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
• React Apollo - React higher-order component for Apollo Client.
• styled-components - Visual primitives for the component age 💅.
• React Router - Declarative routing for React.
• Draftjs - Rich text editor framework for React.
• Express - Minimalist web framework for Node.

Features

• Display a list of recent blog posts
• View a single blog post with related comments
• Create a new post
• Simple rich text editor for creating posts
• Prefetch a post when hovering over the post title

Setup

• Clone the repository
  • git clone git@github.com:Skovy/graphql-blog-client.git
• Change to the GraphQL Blog Client directory
  • cd graphql-blog-client
• Install the dependencies
  • yarn install
• Start the webpack dev server
  • yarn start
• Navigate to you browser
  • localhost:3000
  • Note: this depends on an external API (eg: graphql-blog-api)

Development

• yarn lint
  • Run TSLint
• yarn lint:fix
  • Run TSLint and fix the errors
• cp .env.example .env
  • Copy and change local environment configurations such as the Express PORT or GraphQL API endpoint
• NODE_ENV=production yarn heroku-postbuild
  • Build the production bundle, the same used if deployed to Heroku
• heroku local
  • Run in "production mode", using the simple Express server instead of the webpack-dev-server

Next Steps

• Upgrade Apollo to V2 (#1)

Screenshots

Home

Post

Write