flutter-clean-architecture-instagram

Instagram clean architecture using Flutter and Firebase ( frontend & backend ) with almost all functionalities

If you want to work with me, you can find me here:

Notes

I didn’t publish the keys such as messaging, agora, firebase web, or even google-services.json. So follow the steps (3. Setup the app) to add them.
Right now, I am working on cleaning up the code and web version

Features

Support
- Arabic & English language
- Dark & Light theme
Custom gallery & camera & video display like Instagram “my package” image picker plus
Post features
- Support images & videos
- Support multi images in one post or mixin with them
- Like on a post and view all like with their profiles
- Comment on a post and replay on a (comment & replay)
  - Like on a comment & replay and view all like with their profiles
- Edit post
- Delete post
- Unfollow the user of the post
My Timelines Screen
- Custom posts & stories feed based on followers & followings
- Refresh the posts info
- Loading more posts (it displays five-by-five posts)
All Timelines Screen
- View all user’s posts (images & videos)
- Change the screen from a grid layout to a timeline layout
Search for a user based on username
Video Screen
- It displays all user’s videos with almost post features
- Control of sound & play
Profile Screen
- Follow / Unfollow Users
- Display images & videos in a separate view
- Change the screen from a grid layout to a timeline layout
- Edit profile info
Chat Screen
- Chat with any user
- Group chat
- Support
  - Text
  - Image (gallery & camera)
  - Voice
  - One-to-one video call
  - Group video call
Push Notifications
Send posts to chats

SnapShots for web

You can see the screen record from here google drive

SnapShots

|——— Sign page ———-|——- Welcome page ——–|————– Stories ———-|

|——– Home screen ——–|—— Comment screen ——|——– Create story ———-|

|—— Following users ——-|—– Unfollow all users ——|—- Change profile image —-|

|—– All users time line ——|—– Search about user ——|———- Create post ——- |

|———– Edit post ———-|——– Notifications ———|——– Activity page ——–|

|————————— Chatting —————————-|

|————————– Video call —————————|

Getting started

1. Setup Flutter

2. Clone the repo

$ git clone https://github.com/AhmedAbdoElhawary/flutter-clean-architecture-instagram
$ cd flutter-clean-architecture-instagram/

3. Setup the app

I made the setup with more details and visuals to make it easy for any level to set up the app.

Click to expand

<!DOCTYPE html>

.Connection with Firebase

Run this line in your PowerShell as administrator:

Set-ExecutionPolicy RemoteSigned

Then, press y to comfirm

We need to log in with Firebase. Run this line:

firebase login

Then, press y to comfirm
Then, choose the account that you want to create Firebase services with it.
Then, press Allow

In PowerShell, write the disk that the project is exciting. For example, I have InstaAwesome in D. So, I will write it Like this:

d:

Add the following line, replacing <path-to-project-root> with the path to the project root:

cd <path-to-project-root>

Then, run this line:

dart pub global activate flutterfire_cli

Then, run this line:

flutterfire configure

Select Create a new project and press enter
Write project name with this format my-cool-project
Select android, ios, and web. dis select macos right now, And press Enter

Enable Firebase services

Enable those services: Authentication, Firestor Database, Storage, and Messaging. And take the ‘Cloud Messaging server key’ copy from ‘Cloud Messaging’ in ‘Project settings’.

Enable Email/Password in Authentication:
Enable Firestor Database:

Change allow read, write: if false; to allow read, write: if true;

Enable Storage the same as Firebase Database:
Enable Messaging
Enable Messaging Server key

Take the server key copy:
Then, past the key in the project lib\core\utility\private_keys.dart in notificationKey after = like this:

.Connection with Agora

Agora is a real-time communication platform that provides a set of APIs and SDKs for adding voice↳

Step 1: Create an Agora Account and Get a Test Key

Before we can connect our Flutter app with Agora, we need to create an Agora account and get a test key. Here are the steps to get an Agora test key:

Go to the Agora website and sign up for an account.
After you have signed up, log in to the Agora Project Management with your account credentials.
Click on the “Create a Project”
Enter a name for your project and select any Use Case.
Select Testing mode: APP ID
Press Sumbit
Take App ID copy
Past it in agoraAppId variable.

Congratulations! The project is ready.

</div>

What’s Next?

How to Contribute

Fork the project
Create your feature branch (git checkout -b my-new-feature)
Make required changes and commit (git commit -am ‘Add some feature’)
Push to the branch (git push origin my-new-feature)
Create a new Pull Request

This site is open source. Improve this page.