An open API service indexing awesome lists of open source software.

https://github.com/ahmedabdoelhawary/flutter-clean-architecture-instagram

Instagram with clean architecture using flutter and firebase. almost include all functions on Instagram
https://github.com/ahmedabdoelhawary/flutter-clean-architecture-instagram

android awesome-animation bloc clean-architecture clean-code cross-platform cubit dart flutter flutter-apps flutter-examples flutter-ui instagram instagram-clone instagram-feed instagram-photos instagram-stories ios social-media state-management

Last synced: 3 months ago
JSON representation

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

Awesome Lists containing this project

README

          

# 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 ](https://github.com/AhmedAbdoElhawary/image_picker_plus.git)

* 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](https://drive.google.com/file/d/11LyKgpP4kvnP1yLgykwpPj1t7euEFJjK/view?usp=sharing)







## 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](https://flutter.io/setup/)

#### 2. Clone the repo

```sh
$ 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



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



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



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


cd <path-to-project-root>



  1. Then, run this line:


dart pub global activate flutterfire_cli



  1. Then, run this line:


flutterfire configure




  • Select Create a new project and press enter

    Screenshot-91




  • Write project name with this format my-cool-project

    Screenshot-92




  • Select android, ios, and web. dis select macos right now, And press Enter

    Screenshot-93




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:

    Screenshot-94

    Screenshot-95

    Screenshot-98




  2. Enable Firestor Database:

    Screenshot-99

    Screenshot-100

    Screenshot-101





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

    Screenshot-102

    Screenshot-103




  1. Enable Storage the same as Firebase Database:

    Screenshot-104

    Screenshot-105

    Screenshot-106




  2. Enable Messaging

    Screenshot-107

    Screenshot-108

    Screenshot-110

    Screenshot-111

    Screenshot-112




  3. Enable Messaging Server key

    Screenshot-109

    Screenshot-114

    Screenshot-115






  • Take the server key copy:

    Screenshot-118




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

    Screenshot-123




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

    Screenshot-124




  3. Click on the “Create a Project”

    Screenshot-125




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




  5. Select Testing mode: APP ID




  6. Press Sumbit

    Screenshot-126




  7. Take App ID copy

    Screenshot-127




  8. Past it in agoraAppId variable.

    Screenshot-128




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