flutter-clean-architecture-instagram

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

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.

Features

• Support

  • Arabic & English language
  • Dark & Light theme

• Post features

  • Support images & videos
  • Support multi images in one post
  • Like on a post
    • View all likes on a post and their profiles
  • Comment on a post
    • View all comments on a post
    • Replay on a comment & replay
    • Like on a comment & replay
      • View all likes on a comment & replay & 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
  • Support
    • Text
    • Image (gallery & camera)
    • Voice

New features

• Push Notificaitons
• Calling video in chat
• Send post to chats

SnapShots

|--------- Login page ----------|----------- Stories ------------|---------- List of posts ------- |

|----- Likes & Comment ------|-------- Edit the post ---------|--- All user timeline posts --- |

|----- Search about user -----|--------- Videos page ---------|---- personal profile page --- |

|----- Edit personal info ------|-- Selecting image for post --|-- Selecting image for story - |

|---- Change app theme -----|--- Change app language ----| Chatting with bottom video |

|-- Chatting with top video --|

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?

• [x] Notifications for likes, comments, follows, etc
• [ ] Caching of Profiles, Images, Etc.
• [x] Calling video and voice in chat
• [ ] Add stickers on chat
• [x] Send posts to chats
• [x] control in the dimension of selected image & video from the gallery
• [x] Custom gallery display
• [ ] Filters support for images
• [x] Improve display loading of posts when opening the app
• [ ] Like & comment on story
• [ ] Delete the story
• [ ] Turn off commenting on a post
• [ ] Hide Like count of a post
• [ ] Archive a post
• [x] share post
• [ ] Live support
• [x] Make like, comment, and share of animation container post touchy when long pressed on post
• [ ] Create store screens
• [ ] Make it stable for web & desktop
• [ ] 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

Contact

You will find me on

License & Copyright

Copyright (c) 2022 Ahmed Abdo