gabrielscr / flutter-clean-architecture-instagram

Instagram with clean architecture using flutter and firebase. almost include all functions on Instagram

flutter-clean-architecture-instagram

Instagram clean architecture using flutter and firebase as ( frontend & backend ) with almost all functionalities

Contact

You will find me on

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 likes with their profiles
  • Comment on a post and replay on a (comment & replay)
    • Like on a comment & replay and view all likes 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 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 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 post to chats

SnapShots for web/desktop

You see it 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

. Setup the firebase services

1. You'll need to create a Firebase instance. Follow the instructions at https://console.firebase.google.com.
2. Once your Firebase instance is created, you'll need to enable Email/Password authentication.

• Go to the Firebase Console for your new instance.
• Click "Authentication" in the left-hand menu
• Click the "sign-in method" tab
• Click "Email/Password" and enable it

4. Enable the Cloud Firestore

• Go to the Firebase Console
• Click "Firebase Database" in the left-hand menu
• Click on the "Create Database" button
• Select "Start in production mode" and "Enable"

5. Enable the Firebase Storage

• Go to the Firebase Console
• Click "Storage" in the left-hand menu
• Click on the "Create Storage" button
• Select "Start in production mode" and "Enable"

6. Add a Flutter app with firebase

• Recently google add to the firebase method to connect with your flutter app directly without making android and ios separately.
• Click "Project Overview" in the left-hand menu
• Click on the flutter icon button
• Just follow the steps carefully
• When you run flutterfire configure --project=^project name^ support android, ios, and web

5. Enable the Firebase Messaging

• Go to the Firebase Console
• Click "Messaging" in the left-hand menu
• Click on the android icon button
• Click on create your first campaign
• Now go to project settings and cloud Messaging and copy the server key in Cloud Messaging API
• Search for notificationKey in this project by a tap on control+shift+f in the IDE and set the server key as a string like this "key=^server key^"

. Setup agora

• Go to https://www.agora.io/en/ and sign in

• Go to console by clicking on the account icon

• Click on Project Management in the left-hand menu

• Click on Create New Project

• Now the most important step in the agora

  • Select "Testing mode: APP ID" not "secured mode" (if you select secured mode, It will be one channel available and you can't make another one in your app. in other words you can't make a private channel between two users or more, all users that use your app will go to the same calling room)

• Set project name and Social/Chatroom in Use Case and click on submit

• Click on config on the project and copy App ID

• Search about agoraAppId in this project by a tap on control+shift+f in the IDE and set the App ID as a string

What's Next?

• Notifications for likes, comments, follows, etc
• Caching of Profiles, Images, Etc.
• Calling video and voice in chat
• Create group chat
• Calling video and voice in group chat
• Send posts to chats
• control in the dimension of selected image & 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 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