Skip to main content

4.1 App Screen 1 (UI + Backend integration)

The 1st screen app's UI and authentication part was dealt by my teammate Mayank Padhi and the details can be found in his blogpost. After the sample UI design, it is time to get real and get the real data from the database and use that to populate our first page( the songs queue page). So, as soon as the authentication takes place, another request is sent to get the songs list in queue via the data endpoint of our project. The response data of each song is then sent passed through a template creating function that fills all the details of songs at the right places and an accordion tab is ready. Similar process occurs with the rest of the data and then the HTML is then populated with our queue list, something like this:
First look of our Home Screen
Now, if you click on any of the song tabs, you will get the song details of that particular song. Like this:
Song details on clicking a tab
The "Get the List" button would take you to the app's 2nd screen. the song database. The complaints button would open a prompt for user to provide feedback.

Comments

Post a Comment

Popular posts from this blog

3.2 Hasura Data API + Postman Collection

The previous blog covered the data modelling of our app. Now it is the time to test the working of our database using some sample queries to the data endpoint of the database. Some of the sample queries made through Postman are: Insert to Song Queue Select all songs in the song database Select all songs in the songs queue The link to the API query collection is here .
Post a Comment
Read more

1.1 The Three Screen App Idea

The beginning of a new project is always tough, especially if you don't have a clue on what app you are going to build. We need to come up with an idea that is helpful in real life and something that people are interested in using. So, my friend and teammate for our internship project, Mayank Padhi, and I started thinking and researching on the internet ideas that we can develop into apps with our skill set. After a week or so, we had our own list of 3-5 ideas each that we thought were good. We shortlisted our ideas and ranked them according to our preferences and at the top of the list was a " Blood Donation App ".     We both loved the idea of making a blood donation app where people would register themselves along with their location details and when a needy person requested for blood, our app would send requests to the registered people if they would be free to donate and help another person in need. But after some research online, it turned out that the idea was a...
Post a Comment
Read more