👨🏼‍💻 About this project

This is a weblog website with a lots of amazing features. follow me to read more about them
Before that, first see the demo of this project

🧠 Features

I used hygraph(graph CMS) for the backend and graphQL api for fetch data, so in this website, clients will not receive any useless data

🔥 Comment Form:

• Users are able to write their personal comment about each blog and after sending that, thier comment will save on Hygraph data base so everyone can see that comment in the comments list section
• Users are able to add their photo as an avatar for their comments
  • Users can select their photo by drag and drop and also they can select it manually
  • Users can see every steps in sending process
• Users should rate the blog from 1 to 5 stars
• The form will be validate after clicking the send button

🔥 Comments List:

• Commets list shows every comments that users send to the data base that include user's name, photo, rate, comment text
• There is a like button for each comment that everyone can click on it if they liked the comment
• Also there is a reply button that gives users the ability to replay each other comments
  • By clicking on reply button you can see a comment form in a popup window, that have every features we discussed in the Comment Form feature
• You can fetch and see replies for any comment by clicking the show replies button
  • Also there is a like button form each reply
• On mounting the page, react will show only 5 comments for a blog so you can fetch and see more comments by clicking show more button that you can see in the end of the commets list
• Users are able to sort comments by "newest"(defualt) , "oldest", "most likes"

Commen Features:

• In the home page you can see a list of blogs and writers
• Every author has a unique page that they introduced themselves and also you can see list of that author's blogs in this page
• View the optimal layout for the app depending on their device's screen size
• You will see a preview for each page befor contents fully load
• this is a single page application(SPA)
• React-rouder used for routing between pages

🛠️ tools & technologies

• React JS
• Sass
• Graph QL
• Apollo client
• Material UI
  • Material icons
• Hygraph (Graph CMS)
• React dropzone
• React router dom
• React slick
• Sanitize html

**Note: you can see online preview on blogchi.epizy.com