Home

Awesome

<p align="center"> <a href="https://flutter.dev" target="_blank"><img height="39" src="https://upload.wikimedia.org/wikipedia/commons/1/17/Google-flutter-logo.png" alt="Flutter Logo"></a> <a>&nbsp;&nbsp;&nbsp;</a> <a href="https://appwrite.io" target="_blank"><img width="260" height="39" src="https://appwrite.io/assets/logotype/white.svg" alt="Appwrite Logo"></a> </p>

NO Signal

A functional replica of Signal (chatting app) made using Flutter and Appwrite. To know more about it - how it was built and how it works, I have written some detailed blogs on it. Know more about it here: Part 1 | Part 2 | Part 3.

What is Appwrite?

Appwrite is a self-hosted solution that provides developers with a set of easy-to-use and integrate REST APIs to manage their core backend needs.

Features

Installation

Appwrite

Appwrite backend server is designed to run in a container environment. Running your server is as easy as running one command from your terminal. You can either run Appwrite on your localhost using docker-compose or on any other container orchestration tool like Kubernetes, Docker Swarm or Rancher.

The easiest way to start running your Appwrite server is by running our docker-compose file. Before running the installation command make sure you have Docker installed on your machine:

Unix

docker run -it --rm \
    --volume /var/run/docker.sock:/var/run/docker.sock \
    --volume "$(pwd)"/appwrite:/usr/src/code/appwrite:rw \
    --entrypoint="install" \
    appwrite/appwrite:1.1.1

Windows

CMD

docker run -it --rm ^
    --volume //var/run/docker.sock:/var/run/docker.sock ^
    --volume "%cd%"/appwrite:/usr/src/code/appwrite:rw ^
    --entrypoint="install" ^
    appwrite/appwrite:1.1.1

PowerShell

docker run -it --rm ,
    --volume /var/run/docker.sock:/var/run/docker.sock ,
    --volume ${pwd}/appwrite:/usr/src/code/appwrite:rw ,
    --entrypoint="install" ,
    appwrite/appwrite:1.1.1

Once the Docker installation completes, go to http://localhost to access the Appwrite console from your browser. Please note that on non-linux native hosts, the server might take a few minutes to start after installation completes.

For advanced production and custom installation, check out our Docker environment variables docs. You can also use our public docker-compose.yml file to manually set up and environment.

Setting up appwrite project

Flutter

To build and run this project:

  1. Get Flutter here if you don't already have it
  2. Clone this repository
  3. cd into the repo folder
  4. Run flutter pub get to get the dependencies
  5. Run flutter run-android or flutter run-ios to build the app

(Please note that a Mac with XCode is required to build for iOS)

Appwrite

To setup your Appwrite project:

  1. Open your browser and go to your http://localhost
  2. Create your account and login.
  3. Click on Create Project.
  4. Enter a Name and custom Project ID for your project and click create.

At this moment your Dashboard is ready to use.

Setup Project Dashboard

We need to setup some collections and need to define its attributes so our app will be ready to use.

There are two ways of doing this. First, manually creating a collection from the dashboard and defining the attributes.

Secondly, I have a created a program which does that work for you. All you need is create an API key with all the permissions and replace it in the setup_appwrite.dart files.

Open your terminal in the project folder and run the following commands to setup the User Collection . Make sure to replace all the neccessary fields left blank.

cd lib/utils
dart setup_appwrite.dart

Also in utils folder create a file called api.dart to store all your details in the following way:

class ApiInfo {
  ApiInfo._();
  static const String url = "http://localhost/v1";
  static const String projectId = "[PROJECT_ID]";
  static const String secretKey = "[SECRET_KEY]"; // You can get this from your Appwrite dashboard
  static const String databaseId = "[YOUR_DATABASE_ID]";
  static const String userCollectionId = '[USER_COLLECTION_ID]';
  static const String storagebucketId = '[STORAGE_BUCKET_ID]';
}
}

Now your Project is ready to run.

File Structure

.
├── android # android files
├── assets # assets 
│   ├── images
│   └── lottieassets       
├── ios # android files
└── lib
    ├── api 
    │   ├── auth # Client Authentication
    │   └── database # Database API
    ├── models # Custom Models
    ├── pages
    │   ├── chat
    │   ├── error
    │   ├── home
    │   ├── loading
    │   ├── login
    │   └── settings
    ├── providers 
    ├── utils # Misc tools and stuffs
    └── widgets

App Flow

app flow

Chat architecture

chat arch

Screenshots

<img src = ".github\assets\Screenshot_1645287465.png" height = "500"><img src = ".github\assets\Screenshot_1645287474.png" height = "500"><img src = ".github\assets\Screenshot_1645287479.png" height = "500">
<img src = ".github\assets\Screenshot_1645287485.png" height = "500"><img src = ".github\assets\Screenshot_1645287488.png" height = "500"><img src = ".github\assets\Screenshot_1645287604.png" height = "500">
<img src = ".github\assets\Screenshot_1645287611.png" height = "500"><img src = ".github\assets\Screenshot_1645287619.png" height = "500"><img src = ".github\assets\Screenshot_1645287627.png" height = "500">

Contributors ✨

Thanks goes to these wonderful people (emoji key):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> <!-- prettier-ignore-start --> <!-- markdownlint-disable --> <table> <tr> <td align="center"><a href="https://github.com/kekavc24"><img src="https://avatars.githubusercontent.com/u/68240897?v=4?s=100" width="100px;" alt=""/><br /><sub><b>kelvin kavisi</b></sub></a><br /><a href="https://github.com/2002Bishwajeet/no_signal/commits?author=kekavc24" title="Code">💻</a> <a href="https://github.com/2002Bishwajeet/no_signal/commits?author=kekavc24" title="Documentation">📖</a></td> </tr> </table> <!-- markdownlint-restore --> <!-- prettier-ignore-end --> <!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the all-contributors specification. Contributions of any kind welcome!