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

1. Run this line in your PowerShell as administrator:

Set-ExecutionPolicy RemoteSigned 

• Then, press y to comfirm

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

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

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

cd <path-to-project-root>

5. Then, run this line:

dart pub global activate flutterfire_cli

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

1. Enable Email/Password in Authentication:
   
   
   

2. Enable Firestor Database:
   
   
   

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

3. Enable Storage the same as Firebase Database:
   
   
   

4. Enable Messaging
   
   
   
   
   

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

1. Go to the Agora website and sign up for an account.

2. After you have signed up, log in to the Agora Project Management with your account credentials.
   

3. Click on the “Create a Project”
   

4. Enter a name for your project and select any Use Case.

5. Select Testing mode: APP ID

6. Press Sumbit
   

7. Take App ID copy
   

8. Past it in agoraAppId variable.
   

Congratulations! The project is ready.

What's Next?

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

How to Contribute

1. Fork the project
2. Create your feature branch (git checkout -b my-new-feature)
3. Make required changes and commit (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create a new Pull Request