Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/sarthak-0-sach/blogit-modern_graphql_based_blog_app

A feature-rich, fully responsive CMS Blog App built using modern web technologies. Easily manage and publish blog posts, categories, and author information. Leverages GraphCMS for headless CMS integration, providing a seamless content management experience.
https://github.com/sarthak-0-sach/blogit-modern_graphql_based_blog_app

author-profile customizable-themes graphcms graphql-api markdown-supported-editor reactjs responsive-web-design scss user-comments

Last synced: 8 months ago
JSON representation

A feature-rich, fully responsive CMS Blog App built using modern web technologies. Easily manage and publish blog posts, categories, and author information. Leverages GraphCMS for headless CMS integration, providing a seamless content management experience.

Awesome Lists containing this project

README 

          
# BlogIt: A Cutting-Edge Blogging Platform📝



## Welcome! 👋



Welcome to **BlogIt**, a dynamic and fully responsive Content Management System (CMS) built for creating and managing blogs. With a modern design and powerful features, this platform provides an intuitive user experience for both creators and readers.



## Table of Contents 📚



- [Overview](#overview) 🌐

  - [The Challenge](#the-challenge) 🛠️

  - [Key Features](#key-features) ✨

  - [File Structure](#file-structure) 🗂️

  - [Technologies Used](#technologies-used) 💻

- [Setup Instructions](#setup-instructions) ⚙️

  - [Prerequisites](#prerequisites) 📋

  - [Installation](#installation) 🔧

  - [Usage](#usage) 📖

  - [Future Improvements](#future-improvements) 🚀

  - [Useful Resources](#useful-resources) 📚

- [Author](#author) ✍️

- [Acknowledgments](#acknowledgments) 🙏

- [Contributing](#contributing) 🤝

- [License](#license) 📃



## Overview 🌟



**BlogIt** is a feature-rich blogging platform that allows seamless content management through a CMS interface, enabling both beginners and experienced developers to manage and display blog content effortlessly.



### The Challenge 💡



Building a modern blogging platform requires a robust backend for content management and a responsive front-end for users to access the blog posts seamlessly. The challenge here was to:



- **Create an intuitive CMS** for effortless content creation and management.

- **Develop a fully responsive design** that works seamlessly on all devices.

- **Implement advanced features** such as Markdown support, categories, and user engagement tools like comments and author profiles.



### Key Features 🔑



- **Responsive Design:** Automatically adjusts to all screen sizes, from mobile to desktop.

- **CMS Integration:** A user-friendly content management system for creating, editing, and managing posts.

- **Markdown Support:** Create rich text content with Markdown for a smooth authoring experience.

- **Categories:** Organize posts into various categories to improve content navigation.

- **Featured & Recent Posts:** Highlight key content and ensure readers always see the latest updates.

- **Author Profiles:** Display detailed author information to build credibility and personal connection.

- **Comments Section:** Enable readers to comment and engage with posts.

- **Search Functionality:** A search feature to help readers find posts based on keywords or tags.

- **And Much More:** Explore additional functionalities for a complete blogging experience.



### File Structure 📂

```

/root-directory

|-- components/                   # React components for various UI elements

|   |-- AdjacentPostCard.jsx       # Displays adjacent posts

|   |-- Author.jsx                 # Displays author details

|   |-- Categories.jsx             # Displays post categories

|   |-- Comments.jsx               # Displays comments on posts

|   |-- CommentsForm.jsx           # Form for submitting comments

|   |-- FeaturedPostCard.jsx      # Displays featured posts

|   |-- Header.jsx                 # Navigation header component

|   |-- Layout.jsx                 # Page layout component

|   |-- Loader.jsx                 # Loader component for async content

|   |-- PostCard.jsx               # Card for displaying individual posts

|   |-- PostDetail.jsx             # Detailed view of a post

|   |-- PostWidget.jsx             # Widget for showing related posts

|   |-- index.jsx                  # Main entry point for components

|

|-- pages/                         # Next.js pages

|   |-- api/                       # API routes

|   |   |-- comments.js            # API for handling comments

|   |

|   |-- category/                  # Pages for categories

|   |   |-- [slug].js              # Dynamic category page based on slug

|   |

|   |-- post/                      # Pages for posts

|   |   |-- [slug].js              # Dynamic post page based on slug

|   |

|   |-- _app.js                    # Custom App component

|   |-- _document.js               # Custom Document for Next.js

|   |-- index.js                   # Home page of the blog

|

|-- public/                        # Static assets

|   |-- bg.jpg                     # Background image

|   |-- favicon.ico                # Favicon for the blog

|   |-- vercel.svg                 # Vercel logo (if using Vercel deployment)

|

|-- sections/                      # Section components for posts and widgets

|   |-- AdjacentPosts.jsx          # Section displaying adjacent posts

|   |-- FeaturedPosts.jsx          # Section displaying featured posts

|   |-- index.js                   # Main entry point for sections

|

|-- services/                      # Service-related logic, e.g., data fetching

|   |-- index.js                   # Main entry point for services

|

|-- styles/                        # Global styles

|   |-- globals.scss               # Main global styles (CSS)

|

|-- .eslintrc.js                   # ESLint configuration

|-- .gitignore                     # Files to be ignored by Git

|-- .npmrc                         # NPM configuration

|-- LICENSE                        # Project license

|-- README.md                      # Project description and instructions

|-- next.config.js                 # Next.js configuration

|-- package-lock.json              # NPM lock file

|-- package.json                   # NPM dependencies and scripts

|-- postcss.config.js              # PostCSS configuration

|-- tailwind.config.js             # Tailwind CSS configuration

|-- util.js                        # Utility functions for the project

```



### Technologies Used ⚙️

- **React/Next.js** for frontend development

- **Tailwind CSS** for modern, responsive UI design

- **GraphCMS** (Headless CMS) for content management via GraphQL

- **Node.js/Express** for backend API (if applicable)

- **MongoDB/PostgreSQL** for content storage

- **Markdown-it** or **remark** for Markdown rendering



## Setup Instructions 🛠️



### Prerequisites 📋

- Node.js (for front-end and back-end development)

- A GraphCMS account (for CMS setup)

- Basic understanding of React (or your preferred JavaScript framework)

- Git for version control



### Installation ⬇️



1. Clone the repository:

   ```bash

   git clone https://github.com/yourusername/blogit.git

   ```

2. Navigate to the project directory:

   ```bash

   cd blogit

   ```

3. Install the required dependencies:

   ```bash

   npm install

   ```

4. Set up your GraphCMS account and obtain an API key.

5. Create a `.env` file and add your environment variables (e.g., GraphCMS API URL).

6. Run the development server:

   ```bash

   npm run dev

   ```



### Usage 🖥️



1. **CMS Setup:** Create a project in GraphCMS and define your content models (e.g., Blog Post, Author, Category).

2. **Content Management:** Use the CMS to add new blog posts, authors, and categories.

3. **View the Blog:** Once the CMS is connected, navigate to `localhost:3000` to view your blog in action. Posts will be dynamically fetched and displayed from the CMS.



### Future Improvements 🚀



- Add user authentication for user profile creation, comment moderation, and personalized features.

- Implement dynamic SEO support (title, description, and meta tags) for better search engine optimization.

- Explore adding features like image galleries, social sharing buttons, and content scheduling.

- Create a mobile app version of BlogIt for reading and managing posts on the go.



### Useful Resources 📚



- [React Documentation](https://reactjs.org/docs/getting-started.html) - The official guide for React, a key part of the project.

- [GraphCMS Documentation](https://graphcms.com/docs) - Documentation for setting up and integrating GraphCMS.

- [Tailwind CSS Documentation](https://tailwindcss.com/docs) - Guide to utilizing Tailwind for styling your application.

- [Markdown-it](https://github.com/markdown-it/markdown-it) - A library for Markdown parsing and rendering.



## Author 👨‍💻



**Sarthak Sachdev**  

- Website - [Sarthak Sachdev](https://itsmesarthak.netlify.app/)  

- LinkedIn - [Sarthak Sachdev](https://www.linkedin.com/in/sarthak2004/)  

- Twitter - [@sarthak_sach69](https://www.twitter.com/sarthak_sach69)  



## Acknowledgments 🙏



A special thank you to **GraphCMS** for providing a powerful headless CMS platform and **Tailwind CSS** for simplifying the UI design process.



## Contributing 🤝



Contributions are welcome! Please fork this repository, make your changes, and submit a pull request with your improvements.



## License 📃

This project is licensed under the MIT License.



Copyright (c) 2024, Sarthak Sachdev



**Happy Coding!** 😊🚀