Introduction Last updated: 2024-04-04

It's complete photo sharing app with admin panel. Users can add post image, video and reels in the app. Users can tags each other and many more features.

PHP Laravel is a web application framework with expressive, elegant syntax. Weʼve already laid the foundation freeing you to create without sweating the small things. The Laravel framework has a few system requirements. Of course, all of these requirements are satisfied by the Laravel Homestead virtual machine, so it's highly recommended that you use Homestead as your local development environment.

If you want any customize or full complete setup fron our side then you can connect with us on our email info@primocys.com

Warning

To ensure the proper functioning of the app, it is essential to complete the setup of the admin panel before proceeding. Attempting to run the app without establishing the backend will result in its failure to work.

Upload On Server

You can download our code from here after purchase(Codecanyon Using this link).

Add folder to a ZIP

You should find the folder named /snapta-admin-panel zip it and after you sign in to your hosting account in the left bar click advanced. and use the file manager to upload this file inside your /public_html folder.

Extract the ZIP file

Click right on your uploaded zip file and choose extract , you should get the following files in your file manager.

Create Database

Go to MySQL Databases to create a new database, for example, qirp and new user and assign this database to the user created (remember the password used in this step we will use it in the installation step.)

How to Create a Database?

In the New Database text box, enter a name for the database.

Note

If your hosting provider has enabled database prefixing, a prefix based on your account username and underscore character ( _ ) will precede the New Database text box. The system automatically prepends this prefix to the database name.

Click Create Database. A new interface will appear.

Click Go Back. The new database appears in the Current Database table.

How to Add a MySQL user?

After you create a database, add users to the database and configure their privileges.

Note

You must create MySQL user accounts separately from mail and web administrator accounts. You must create a user before you can add the user to an existing database. To create a new user account, perform the following steps:

Enter a username in the Username text box.

Enter and confirm the new password in the appropriate text boxes.

Note

The system evaluates the password that you enter on a scale of 100 points. 0 indicates a weak password, while 100 indicates a very secure password. Some web hosts require a minimum password strength. A green Strength meter indicates that the password is equal to or greater than the required password strength. Click Password Generator to generate a strong password. For more information, read our Password & Security documentation.

Click Create User.

Click Go Back to return to the main interface.

How to Add a user to a database??

To add a user to a database, perform the following steps:

In the Add User To Database section of the interface, select the desired user and database from the menus. Click Add. The MySQL Account Maintenance interface will appear.

Select the checkboxes that correspond to the privileges that you wish to grant to the user.

Note

To grant all of the available privileges to the user, select the ALL PRIVILEGES checkbox.

Click Make Changes.

Click Go Back to return to the main interface.

Configure Database

You should get the following fileenv.

Add your own Mysql database name,username, password.

Configure URL

You should get the following file env.

Change Base URL with your Domain or Subdomain name.

Update

Note

If you install the project for the first time skip this step.

Download the new version from Codecanyon Here and extract the files in the folder /Update to vXXX.

Add the content of this folder  Update to /Snapta_1.0.5  to a Zip file, upload it to your primary folder in your hosting /public_html

Extract this zip file and overwrite all files.

Warning

We aren't responsible if you loose your customization or your data, please do those steps be carefully.

Introduction

Mobile app developed using a flutter framework created by Google is open-source mobile application development. It is used to develop applications for Android and iOS, as well as being the primary method of creating applications.

Requirements

To edit this project you must have Flutter and Dart installed and configured successfully on your device Install flutter
Set up your editor Install the Flutter and Dart plugins

Flutter Configuration

1 - Download and unzip the Flutter App, use your preferred IDE (Android Studio / Visual Code / IntelliJ) to open the project.

2 - Open \lib\global\global.dart and edit the remote link to connect your mobile app with your admin panel.

							
static const String baseUrl = 'http://yourdomain.com/api/';

						

Important

  • These URLs must end with a slash  '/' 

Changing The App's Name

3 - To change app name, In the main directory go to the \android\app\src\main\AndroidManifest.xml

							
android:label="Your_APP_Name"
						

Note

You can change app name directly from admin panel on splash, login, singup screens.

Changing The App's Logo

Note

You can change app logo directly from admin panel on splash, login, singup screens.

Note

This logo used in the splash screen, Login, Singup, Forot Password Pages, not in the app icon.

5 - Create your own Google Maps API key at https://cloud.google.com/maps-platform/.

Android Configuration

Get Dependencies

And just run the following command

Changing The App's Icons

1 - Create your app icon and notification icon folders How to generate an app icon? after you generate icons folder replace the following folders,

For Android:

snapta_flutter\android\app\src\main\res and replace these are all folders which generated from appicon website.

For iOS:

snapta_flutter\ios\Runner\Assets.xcassets\AppIcon.appiconset and replace this folder which generated from appicon website.

2- Execute command on the terminal to Create app icons:

Change Package Name

If you want to change the package name following the next steps

1 - Open /android/app/build.gradle and change the package name

							
defaultConfig {
        // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
        applicationId "YOUR PACKAGE NAME" // this is the package name
        minSdkVersion 21
        targetSdkVersion 28
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
        multiDexEnabled true
    }
  
						

2- Open /android/app/src/main/AndroidManifest.xml , /android/app/src/profil/AndroidManifest.xml, /android/app/src/debug/AndroidManifest.xml and specify your:

  • YOUR PACKAGE NAME
  • YOUR APPLICATION NAME
  • YOUR GOOGLE MAPS KEY
							
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="<YOUR PACKAGE NAME>">

    <uses-permission android:name="android.permission.INTERNET"/>

    <!-- io.flutter.app.FlutterApplication is an android.app.Application that
         calls FlutterMain.startInitialization(this); in its onCreate method.
         In most cases you can leave this as-is, but you if you want to provide
         additional functionality it is fine to subclass or reimplement
         FlutterApplication and put your custom class here. -->
    <application
        android:name="io.flutter.app.FlutterApplication"
        android:label="<YOUR APPLICATION NAME>"
        android:icon="@mipmap/ic_launcher">

        <meta-data android:name="com.google.android.geo.API_KEY"
                   android:value="<YOUR GOOGLE MAPS KEY>"/>

3 - Open /android/app/src/main/kotlin/<Your Package name folders>/MainActivity.kt and change the package name

4- Copy the generated google-service.json file in /android/app/ folder, you can see this video tutorial How to configure push notifications?

iOS Configuration

1 - Download and unzip the Flutter App, use your preferred IDE (Android Studio / Visual Code / IntelliJ) to open the project.

Get Dependencies

And just run the following command

3- Open terminal and open iOS folder path(cd /ios) in terminal and install PODs on your project with below commands.

Push Notification

To integrate your plugin into the iOS part of your app, follow these steps:

  • 1. Generate the certificates required by Apple for receiving push notifications following this guide in the Firebase docs. You can skip the section titled "Create the Provisioning Profile".
  • 2. Using the Firebase Console add an iOS app to your project: Follow the assistant, download the generated GoogleService-Info.plist file, open ios/Runner.xcworkspace with Xcode, and within Xcode place the file inside ios/Runner. Don't follow the steps named "Add Firebase SDK" and "Add initialization code" in the Firebase assistant.
  • 3. In Xcode, select Runner in the Project Navigator. In the Capabilities Tab turn on Push Notifications and Background Modes, and enable Background fetch and Remote notifications under Background Modes.
  • 4. Follow the steps in the "Upload your APNs certificate" section of the Firebase docs.
  • 5. If you need to disable the method swizzling done by the FCM iOS SDK (e.g. so that you can use this plugin with other notification plugins) then add the following to your application's Info.plist file.
  • <key>FirebaseAppDelegateProxyEnabled</key>
    <false/>
    

Google Maps Key

Specify your API key in the application delegate ios/Runner/AppDelegate.m:


#include "AppDelegate.h"
#include "GeneratedPluginRegistrant.h"
#import "GoogleMaps/GoogleMaps.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GMSServices provideAPIKey:@"YOUR KEY HERE"];
  [GeneratedPluginRegistrant registerWithRegistry:self];
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
@end

4- Now Open iOS folder and open Runner.xcworkspace with Xcode.Run your project with simulators. That’s done.

Update

Note

If you install the project for the first time skip this step.

Download the new version from Codecanyon Here and extract the files in the folder /Update to vXXX.

Add the content of this folder  Update to /snapta_flutter  to a Zip file, update assets, lib and pubspec.yaml /flutter_application

Extract this zip file and overwrite all files.

Warning

We aren't responsible if you loose your customization or your data, please do those steps be carefully.

Firebase Intergrations

Creating A New Firebase Project

We are creating the sample project.

After completing the project, you will be presented with this type of dashboard.

Adding App With The Package Name In Firebase Console.

  • Enter Package Name(e.g com.primocys.example) and click on register app

  • After registering the app, you will receive the google-services.json file; download it and save it to the android/app/ folder

Adding IOS App With The Package Name In Firebase Console.

  • On the Firebase console, click the IOS icon.

  • On the Firebase console, click the IOS icon.

  • After registering the app, you will receive the GoogleService-Info.plist file; download it and drag and drop to xcode as location shown in image

Firebase Authentication

  • Go to Build->Authentication tab and click on Get started

  • Then Select the Email/Password, Google, one by one and Enable it.

Note

Qirp app have email/password and gmail trough the login so we enable only two option but you can add mobile otp, apple through singin custom features too.

  • Re-check if selected modes of authentication are enabled or not..

Activate Firestore Database

  • Go to Build->Firestore Database tab and click on Get Started

  • When you click the Get Started button, a dialogue will appear asking you to choose a mode, because we are testing, we will select the Start in Test Mode option and then click Next and then Enable it.

  • Change the firestore’s rules to save the data in a database.

SHA Fingerprint

Important

SHA-1 fingerprint is a unique key generated for your PC that can be used for signing. It is important to have in the add firebase as we are using Google Login and OTP Login and to authorize this logins we need a SHA Fingerprint cerificate.

Add a SHA fingerprint to Firebase

Follow these steps if you didn’t initially provide a SHA certificate fingerprint for your Firebase Android app or if you need to add an additional one.

  • 1 - In your Project settings, go to the Your apps card.

  • 2 - Select the Firebase Android app to which you want to add a SHA fingerprint.

  • 3 - Click Add fingerprint.

  • 4 - Enter or paste the SHA fingerprint, then click Save.

  • 5 - Recheck or edit added SHA fingerprint. As you can add multiple SHA1 and SHA256.

How to generate the and SHA from Visual Studio

It's very simple follow below steps.

  • 1 - Go to your project directory in VS code.
  • 2 - Open terminal.

  • 3 - Run cd android for the below path.

Example

\qirp> cd android

  • 3 - Run .\gradlew signingReport for the below path:

Examle

D:\Workspace\FlutterWorkSpace\FlutterApp\qirp\android> .\gradlew signingReport

Then it will display like that.

Run & Build

We provided steps in above for how to configure android, how to add firebase

Next step, run app in your simulator or device.

Run Android Application

If you don't use Visual Studio you can use the command line to run your application using the following command.

Andorid Build and Install App

  • 1 - After you make all your changes and customizations save all your project, Open the console, navigate to your project folder and execute the following command to build your app

If you are deploying the app to the Play Store, it's recommended to use app bundles or split the APK to reduce the APK size.

To generate an app bundle, run:

App Signing

To publish on the Play Store, you need to give your app a digital signature. Use the following instructions to sign your app.

On Android, there are two signing keys: deployment and upload. The end-users download the .apk signed with the ‘deployment key’. An ‘upload key’ is used to authenticate the .aab / .apk uploaded by developers onto the Play Store and is re-signed with the deployment key once in the Play Store.

Create an upload keystore

1- If you want to upload your application on Google Play you must sign it before uploading, generate a signing key by running the following command:

On macOS or Linux, use the following command:

On Windows, use the following command in PowerShell:

Important

This command stores the upload-keystore.jks file in your home directory. If you want to store it elsewhere, change the argument you pass to the -keystore parameter. However, keep the keystore file private; don’t check it into public source control!

Reference the keystore from the app

1- Open /android/key.properties and edit the following attributes after that re-build your application:

							
							
storePassword=password-from-previous-step
keyPassword=password-from-previous-step
keyAlias=upload
storeFile=keystore-file-location
  							
						

The storeFile might be located at /Users/username/upload-keystore.jks on macOS or C:\\Users\\username\\upload-keystore.jks on Windows.

Warning

Keep the key.properties file private; don’t check it into public source control.

Configure signing in gradle

Configure gradle to use your upload key when building your app in release mode by editing the [project]/android/app/build.gradle file.

  • 1 - Add the keystore information from your properties file before the android block:

    							
    									
    def keystoreProperties = new Properties()
    def keystorePropertiesFile = rootProject.file('key.properties')
    if (keystorePropertiesFile.exists()) {
       keystoreProperties.load(new FileInputStream(keystorePropertiesFile))
    }
    
    android {
         ...
    }
    		  							
    								

    Load the key.properties file into the keystoreProperties object.

  • 2 - Find the buildTypes block:

    							
    									
    buildTypes {
       release {
           // TODO: Add your own signing config for the release build.
           // Signing with the debug keys for now,
           // so `flutter run --release` works.
           signingConfig signingConfigs.debug
       }
    }
    
    		  							
    								

    Load the key.properties file into the keystoreProperties object.

  • And replace it with the following signing configuration info:

    							
    									
    signingConfigs {
       release {
           keyAlias keystoreProperties['keyAlias']
           keyPassword keystoreProperties['keyPassword']
           storeFile keystoreProperties['storeFile'] ? file(keystoreProperties['storeFile']) : null
           storePassword keystoreProperties['storePassword']
       }
    }
    buildTypes {
       release {
           signingConfig signingConfigs.release
       }
    }
    
    		  							
    								

Release builds of your app will now be signed automatically.

Warning

You might need to run flutter clean after changing the gradle file. This prevents cached builds from affecting the signing process.

For more information on signing your app, check out Sign your app on developer.android.com.

Run iOS Application

Open the root-folder on your terminal and run

Open the root-folder/ios folder in terminal and run, follow above steps of iOS cofigration point #3

After that, you should get the POD on your project. Chose a simulator and run your app

Change Log

You can find our here all latest and old change log for app and admin panel.

Snapta Flutter app

V1.0.5

02/04/2024

  • Flutter Latest Version Update 3.19.x
  • New Admin Panel feature and design
  • Video Reels
  • Video Reels Like and Comments
  • Audio Call
  • Video Call
  • Audio and Video Call pickup screen
  • Call history
  • Push Notification for Call
  • Delete Account
  • Gallary Pickup Same like instagram
  • Multiple Tags in Post

V1.0.4

22/11/2022

  • Flutter Latest Version Update
  • New Admin Panel feature and design
  • Login with apple
  • Report to another user account
  • User can delete the account

V1.0.3

21/09/2022

  • Flutter Version Update
  • PHP update

V1.0.2

16/02/2022

  • Report Post
  • Hide Post
  • Block Users

V1.0.1

20/01/2022

  • Report Post
  • Hide Post
  • Block Users

V1.0.0

31/12/2021

  • Intial Instagram clone app version<

Snapta PHP Laravel Admin Panel

V1.0.1

20/01/2022

  • Report Post
  • Hide Post
  • Block Users

V1.0.0

31/12/2021

  • Intial Instagram clone app version<