Slibro — a story writing platform
Tags: appwritehack, flutter, mobile
Published: 2022-05-12 20:19:22

## Overview

**Slibro** is a story writing platform that supports short and long format stories. [Flutter](https://flutter.dev/) and [Appwrite](https://appwrite.io/) is used to create this amazing cross-platform experience.

> Try out the app on Android from [here](https://appdistribution.firebase.dev/i/3fc14b5839069d3c).

![Slibro cross-platform](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o3ew6oqqtfbdo6hn0j5z.png)

The inspiration behind this idea is to simplify the process of story writing, formatting, and publishing to reach a wider audience. Whether you just getting started with your first story or a seasoned writer, Slibro has got you covered!

## Submission Category: 

Mobile Moguls

### Link to Code

The app is completely open sourced, have a look around the code and also feel free to contribute to this project 😉 :

{% github sbis04/slibro %}

## How it started
 
I initially started working on the idea of this app by creating rough UI sketches and notes ...

![Sketches](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g7jm56ooudtiifma431l.png)
 
... also some database structures.

![Database Structures](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yd6o9e8dibjrwdjwfsrg.png)

## How it's going

The app now has full-fledged **story editor** (rich text - markdown), **story reader**, and **story management system** (to manage published/unpublished stories and explore other publisher's stories).

Some glimpses of Slibro's user interface are as follows:

![Slibro Auth Screens](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ckfpt2tqp4sggdstjk5o.png)

The above four screens cover the authentication flow on the app using email/password method. These screens help a user to either create a new account or login using an existing account. Once a user signs up to the app, it navigates to the story creation flow.
 
![Slibro Story Detail Screens](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t7625wndiuvazfpof1fv.png)

These screens help a user to create the first story as a draft in the Slibro app. The user can also publish the story if wanted.

![Slibro Editor and Reader Screens](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u5nph9vo7wz31i5jrhxo.png)

The editor and the reader screens are the most important ones, the editor also has rich text support using Markdown.

![Slibro Dashboard Screens](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vpx0jkjubobvihpkr9fm.png)

The three screens (Home, My Stories, and My Profile) shown above are part of the dashboard of the app, user can navigate to any of these using the Navigation bar accessible from these pages.

Navigation bar has a subtle animation to improve the UX of the app:

![Navigation bar animation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i9gfhrmw41fstc84ofd0.gif)
 

## Project Description

In this project, three of the major Appwrite APIs are used:

* [Account API](https://appwrite.io/docs/client/account?sdk=flutter-default): Used for implementing user authentication and user data management.
* [Database API](https://appwrite.io/docs/client/database?sdk=flutter-default): Used for storing app data related to stories and chapters.
* [Storage API](https://appwrite.io/docs/client/storage?sdk=flutter-default): Used for storing the Rich Text story file in JSON format.

The Flutter plugins used:

* [appwrite](https://pub.dev/packages/appwrite)
* [flutter_quill](https://pub.dev/packages/flutter_quill)
* [path_provider](https://pub.dev/packages/path_provider)
* [shared_preferences](https://pub.dev/packages/shared_preferences)
* [google_nav_bar](https://pub.dev/packages/google_nav_bar)
* [tuple](https://pub.dev/packages/tuple)

The Appwrite console view:

![Appwrite console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ad3qe3pp5l8lqhtw5icy.png)

Two databases are used for this project: (1) stories, and (2) chapters.

![Appwrite database](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j1dpqo8693s5f8by2yvs.png)

Stories database documents preview:

![Stories database](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gsgqkt7j8vxrodvz0ubf.png)

Stories database attributes:

![Stories database attributes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6e7o3u6vib5gop3wf15e.png)

Chapters database attributes:

![Chapters database attributes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4c5f1t0ii4qi4vlde7d1.png)

The files storage preview (the chapters are stored as JSON rich text files):

![File storage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6vna78behcy1p3sjf7d0.png)

### References

* [Appwrite Docs](https://appwrite.io/docs)
* [Appwrite Flutter package](https://pub.dev/packages/appwrite)