Abullahtas.dev Web Blog App

This project is a Blog Platform web application developed with Flutter and powered by Firebase and Hasura. The application has a powerful Glassmorphism design and includes SEO compatibility, state management with GetX, a user-friendly interface and admin panel. The goal of the project is to provide an effective experience on the web by creating a blogging platform that offers advanced features with Flutter Web.

🔗 Demo

click here to check out a demo of the working application

📂 Project Folder Structure

root
├── lib
│ ├── core
│ │ ├── network # API integrations and GraphQL configurations
│ │ ├── utils # Utility functions and general tools
│ ├── data
│ │ ├── models # Data models (User, Post, etc.)
│ │ ├── repositories # Hasura and Firebase data processing classes
│ ├── presentation
│ │ ├── admin # Admin panel components and pages
│ │ ├── frontend # Pages and components of the user interface
│ │ ├── controllers # GetX controlled management (Frontend and Backend)
│ │ ├── widgets # Common widgets
│ ├── themes # Light and Dark theme configuration
│ └─── main.dart # Application start point
├── assets # Media files used in the app
└── pubspec.yaml # Package dependencies and settings

🚀 Features

Blog Posts: Support for written and audio blog posts

Admin Panel: Manage, edit and delete blogs

Glassmorphism Design: A modern and transparent user interface

SEO Compatibility: SEO optimization with meta_seo package

Dark and Light Mode Support: Personalize the user experience

Mobile and Web Compatible: Responsiveness and mobile compatibility

📦 Packages Used

GetX: State management and navigation

meta_seo: Meta tag management for SEO optimization

firebase_storage: Firebase storage

file_picker: File picker

audioplayers: To play audio blog files

flutter_quill: Rich text editor

graphql_flutter: GraphQL queries and Hasura integration

📋 Installation

Follow the steps below to run this project in your local environment:

1. Clone the Project

git clone https://github.com/username/flutter-web-blog-platform.git
cd flutter-web-blog-platform

Install Required Dependencies

flutter pub get

3. Firebase CLI Configuration

You can use this article for project configuration with Firebase CLI. Click to go to the article.

The structures you need to activate via Firebase Console;

• Firebase Storage
• Firebase Auth

4. Hasura Settings

• Using Hasura, you can run your SQL queries and manage your database operations.

• GraphQL Endpoint: Add the appropriate GraphQL endpoint for your Hasura project to core/network/graphql_service.dart.

• Sample SQL Queries: The following queries are sample SQL queries used in the Hasura database:

CREATE TABLE posts (
id SERIAL PRIMARY KEY,
title VARCHAR(255) NOT NULL,
content TEXT,
cover_image VARCHAR(255),
audio_url VARCHAR(255),
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

5. Running the Application

Run the following command to start your project:

flutter run -d chrome

If you encounter a visual loading problem when you run your project, run it with the following command:

flutter run -d chrome --web-renderer html

If you are going to get build and deploy with hosting, you can get build by running the following command:

flutter build web --web-renderer html --release

You need to type /admin-login to login to the admin page!

🤝 Contributing

If you want to contribute to the project, you can submit a pull request or report a bug in GitHub Issues. We look forward to your contributions!

Make a fork. Create a new branch.

git checkout -b feature/feature-name

Commit your changes.

git commit -m 'Add feature: New feature'

Send Branch.

git push origin feature/feature-name

Open a pull request.

📞 Contact

**If you have any questions or suggestions, feel free to contact us.

ADMINS SCREENSHOTS

BLOG SCREENSHOTS