version: 23/10/2022
Jc Blog App | Live Link
This application is a simple Blogging Website
It was built for a myself but especially developed for Writers in general
With featured and recent posts, categories. full markdown articles,
author information, comments, and much more, this fully responsive
#HeadlessCMS. And what's best of all is that any client or content
writer can manage the blog from a dedicated Content Management System
without touchin the code. Built with the newest technologies such
as React JS, #NextJS, Tailwind CSS, #GraphQL, and GraphCMS.
- JavaScript
- React.js
- Next.js
- Tailwind CSS-3
- GraphQL CMS
For creating Model's
& their corresponding Data Field's
go to https://app.graphcms.com
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 |
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 |
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 | getStatic Paths() ==> SSG ( statically pre-render all the paths ) |
12 | getStatic Props() ==> SSG ( pre-render fetching data at build time ) |
13 | 1 <Component/> call from 2 different place - without props + with props |
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( ) |
π¨
jc-blog-app
|
βββ components
| βββ Author.jsx
| βββ AdjacentPostCard.jsx
| βββ Categories.jsx
| βββ Comments.jsx
| |ββ CommentsForm.jsx
| |ββ FeaturedPostCard.jsx
| βββ Footer.jsx
| βββ Header.jsx
| βββ Author.jsx
| |ββ index.js
| βββ Layout.jsx
| βββ Loader.jsx
| βββ PostCard.jsx
| βββ PostDetail.jsx
| βββ PostWidget.jsx
|
βββ pages
| βββ post |π¨| BackEnd |π¨|
| | βββ [slug].js
| |
| βββ category |π¨| BackEnd |π¨|
| | βββ [slug].js
| |
| βββ api |π¨| BackEnd |π¨|
| βββ comments.js
| βββ hello.ts
|
βββ sections |πΆ| Headless GraphCMS
| βββ AdjacentPosts.jsx
| βββ FeaturedPosts.jsx
| βββ index.js
|
βββ services |πΆ| Headless GraphCMS
| βββ index.js
|
βββ styles
βββ globals.css
π¨
- User can read any post and reply directly by writing a comment.
- User can Save their name and email in this browser for the next time the user comments.
Clone repository in a shell using the command:
git clone https://github.com/Joshhortt/jc-blog-app
Due to time constraints the site may not scale perfectly on every device.
If you have any questions or find any issues with this web-application, get in touch.
My email is: joshhortt@yahoo.com
MIT License Copyright (c) 2022 Josh Hortt