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 ----------|

|--------- Share post --------- |--------- Videos page ---------|---- personal profile page ---|

|---- Change app theme -----|------- Logout & Login --------|-- Change app language -- |

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

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

|-------- Create video ---------|---- Show created video -----|---- share created video -----|

|----------- 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

.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.

What's Next?

[x] Notifications for likes, comments, follows, etc
[x] Caching of Profiles, Images, Etc.
[x] Calling video and voice in chat
[x] Create a group chat
[x] Calling video and voice in group chat
[x] Send posts to chats
[x] control in the dimension of selected images & video from the gallery
[x] Custom gallery display
[x] Improve display loading of posts when opening the app
[x] share post
[x] Make like, comment, and share of animation container post touchy when long pressed on post
[x] Make it stable for the web
[ ] Clean up more code

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

Best android open-source packages and libraries.

Flutter clean architecture instagram