Intro

So today I am going to show you how to create an app like Instagram. In this app you can find Image Upload, My Account with Bio and Image Wall where all the Images will be shown after an user upload a image. All images will be stored in Cloudinary Database and all data will be stored in Airtable Spreadsheet. So first of all create a simple splash screen.

Screen 1

Design

Just drag your own logo and a Circular Progress Bar to create the splash, I already posted how can you create a splash screen, so if you don’t know how to do that then check that tutorial before. Drag a TinyDB and Clock with Timer 3000ms and set Timer Enabled to True.

Tiny DB will help to store some local datas and that’s how app will know that the user already logged in or not.

Blocks

the “id” tag will be store with a value after an user register or log in to this app

Signup Screen

Design

In this screen you have to create a signup form. I already told you how to create a signup page using Firebase Authentication, if you don’t know how to create then check that post before.

So just you need 4 fields, one for Name, one for Email, one for Username and one for Password, after that drag a Signup button. Drag 2 Firebase Database and 1 Firebase Authentication. Note that Firebase Authentication needs google-services.json file, so upload that to Kodular. If you don’t know the process then check out that tutorial first. Drag a TinyDB and a Notifier

Blocks

Here a Firebase Database will work to find Username already exist or not

after Firebase got value, if username already exist then it will show the notice and if the username is new one then it will go for signup using Email and Password using Firebase Authentication

after Sign Up success, Firebase DB will store all data and TinyDB will store some required data and if signup failed then it will show a notice

Login Screen

Design

In login screen just need 2 fields, one for email and one for password. Drag one Firebase Database, one Firebase Authentication,one TinyDB and two Notifiers

Blocks

when login button click it will validate the email and password and if it is wrong input then it will show a notice

after login succeed it will save some required data to TinyDB and also TinyDB needs Username so it will call Firebase to get Username of this user

after got value it will store username to the TinyDB as “user” tag and go to Home screen

Home Screen

Design

In home screen drag a Vertical Scroll Arrangement and also drag a Bottom Navigation where I added three menus Home, Upload and Account. Drag four Airtable Spreadsheet, one Notifier and one Card View. You can download Card View extension from here.

Now see how to create columns in Airtable

the data I already inserted via app

See the Screen Design

Blocks

when a Screen Initialize then Bottom Sheet will add items in all screens. Then it will call Airtable

now it will start calling and getting all columns to show images on Home Screen, also you need global variables to get values

when last column got values then it will call Card View Type 1

Upload Screen

Design

In Upload screen you have to show all available jpg image files from you Phone so I will use Colintree ListView and Taifun File for that. I have created a simple upload screen, where it has one Select File button, when this button will click then an invisible vertical scroll arrangement will opens, where all available files will be show, after a file selected then the scroll arrangement will invisible again and an Upload Now button will be visible to upload the file and also a description box to describe what the post about. Drag TinyDB, two Notifires, Cloudinary, Clock (disable Timer enable and Timer always fires) and an Airtable.

Don’t forgot to set Clodinary Cloud name API Key and Secret Key, which you will easily get from Cloudinary website home page

Blocks

Here I am not showing the Bottom Navigation blocks, starting from Taifun FileAsync

Account Screen

Design

Here only User’ Name, username, email and bio will be visible. So I have created a simple interface and call all data from Firebase Database. So drag TinyDB, Notifier and Firebase Database

And also their will be an invisible arrangement where a TextBox and a Button willbe visible. An user can edit their current bio from it

Blocks

after bottom sheet navigation added it will call Firebase DB to get values

AIA File

Video Tutorial