taiseen/next-blog-app

Next-JS Blog App | JSM

30 - Apr - 2022

Blog App | Live Link

Next Js + Tailwind CSS + GraphQL CMS

For creating Model's & their corresponding Data Field's go to https://app.graphcms.com

4 Different DB Model's & their data fields

No	DB Models	Schema or Data fields into Model
1	category	1. name 2. slug
2	comment	1. name 2. email 3. comment
3	author	1. name 2. bio 3. photo
4	post	1. title 2. slug 3. excerpt 4. content 5. featured post 6. featured image 7. author - OneToMany 8. category - ManyToMany 9. comment - ManyToOne

Yarn | Needful Dependencies

No	Package Installs	Usage of
1	yarn add sass	A pure JavaScript implementation of Sass
2	yarn add moment	Parse, validate, manipulate, & display dates
3	yarn add graphql	A Query Language & Runtime which can target any service
4	yarn add graphql-request	Minimal GraphQL client supporting Node & browsers for scripts
5	yarn add tailwindcss	A utility-first CSS framework for building custom UI
6	yarn add autoprefixer	Parse CSS & add vendor prefixes to CSS rules
7	yarn add postcss	Tool for transforming styles with JS plugins
8	yarn add html-react-parser	HTML to React parser.
9	yarn add react-multi-carousel	Production-ready, fully customizable React carousel component

Learning context by building this project:

No	Context learn by doing this project...
1	Dynamic Routing
2	File Base Routing
3	Folder Structure
4	Layout Architecture
5	Tailwind CSS + SASS
7	Data fetching from GraphQL
8	GraphQL Query writing pattern
9	GraphQL Query with function ( parameter ) writing pattern
10	TailwindCSS class applying - based on if/else condition
11	getStaticPaths() ==> SSG ( statically pre-render all the paths )
12	getStaticProps() ==> SSG ( pre-render fetching data at build time )
13	1 <Component/> call from 2 different place - without props + with props

GraphQL Query Called by <Component/>'s...

No	<Component/> List	Location	GraphQL Query Function
1	index.js	getStaticProps()	getPosts( )
2	/post/[slug].js	getStatic Props({params})	getPostDetails(slug)
3	/post/[slug].js	getStaticPaths()	getPosts( )
4	/category/[slug].js	getStatic Props({params})	getCategoryPost(slug)
5	/category/[slug].js	getStaticPaths()	getCategories( )
6	Header	useEffect	getCategories( )
7	Categories	useEffect	getCategories( )
8	AdjacentPosts	useEffect	getAdjacentPosts(createdAt, slug)
9	FeaturedPosts	useEffect	getFeaturedPosts( )
10	Comments	useEffect	getComments(slug)
11	PostWidget	useEffect	getSimilarPosts(slug, categories) + getRecentPosts( )

Background Resource : https://www.svgbackgrounds.com

Blog App | Demo

Learning by inspired from.