https://github.com/abdullah017/flutter_abdullahtasdev_blog

This repo contains the admin panel and blog interface for the abdullahtas.dev domain
https://github.com/abdullah017/flutter_abdullahtasdev_blog

flutter flutter-apps flutter-demo flutter-examples flutter-ui flutterweb flutterwebapp

Last synced: 5 months ago
JSON representation

This repo contains the admin panel and blog interface for the abdullahtas.dev domain

Host: GitHub
URL: https://github.com/abdullah017/flutter_abdullahtasdev_blog
Owner: abdullah017
Created: 2024-10-23T09:49:46.000Z (over 1 year ago)
Default Branch: development
Last Pushed: 2024-12-22T12:34:34.000Z (over 1 year ago)
Last Synced: 2025-04-03T14:43:54.681Z (about 1 year ago)
Topics: flutter, flutter-apps, flutter-demo, flutter-examples, flutter-ui, flutterweb, flutterwebapp
Language: Dart
Homepage: https://abdullahtas.dev
Size: 1.48 MB
Stars: 3
Watchers: 1
Forks: 0
Open Issues: 3
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# 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](https://abdullahtas.dev/) 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](https://abdullahtas.medium.com/flutter-firebase-cli-c47deb4447a7).

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!