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
- Host: GitHub
- URL: https://github.com/ahmedabdoelhawary/flutter-clean-architecture-instagram
- Owner: AhmedAbdoElhawary
- License: cc-by-sa-4.0
- Created: 2022-03-03T21:56:30.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-11-11T05:33:01.000Z (almost 2 years ago)
- Last Synced: 2025-04-30T20:32:32.272Z (5 months ago)
- Topics: 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
- Language: Dart
- Homepage:
- Size: 304 MB
- Stars: 279
- Watchers: 11
- Forks: 77
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
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
- 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
, andweb
. dis selectmacos
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’.
-
-
Then, past the key in the project
lib\core\utility\private_keys.dart
innotificationKey
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
-
-
-
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
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