Internship at Hasura — 5.1

This is the fifth week of the internship and it’s time to code the second screen, i.e Category Page of the Restaurant App.

Development of Second Screen

This is the second screen of my application, i.e the Category page which tells the user about different categories of food that are available. I have used HTML, CSS, Bootstrap and AngularJS to build this page. The content of this page i.e the image, name and description of different categories are not hard coded. The page is actually making an HTTP request to Hasura Data API and fetching all the relevant data. So if I want to add or remove any category, all I need to do is add or remove that row from the Category_list table in the Hasura Data Management Section!

<div ng-controller="CategoryController" ng-init="getCategory()">
<h2>Menu Categories</h2>
<ul class="Category_list">
<li ng-repeat = "data in responseData">
<a href="#">
<img ng-src={{data.image_link}} class="img img-thumbnail">
<div>
<h3>{{data.name}}</h3>
<h4>{{data.description}}</h4>
</div>
</a>
</li>
</ul>
</div>

This is the code which is responsible for displaying the content fetched from the Hasura Data API. In fact, this is a great example of how the SPA frameworks like AngularJS can reduce the amount to code. Just imagine, how many lines of code I would have to write if I hard coded the contents (probably 100–200 lines). Further, to add or remove content, I would have to again code or remove a few more lines of code, that would have definitely affected the maintenance of my code base. But here AngularJS is doing all the hard work for me. The ng-init directive is calling a function called getCategory, as soon as the page loads which is actually fetching the data from the backend. Then ng-repeat is displaying all the fetched data one by one. Click here to get the entire code.

But if AngularJS is not able to fetch data due to some reason, the page will pop up a message stating that “Something went wrong!” as shown in the picture.

You can even check out the live demo of this screen — click here. But this will be available only when my local machine is online, as here my local machine is running as the server! For more information about this technology, check out my previous blog.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.