GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → skovy → graphql-blog-client

skovy / graphql-blog-client

Licence: other
🚀 React Apollo client for a GraphQL blog.

Programming Languages

typescript
32286 projects
javascript
184084 projects - #8 most used programming language
HTML
75241 projects

Labels

reactbloggraphqlapollostyled-componentsdraft-js

Projects that are alternatives of or similar to graphql-blog-client

Brian Lovin Next
My personal site
Stars: ✭ 522 (+3380%)
Mutual labels:  apollo, styled-components
React Hipstaplate
A ReactJS full-stack boilerplate based on typescript with ssr, custom apollo-server and huge stack of modern utilities which will help you to start your own project
Stars: ✭ 74 (+393.33%)
Mutual labels:  apollo, styled-components
Pup
The Ultimate Boilerplate for Products.
Stars: ✭ 563 (+3653.33%)
Mutual labels:  apollo, styled-components
Pizzaql
🍕 Modern OSS Order Management System for Pizza Restaurants
Stars: ✭ 631 (+4106.67%)
Mutual labels:  apollo, styled-components
Booben
Web app constructor based on React, with GraphQL bindings
Stars: ✭ 96 (+540%)
Mutual labels:  apollo, styled-components
nebuchadnezzar
on the way to cleanest react architechture
Stars: ✭ 15 (+0%)
Mutual labels:  apollo, styled-components
Mvfsillva
My personal website
Stars: ✭ 13 (-13.33%)
Mutual labels:  apollo, styled-components
Ssr Sample
A minimum sample of Server-Side-Rendering, Single-Page-Application and Progressive Web App
Stars: ✭ 285 (+1800%)
Mutual labels:  apollo, styled-components
Meteor Apollo Starter Kit
Meteor, Apollo, React, PWA, Styled-Components boilerplate
Stars: ✭ 91 (+506.67%)
Mutual labels:  apollo, styled-components
Next Starter
Next.js Starter using GraphQL, MobX (Next.js, TypeScript, Babel, Express.js, Apollo Client, React Apollo, React Apollo Hooks, GraphQL Codegen, MobX, mobx-state-tree, styled-components, next-optimized-images, Serverless Framework, AWS Lambda, Dotenv)
Stars: ✭ 90 (+500%)
Mutual labels:  apollo, styled-components
Gatsby Starter Procyon
An opinionated Gatsby starter designed for trash-eating pandas.
Stars: ✭ 88 (+486.67%)
Mutual labels:  apollo, draft-js
downwrite
✍️ Markdown writing application that's down right, neat.
Stars: ✭ 103 (+586.67%)
Mutual labels:  apollo, draft-js
Ran
⚡ RAN! React . GraphQL . Next.js Toolkit ⚡ - SEO-Ready, Production-Ready, SSR, Hot-Reload, CSS-in-JS, Caching, CLI commands and more...
Stars: ✭ 2,128 (+14086.67%)
Mutual labels:  apollo, styled-components
guchub
🎓 Elegantly manage your GUC academic life
Stars: ✭ 15 (+0%)
Mutual labels:  apollo, styled-components
mediocre-pictures
Helping you take mediocre pictures, hands-free. 📷🙆🏻🙅🏾💁🏼📸
Stars: ✭ 16 (+6.67%)
Mutual labels:  styled-components
bulma-styled-components
An implementation of the Bulma css Library for React using Styled Compenents
Stars: ✭ 53 (+253.33%)
Mutual labels:  styled-components
React-Redux-Enterprise
A React-Redux boilerplate for enterprise/large scaled web applications
Stars: ✭ 77 (+413.33%)
Mutual labels:  styled-components
Firstsight
前后端分离，服务端渲染的个人博客，基于 Nodejs、 Vue、 Nuxt、Nestjs、PostgreSQL、Apollo
Stars: ✭ 19 (+26.67%)
Mutual labels:  apollo
sass-extract-js
Plugin for sass-extract to convert Sass variables into a plain JS object
Stars: ✭ 108 (+620%)
Mutual labels:  styled-components
react-sticky-headroom
A React Component to hide a Header using CSS sticky position
Stars: ✭ 22 (+46.67%)
Mutual labels:  styled-components
View All Similar Projects ➔

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
  • 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

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

home

Post

post

Write

write

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].