GraphQL Blog

A modern, responsive blog application built with React, Vite, Material-UI, and GraphQL.

🚀 Features

• Modern React Architecture: Built with React 19 and Vite for fast development
• GraphQL Integration: Powered by Apollo Client for efficient data fetching
• Responsive Design: Material-UI components with custom theming
• Persian/Farsi Support: Full RTL support with custom Persian fonts (YekanBakh)
• Mobile-First: Conditional rendering with BottomAppBar for mobile devices
• Navigation: React Router DOM for seamless page transitions
• Author System: Author profiles and dedicated author pages
• Blog Management: Create, read, and manage blog posts
• Clean UI: Modern card-based layout with hover effects

🛠️ Tech Stack

• Frontend: React 19, Vite
• Styling: Material-UI (MUI), Emotion
• Data Fetching: Apollo Client, GraphQL
• Routing: React Router DOM
• Icons: Material-UI Icons
• Build Tool: Vite
• Linting: ESLint

📦 Installation

1. Clone the repository:

git clone https://github.com/sajjadnazaridev/Graphql-Blog.git
cd Blog_graphql

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Build for production:

npm run build

🏗️ Project Structure

src/
├── components/
│   ├── home/
│   │   ├── Hero.jsx
│   │   ├── Authors.jsx
│   │   └── RecentPosts.jsx
│   ├── layout/
│   │   ├── Header.jsx
│   │   ├── Footer.jsx
│   │   ├── BottomAppBar.jsx
│   │   └── DefaultLayout.jsx
│   ├── shared/
│   │   ├── CardEL.jsx
│   │   └── Loader.jsx
│   └── ui/
├── pages/
│   └── Home/
├── assets/
│   ├── fonts/
│   ├── images/
│   ├── mui/
│   └── styles/
├── graphql/
│   ├── queries.js
│   └── mutations.js
├── App.jsx
└── main.jsx

🎨 Features

Responsive Header

• Desktop: Traditional AppBar with navigation menu
• Mobile: BottomAppBar for better mobile UX

Persian Typography

• Custom YekanBakh font family
• RTL text support
• Proper Persian text rendering

GraphQL Integration

• Efficient data fetching with Apollo Client
• Author and blog post queries
• Optimized caching

📱 Components

CardEL

Reusable card component for displaying blog posts with:

• Author avatar and name
• Blog title and excerpt
• Cover image
• Read more functionality

Authors

Author listing component with:

• Author avatars
• Clickable author profiles
• Smooth hover effects

🚀 Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run lint - Run ESLint
• npm run preview - Preview production build

🌟 Version 1.0.0

Initial release featuring:

• Complete blog system
• Author management
• Responsive design
• Persian language support
• GraphQL integration

📄 License

This project is licensed under the MIT License.