4.1 App Screen 1 (UI + Backend integration)

So this week’s first task was to complete the first app screen with backend integration. Hasura provides amazing Data API’s to make this process very elegant and easy even for a new developer using their platform(such as me :P).

App Screen Sections:

  1. Profile Screen:

This is user’s profile section from where he can change his profile picture and post new photo’s for his followers to see.

User Profile Page

2. Post a pic screen:

A user can browse his PC/Phone for images to upload,and will get a error notification if he tries to hit the upload button without selecting any image,also as i am using the Filestore service provided by Hasura storing user images,there is a limit to File size,i.e 1MB.

Posting a photo

3. Followers List Screen:

This screen show all that users that are following you,and if you want to see any of their profile’s you can visit them directly by clicking their user name’s from this section,the same goes for Following List screen as well.

Showing followers for the current logged in user

4. Following List Screen:

Showing users that the current logged in user is following

Now,if you’re thinking where does this follow,and following came from i’ll explain that in the next blog so just stay with me.

So the main function for this screen was to upload profile image and post picture’s. So i’ll now be explaing the backend code for this functionality.I used the Filestore service provided by hasura to manage uploading of images,the docs on Filestore were very helpful throughout,here is a link to them: https://docs.hasura.io/0.13/ref/hasura-microservices/filestore/index.html.

So what i did was when a user uploaded an image,i stored it in the filestore with a FileId,and i had another table in my database which is the photo table which holds the links(this FileId’s) to the images that users upload,and i use the public filestore endpoint to show them.

I’ll post pic’s of my code and try to explain what every block of code is doing.

In the lines from 383–391, i just checked if the user is trying to upload an images without selecting any,or if the selected image size is greater > 1MB(which is the file limit for Filestore). If yes then throw an error, otherwise proceed to normal uploading of image.

In lines 436–439, i hit the filestore service endpoint with the selected image,then upon success response from Filestore i save the FileId in my photo table(lines 398–435).

So this is it for this blog, next week i’ll be explaining about the next screen of my application which is the Search user screen,so stay tuned.

Link to my web app: Go to application