The Runner-Up Page

The Epicenter of Social Connections & Song Pages

Hariharan M
4 min readJul 30, 2017

I rewind the past of how the profile page set the stage for a cogent mass social network. Here, people find you with your name, work place and your work quarters (the city). They even associate your music story with your personality and that’s what a social platform is all about.

Inherit proposed ideas

With the 2nd screen, the Home Page, I extend the above premises and bring to life the 3-pillar views from my Data Modeling Story — Send-an-invite, confirm-invitees and your-friends.

Friends make a difference in our life, by hook or song. I believe a soothing song could change how we feel.

The Board of New People

There’s a cardboard pinned on the screen top tagged with the caption — ‘Guys you may know’. This is a place for you to add new friends. The Real Cool part is that, Confirm-invitees tabs are stacked on top of Send-an-invite tabs.

Why?

Most of us wait for people to find us, rather than we inviting the lot. So, invitees are prioritized so that we can add value to their invitations, over people who we may want to invite.

There you go, is the list of people, neatly crafted into a CardView Box and since, I’m a newbie here, I’ve not got any friends.
I show you a glimpse of my relinquished ‘Developer’ account. I found a newbie named ‘User’ a while ago. And, I’ve entreated him into joining my channel. That leaves me with nobody on the Board, coz, I’m connected with everybody in the fray.

Then, comes the bunch of guys you may request to (for a friend).

Social Etiquette

We don’t want random people to look at our profile description, say, hobbies and music patterns, nor do we want them tuning to our songs.

Hmmm, I’ve got someone who wants to tune into my songs. Cool, let me add him.

Once you identify your friend from the ‘Board of New People’ and mutually connect, you are free to look into each other and ‘Your Friends’ List’ gets decorated.

I just tap on the Action clip and I’m now connected with Hariharan. Hari leaves my Pandora Box to exclusively get a tab on my friends’ list.

My friends

In the list of tabs featuring your friends, one after another, simply tap on their handles to check out on their little personal page. On the right-end of the tab is a floating chord that takes into your friend’s ‘Song Page’, which I’ll take up for a story on the 3rd screen.

I spout on my new friend and there goes his personal story, sketched bit-by-bit.

The Navigation Drawer, Open!

A gesture swipe to the right, unfolds the navigation tab that offers some cool choices.

The Hodgepodge of my app features exposed! An easy drive for a beginner.

1. Edit — Profile

An acquaintance of my story series — Regular Readers know for sure :)

2. Your Songs

The unraveling of the 3rd screen with a tint of your flavour — Stay tuned for this.

3. Add a song

You get an action picker to choose audio files from your device. Add songs instantly to my filestore DB on Hasura.

4. Update your DP

Set a profile pic so that people can find you. I’ll come with some action strategy on this. The blue circles play the part of a DP as for now.

5. Logout

Signs you out. Your active session ends here.

Never forget

There’s an app action bar on top of the page with a Logout menu, next to which is your DP cropped to a circle. Hover over your DP and you’ll still be taken to the profile page.

Beneath the cover

  1. The ‘People Cardboard’ is a CardView holder.
  2. I display every guy in a fragment, stacked into a view pager. There are some groovy transition animations running backdrop.
  3. If you’ve befriended everybody on Crashz or if it happens that you are connected with everybody, an empty insignia, the ‘Nothing to show’ fragment is slid over the CardView.
  4. If you add a friend or confirm someone, you’ll be seeing a mild fade in out, an effect by the Transition Manager & a Snackbar throws Open.
  5. The sneak peek into a little dropdown profile of your friend, is again the handicraft of the one & only Transition Manager.
  6. The Just a Bit Progress Dialog is Custom-made, tailored by yours truly. I’ve used 2 selector drawables and a layout to affix the selectors in place.

Ending On a High Note

I save the App’s Climax for the next story.

Until, then lets Stay Calm for the Ice Breaking Challenge, my speculations about a Multimedia DB and a Media Player :)

Note to Readers: I’ve tried to keep the UI design and functionalities, as abstract as possible to define a greater scope for a range of readers. If you are interested to really know the back-end side of how things work in regard to the features I’ve talked about so far, you are most welcome to read my github repo.

Stay tuned to my channel :)

--

--