Development Update #4: Write New Post, Trending Posts and Upvote PoststeemCreated with Sketch.

in utopian-io •  10 months ago

DVUBanner-template.jpg

Repository

https://github.com/jrawsthorne/review.app

New Features

#1 Write new post 1 2

Once a user is logged in they can now write a new post and it will be broadcast to the blockchain. It will also be indexed in the database.

On the new post page a preview is shown which live updates with what the post will look like. It supports HTML tags and markdown.

image.png

This is the data that is added to the JSON metadata of the post. The id and type are used by the backend to determine what images to show and what show or movie the post is associated with.

carbon (4).png

When a user adds a new post the author and permlink are sent to the backend API. Here the post is retrieved from the Steemit API and the JSON metadata that was added above is parsed.

carbon (5).png

Once the post has been added to the blockchain and database the user is redirected to the new post they just wrote.

carbon (6).png

#2 Trending, hot and active posts with infinite load 1 2 3

The home page now has a selector for the sorting (trending, hot, created, active) and filter (movies, shows, episodes, all).

image.png

The main thing that had to be changed was the API. It had to accept the last post that had loaded so it could only search for more posts after that. If the feed is sorted by date the API queries the database directly. The front end sends the creation date of the latest loaded post. The API then searches for all posts matching the criteria created on or before that date and removes the first one as it's the post that was sent to the API and is already loaded on the front end.

carbon (8).png

If the sort is by trending, for example, the Steemit API has to be queried. It accepts a start_permlink and start_author. This is sent by the front end and added directly to the API call. Again the first post is removed as it's already loaded on the front end.

carbon (9).png

#3 Upvote a post

If a user is logged in they can now upvote a post from a feed or post page directly. If a post is already upvoted, clicking the upvote button will remove the upvote.

image.png

Voting for a post is really easy using the SteemConnect API as can be seen below. Once a new vote has been made the post is fetched again from the steemit API to get the updated information.

carbon (10).png

Roadmap

  • Comments
  • Follow users
  • Re-brand with dmtv name, logo and colours
Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

Thanks for the contribution, @jrawsthorne! I have decided to staff pick this contribution as I think a lot of work went into it and that is reflected in its quality (as usual with your contributions)! Keep up the amazing work!


Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]

·

Wow, thank you so much. Feels great getting closer to a version that can be released.

Hey @jrawsthorne
Thanks for contributing on Utopian.
Congratulations! Your contribution was Staff Picked to receive a maximum vote for the development category on Utopian for being of significant value to the project and the open source community.

We’re already looking forward to your next contribution!

Contributing on Utopian
Learn how to contribute on our website or by watching this tutorial on Youtube.

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!

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

Award for the number of upvotes

Click on the badge to view your Board of Honor.
If you no longer want to receive notifications, reply to this comment with the word STOP

Do not miss the last post from @steemitboard!


Participate in the SteemitBoard World Cup Contest!
Collect World Cup badges and win free SBD
Support the Gold Sponsors of the contest: @good-karma and @lukestokes


Do you like SteemitBoard's project? Then Vote for its witness and get one more award!

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

Award for the total payout received

Click on the badge to view your Board of Honor.
If you no longer want to receive notifications, reply to this comment with the word STOP

Do not miss the last post from @steemitboard!


Participate in the SteemitBoard World Cup Contest!
Collect World Cup badges and win free SBD
Support the Gold Sponsors of the contest: @good-karma and @lukestokes


Do you like SteemitBoard's project? Then Vote for its witness and get one more award!