Blog Site with Graph QL

Introduction

---

This project showcases a demo blog site developed with GraphQL. We use GraphCMS as the backend platform to manage the content. This website focuses on a gallery view of the posts available in the CMS environment, and dynamically generates pages for each post.

Credits

---

	Details
Tutorial	Dev Ed - Blog Site with GraphQL
Code	developedbyed - Digital Scribbles

Brief

---

	Details
Version	v1
------------	------------
Demo	Vercel
CMS	GraphCMS
Frameworks	GraphQL, NextJs

Procedure

---

1. Setup the GraphCMS environment.
   1. Create a new Model called Post. Add the following items to it's definition.
      1. Single Line Text - Title
      2. Slug - Slug
      3. Rich Text - Content
      4. Asset Picker - Cover Image
      5. Date - Date Published
      6. Relationship - Two Way Reference - Author (Model)
   2. Create a new Model called Author. Add the following items to it's definition.
      1. Single Line Text - Name
      2. Asset Picker - Avatar
      3. Relationship - Two Way Reference - Post (Model)
   3. Add in some dummy data for both of the models, so that it later shows up in our front end.
2. Create a next-js app using npx create-next-app@latest app-name
3. Implement the front end with the following objectives:
   1. Fetch the entries from graph-cms using graphql
   2. Showcase them as a gallery view on the landing page
   3. Generate pages per post, where the content for each post can be displayed
4. Test these changes in the local environment (npm run dev)
5. Deploy the project to vercel.
   
   

Local Setup

---

1. Clone the repository to your local system.
2. Set the current working directory as blog-demo and then run the following command: npm run dev. This will deploy the project on the localhost.
   
   

Library and Tools

---

Language

API Query Language

Content Management System

Web Framework

Deployment

Future Scope

---

1. Here onwards, we can add a more comprehensive client experience for the site. Here are some ideas to include:
   1. Add in NavBars
   2. Add metric features like number of visits, upvotes and downvotes
   3. Add in the feature to comment on the post
   4. Add in the facility to share the post
   5. Add in the facility to search for specific posts, based on genres and other filters
   6. Add a facility to submit a post from the portal instead of the updating entries in cms platform.
2. This entire project can be considered as a step to having a personal portfolio and blog site.