App Screen 1 (UI + Backend integration)

In my previous blog, I explained about Hasura auth and data API. In this blog, I am going to explain about how I successfully created my App screen 1.

As part of the internship, I have to create 3 app screens. Each screen should be created in a week. This is the link to my blog-post on App idea, where one can find the details of all my app screens.

Hasura recommended everyone to build the app screen which is the easiest first. I understood that it is because when we build the easiest screen first, we can learn the basic knowledge of how to design the web page and also how to integrate with the backend which will be helpful in building the rest of the app screens. I chose “Home page” of my app as the first screen to be built by me. It is the easiest screen since it requires only select operation to be done with the Hasura postgreSQL database.

I designed my UI using HTML, CSS and Javascript, and Node.js. HTML stands for Hypertext Markup Language. It is used for displaying the content. CSS stands for Cascading Style Sheet. It is used for styling the web page (ex: applying colors, images, alignments, positioning an element, etc). Javascript is used to provide run-time behaviour for the HTML elements. Node.js is actually a server-side Javascript. All the main functionalities of the app screen will be coded using Node.js. It can be used to capture requests, connect with the database, process the requests and return back the response.

The following screen shows the list of “Trending Smartphones”. The user can also select the smartphone manufacturer from the sidebar.

The following screen shows the list of “Top rated Smartphones” based on the ratings of the users.

The following screen shows the list of “Top rated Smartphones”. It also shows “About us” and “contact details”.

I referred this video by Hasura https://www.facebook.com/HasuraHQ/videos/1331237096943289/

So far, I have created my app locally. Currently, I am facing issues with exposing my app to the internet. I will update this blog with my app link, once I solve the issues.

In my next blog, I will explain about how I build the second app screen.

Show your support

Clapping shows how much you appreciated Shabari Pragash’s story.