New Frontend Redesign for the Steemit Earnings App

in #utopian-io7 years ago (edited)

What is the project about?

This is a simple application that helps steemit users and everyone who is interested in steemit market to track the price, market and earnings of their posts. The application works on iOS and Android. Currently there was no website available. For this purpose i had to recreate the frontend of the app.

What's this update about?

I redesigned the complete UI for the mobile app. Switched away from Ionic due to its complicated styling to Angular2 & Angular Material. Now the frontend is able to support both mobile and web interface with the same shared code base. I love it!

What was wrong before?

I spent a couple of days analyzing the behavior of the users how they use the app. How i use the app and noticed lots of things the users do not like about the app.

  • To me the most annoying part was the usability. It was just horrible, seriusly there was no proper loading bar in Ionic2 so i couldn't realy provide any feedback.
  • Steemjs is just simply dies. It breaks the app multiple times.
  • Users need more refined features to see their revenue / earnings in the app.
  • No historical tracking. Comparsion & analysis tools to see what posts are interesting for steemit users.

Important features that the new design provides for future development:

  • Currency Selection in the toolbar
  • Manage Multiple accounts / switch accounts in the toolbar
  • Menu to navigate between the following:
    • View Earnings (Just as usual
    • View Posts / Comment history, up coming earnings for each post.
    • Charts to track earnings and up-votes
    • Calculator that helps estimate the earnings
  • I also got rid of the ads, no one likes them (I am sorry to have them on the first place!)
  • I registered the http://steemearnings.com/ domain. Instead of mobile only app i want to create a publicly available website.
  • The design will provide a hybrid solution for mobile and website to deliver the service for anyone interested in using steemit.
  • I finally got my apple credentials so i can provide better iOS support in the next days!

How it's made?

I used angular2 & material design. Current favorite for rapid app development for crossbrowser and hybrid applications!

Wheres the code?

The source code of the website branch was published and is fully available:
https://github.com/azarus/steemit.price.app/tree/website

Please notice the website branch! The master contains the current old code.

So whats in the code?

  • A completely redesigned UI, A brand new color theme and well tested usability.
  • I also switched from the steemjs api to a simple client -> server infrastructure. As publishing new updates for a mobile app when the steemit platform has important changes is quite difficult and leaves the app unusable for users who didn't update their app.
    Now if something breaks i can fix it in matter of seconds without requiring the user to update. Only new features will require updates from the users.

Whats Next?

  • Currently i am working on the server side of the things as i had previous issues where the steemd.steemit.com node was unable to deliver responses to the end users.
    For this purpose i am set up my own steemit node to provide the data for the users and speed things up. Which will be publicly available after the app is tested and ready to deliver the new updates. But the server costs lots of $ so i am saving on not running it until the app is released.

  • After the server side of things are finished all is left is to connect the app with the server side api.

  • Deploy the website

  • Deploy the updated mobile app to iOS and Android

Into the future

  • More tools to analyse posts & comments to see why they the ammount of upvotes they get.
  • Caching
  • Promote the application to other users.

Questions?

  • Just ask! I am eager to answer anything you might wanna know!



Posted on Utopian.io - Rewarding Open Source Contributors

Sort:  

Thank you for the contribution. It has been approved.

You can contact us on Discord.
[utopian-moderator]

Hey @vladimir-simovic, I just gave you a tip for your hard work on moderation. Upvote this comment to support the utopian moderators and increase your future rewards!

Test

Hallo :)

does it have apk build for android

It will have soon.

That sounds like some great progress! I will have to look out the iOS version.

Thanks. Its coming pretty soon but i just took a very pleasing job offer in munich and had a long flight and trying to get my head around the new environment. I already have everything planned out. And in the next weeks i will surely focus on finishing the app.

Hey @azarus I am @utopian-io. I have just upvoted you!

Achievements

  • You have less than 500 followers. Just gave you a gift to help you succeed!
  • Seems like you contribute quite often. AMAZING!

Community-Driven Witness!

I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

mooncryption-utopian-witness-gif

Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x

I can't seem to be able to run the tests ng e2e all I get are errors:

**************************************************
*                    Failures                    *
**************************************************

1) steemit.earnings.app App should display welcome message
  - Failed: No element found using locator: By(css selector, app-root h1)

Executed 1 of 1 spec (1 FAILED) in 4 secs.
[23:12:06] I/launcher - 0 instance(s) of WebDriver still running
[23:12:06] I/launcher - chrome #01 failed 1 test(s)
[23:12:06] I/launcher - overall: 1 failed spec(s)
[23:12:06] E/launcher - Process exited with error code 1

What are the commands to see the web app in action?

at this point idk if you are a bot or not. But i dont use tests.

The application works on iOS and Android. Currently there was no website available. For this purpose i had to recreate the frontend of the app.

Congratulations @azarus! You have completed some achievement on Steemit and have been rewarded with new badge(s) :

Award for the total payout received
Award for the number of upvotes

Click on any badge to view your own Board of Honor on SteemitBoard.
For more information about SteemitBoard, click here

If you no longer want to receive notifications, reply to this comment with the word STOP

By upvoting this notification, you can help all Steemit users. Learn how here!

@resteemator is a new bot casting votes for its followers. Follow @resteemator and vote this comment to increase your chance to be voted in the future!

Coin Marketplace

STEEM 0.17
TRX 0.16
JST 0.031
BTC 61586.28
ETH 2569.21
USDT 1.00
SBD 2.55