demo.v4.mp4

Let's Blog - Read, Write and Share Blog platform

Read, Write and Share Blog platform written in Compose Multiplatform, created by @dungngminh.

Getting Started 🤖

Everyone loves writing through their own stories, experiences, knowledge, lifehack,.. via blog and so do I. I want to create a place for everyone writing, sharing, reading blogs, anything, anyway, anytime and cross-platform. That's why I created this project. I hope this will be a good platform for everyone. This platform is also integrated Gemini AI to help read more efficiently, no more skimming through lines, find the needed information and also a good example of Compose Multiplatform. And now, Let's Blog! 🚀

Feature set 🔥

• ✅ Huge blogs list, popular blogs that filter by favorite count.
• ✅ Summary blog content with Gemini
• ✅ Create new blog with WYSIWYG interactive editor.
• ✅ Search blogs by title, content,
• ✅ Save blog to favorite list.
• ✅ Authentication
• ✅ Manage user profile information, user's blogs

Architecture 🏗️

• This app shared UI, logic code between Android, iOS, Web, Desktop with Compose Multiplatform.

• Includes 2 main modules:

  • composeApp: Shared code between Android, iOS, Web, Desktop.
  • backend: Backend side written in Dart, using Dart Frog framework.

• App architecture follows Recommended app architecture from Android.

What I used 💪

• Compose Multiplatform UI Framework - Shared UI code between Android, iOS, Web, Desktop with Compose UI.
• Gemini - Generative model from Google, used for summarizing blog content.
• Material 3 - Material design system.
• Voyager for navigation solution.
• Koin for dependency injection.
• Ktor via Ktorfit for networking.
• Compose Rich Editor for WYSIWYG interactive editor.
• multiplatform-settings for shared preferences.
• Dart Frog for backend side.
• PostgreSQL for backend database.
• Railway for hosting backend and database.
• Github Pages for hosting web app, auto deploy with Github Actions.

... and some utilities libraries like FlowExt, Landscapist, etc.

Platform 📦

• ✅ Android
• ✅ iOS
• ✅ Web Wasm
• ✅ Desktop JVM

How to run this project ❓

First step

Clone this project to your local machine.

git clone https://github.com/dungngminh/lets_blog_compose_multiplatform.git

This project includes 4 run configurations:

• composeApp: Run Android app
• iosApp: Run iOS app
• WebApp: Run Web app
• DesktopApp: Run Desktop app

Prepare env configuration

• Currently, I filled env for KotlinConf contest, you can use it for testing in env.contest.properties.
• If you want to run this project, with your own configuration, you need to create env properties file, I also put a sample file is env.sample.properties, you can copy it to env.properties and fill your own configuration. Currently, source code is filled with env.contest.properties file, you can change it in build.gradle.kts file at buildKonfig block in composeApp module.

• Env information:
  • GEMINI_KEY: Gemini API key
  • BASE_URL: Base URL for backend API

Backend side

Backend side is written in Dart, using Dart Frog framework, you can find it in install instruction here from backend folder.

Android

Run composeApp via imported configuration.

iOS

Run iosApp via imported configuration.

Desktop

Run DesktopApp via imported configuration or run command:

./gradlew :desktopApp:run

Web

Run WebApp via imported configuration or run command:

./gradlew :composeApp:wasmJsBrowserRun -t --quiet

Screenshots 📸

Android

Click to expand

Home	Search	Favorite
Detail Blog	Profile	Blog Editor
Preview Blog to upload	Login	Register
Summary Blog

iOS

Click to expand

Home	Search	Favorite
Detail Blog	Profile	Blog Editor
Preview Blog to upload	Login	Register
Summary Blog

Desktop (MacOS)

Click to expand

Home	Search	Favorite
Detail Blog	Profile	Blog Editor
Preview Blog to upload	Login	Register
Summary Blog

Web

Click to expand

Home	Search	Favorite
Detail Blog	Profile	Blog Editor
Preview Blog to upload	Login	Register
Summary Blog

Contributors 🌟

Dzung Nguyen Minh 💻 📖 🐛

More about Compose Multiplatform 🚀

Learn more about Kotlin Multiplatform, Compose Multiplatform, Kotlin/Wasm…

We would appreciate your feedback on Compose/Web and Kotlin/Wasm in the public Slack channel #compose-web. If you face any issues, please report them on GitHub.