Learn GraphQL by building a blogging engine. Create resolvers, write schemas, write queries, design the database, test and also deploy.

Overview

GraphQL Blog

graphqlblog.com

Learn GraphQL by building a blogging engine. Create resolvers, write schemas, write queries, design the database, test and also deploy. {% .lead %}

Introduction

This modern GraphQL based stack will give you all the tools you need for your next project. GraphQL is the glue that ties every part of the stack together, thanks to it's typed nature and productive tooling.

You will create a headless blog that targets two types of users, editors and developers.

The first target user for the headless blog CMS are editors. They write markdown to create content. They register on the site and create, edit, and publish posts.

The other type of user GraphQLBlog has are developers. They consume the Posts GraphQL API to develop sites on top of the data. Authenticate against it with API Keys. Write GraphQL queries to fetch content. Send mutations to create, edit and update content.

Once you finish this course, you will know how to create full stack, modern GraphQL Apps and APIs using:

UI:

API:

Deployment:

Prerequisites

You will need to have a basic understanding of web development, mainly Javascript, React and NodeJs.

What you'll build

You will build a headless blog engine. Check it out here!

Let's break down what that even means. A blog engine means it allows users to create and edit posts in markdown. Headless in this context means that it exposes a public GraphQL API that your API consumers can use along with their framework of choice to display the content.

You will learn how to develop it from scratch on your local machine, and also how to deploy it to a production ready environment.

Architecture

The app is architected with three goals in mind: Developer experience, production readiness, and simplicity.

Fully typed from database, to API, to UI makes for a bug free, autocomplete ready development. Thanks to GraphQL, Typescript and Prisma.

Ready for production workloads since it's built on top of battle tested technologies like Postgres, NodeJs, and React.

Simplicity because it follows established and modern patterns like UI components and GraphQL on the API.

About the author

Hi, I'm Julian and I've been addicted to GraphQL since 2018. Love to get my hands dirty with production code, and share what I learn.

One of the first engineer hires at HyGraph, where I worked for 4 years. Wrote Full Stack GraphQL, taught One Week GraphQL along with Jamie. Oh, I also co-hosted a talk with Bruno on Testable GraphQL services at GraphQLConf 2021.

Right now building GQL IDE, the next generation of GraphQL IDEs.

You might also like...

A Technical Blogging Website that utilizes Notion as a CMS for ease of modification with the help of the notion-API & whose content has been rendered with next-js and react-notion-x

A Technical Blogging Website that utilizes Notion as a CMS for ease of modification with the help of the notion-API & whose content has been rendered with next-js and react-notion-x

GDSC MCE Blogs This repo is what GDSC MCE uses to power their blogging website gdsc-mce-blogs. It uses Notion as a CMS, fetching content from Notion a

Dec 16, 2022

LogTure - A minimal designed, fully customizable, and extensible modern personal blogging framework, built with Nextjs.

LogTure - A minimal designed, fully customizable, and extensible modern personal blogging framework, built with Nextjs.

Aug 26, 2022

Gatsby-starter-minimal-blog - Typography driven, feature-rich blogging theme with minimal aesthetics.

Gatsby-starter-minimal-blog - Typography driven, feature-rich blogging theme with minimal aesthetics. Includes tags/categories support and extensive features for code blocks such as live preview, line numbers, and line highlighting.

Jan 29, 2022

Markdown Blogging, Without Setup or Signup

You write. We do the rest. 📝 Memos.pub Memos.pub publishes Markdown files instantly without any setup. If you have a public GitHub repo with Markdown

Dec 11, 2022

Markdown Blogging, Without Setup or Signup

You write. We do the rest. 📝 Memos.pub Memos.pub publishes Markdown files instantly without any setup. If you have a public GitHub repo with Markdown

Apr 27, 2022

Prisma +2 generator to emit Yup schemas from your Prisma schema

Prisma +2 generator to emit Yup schemas from your Prisma schema

Prisma Yup Generator Automatically generate Yup schemas from your Prisma Schema, and use them to validate your API endpoints or any other use you have

Dec 24, 2022

Prisma 2+ generator to emit Joi schemas from your Prisma schema

Prisma 2+ generator to emit Joi schemas from your Prisma schema

Prisma Joi Generator Automatically generate Joi schemas from your Prisma Schema, and use them to validate your API endpoints or any other use you have

Dec 24, 2022

Prisma 2+ generator to emit Zod schemas from your Prisma schema

Prisma 2+ generator to emit Zod schemas from your Prisma schema

Prisma Zod Generator Automatically generate Zod schemas from your Prisma Schema, and use them to validate your API endpoints or any other use you have

Dec 27, 2022

Quickly develop, deploy and test Solana programs from the browser.

Solana Playground SolPg allows you to quickly develop, deploy and test Solana programs(smart contracts) from the browser. Note SolPg is still in beta

Dec 29, 2022
Owner
GraphQLApps
Democratizing GraphQL App development
GraphQLApps
Opinionated collection of TypeScript definitions and utilities for Deno and Deno Deploy. With complete types for Deno/NPM/TS config files, constructed from official JSON schemas.

Schemas Note: You can also import any type from the default module, ./mod.ts deno.json import { type DenoJson } from "https://deno.land/x/[email protected]

deno911 2 Oct 12, 2022
Blogkit - A unified blogging engine built with Next.js

Blogkit (beta) Blogkit is a unified blog engine inspired by Sairin. Get started with starter templates Template Description blogkit-notion-starter Not

2nthony 7 Jun 9, 2022
Schemix allows you to programmatically create Prisma schemas using TypeScript ⌨️

Schemix Schemix let's you programmatically generate Prisma schemas. As Prisma schemas are not inherently segmentable, Schemix acts as a library to aid

Rida F'kih 197 Jan 5, 2023
next-graphql-server is a library for building production-grade GraphQL servers using Next.js with API Routes

next-graphql-server next-graphql-server is an easy to use Next.js library for creating performant GraphQL endpoints on top of Next.js API Routes. Star

Jakub Neander 82 Nov 21, 2022
Boost is a Microsoft Excel Add-in to help developers import large excel workbooks into their database using SQL queries

Microsoft Excel Add-in for Developers About Us Boost is a Microsoft Excel Add-in to help developers import large excel workbooks into their database u

OSLabs Beta 30 Sep 30, 2022
For this workshop, we're going to learn more about cloud computing by exploring how to use Pulumi to build, configure, and deploy a real-life, modern application using Docker

For this workshop, we're going to learn more about cloud computing by exploring how to use Pulumi to build, configure, and deploy a real-life, modern application using Docker. We will create a frontend, a backend, and a database to deploy the Pulumipus Boba Tea Shop. Along the way, we'll learn more about how Pulumi works.

Kat Cosgrove 9 Dec 29, 2022
🌸 A fast and fun way to learn Japanese alphabets: hiragana & katakana. Don't wait - learn now!

Sakurator | Start learning 日本語 here Sakurator (Website publish date: ~4-6 April '22) - a personal trainer for learning Japanese alphabets (hiragana &

Anatoly Frolov 3 Jun 22, 2022
This Next.js app is designed to be used with the Figment Learn Pathways, to help developers learn about various blockchain protocols such as Solana, NEAR, Secret, Polygon and Polkadot!

???? What is learn-web3-dapp? We made this decentralized application (dApp) to help developers learn about Web 3 protocols. It's a Next.js app that us

t0nto 8 Oct 1, 2022
Jester is a test-generation tool to create integration test code.

Code Generator for Integration Tests Introduction Welcome to Jester: An easy-to-use web application that helps you create and implement integration te

OSLabs Beta 54 Dec 12, 2022
A tiny, fast and fun static site generator for quick blogging

1POST A tiny, fast and fun static site generator for quick blogging. 1POST is written entirely in NodeJS and has no dependencies. You can install as a

Felippe Regazio 141 Dec 5, 2022