[Steem Gigs] Landing Page Redesign (Build) & Category Preview Component

in utopian-io •  6 years ago 

screely-1552768069750.png

Repositories

https://github.com/steemgigs/steemgigs
https://github.com/steemgigs/steemgigsServer

This post is partially related to the following task request, however, I conducted some further work that is mentioned too :D

https://busy.org/@surpassinggoogle/task-request-help-us-design-re-design-the-steemgigs-org-landing-page-additional-bounty-of-50-steem

Introduction

The following post briefly describes some of the work I recently carried out for SteemGigs, within this piece of work I redesigned the landing page as well as simplified some of the home page code to allow more usability and less duplication.

Pull Request

The work that I carried out on SteemGigs Front End can be found in the following pull requests:

https://github.com/steemgigs/steemgigs/pull/104

and

https://github.com/steemgigs/steemgigsServer/pull/6

There were also a few bug fixes related to the above made here:

https://github.com/steemgigs/steemgigs/pull/106

The site is live at the following URL:

https://steemgigs.org/

New Features/Improvements

The items I completed from the task request were as follows:

  1. Redesign Landing Page

In addition to the above I completed the following:

  1. Create category preview component for use within the home page

Redesign landing page

The main request from @surpassinggoogle was to improve the overall look and feel of the landing, over time the landing page had slowly become out of sync with the rest of the sites look and feel, therefore in order to bring this all together I designed the following:

Note: This is a design in Adobe XD I made prior to the build, as documented here:

https://steemit.com/utopian-io/@tobias-g/steemgigs-landing-page-redesign

Although I won't go into much detail surrounding how this was created you can see from the above I was able to get fairly close to the design and overall @surpassinggoogle was happy with the results.

The main bulk of this task was related to the markup and styling which can be seen here:

https://github.com/steemgigs/steemgigs/blob/master/src/components/views/landing.vue

The data currently shown in the page is currently static, however, should need the come this can be moved to the DB easily enough as most of the text is held with data().

The following shows the landing page prior to the redesign:

Search Section

The following shows the search section prior to the redesign:
screely-1552767670700.png

Footer

The following shows the footer prior to the redesign:

screely-1552767770485.png

Following the redesign, the following shows it currently looks:

Search Section

The search section allows a user to quickly search for gigs they need, upon a user typing their search query (and pressing return) a user will be pushed to the search page to find the gigs they need.

screely-1552768069750.png

SurpassingGoogle Section

The SurpassingGoogle section highlights the knowledge bank that is currently within SteemGigs, within this section a user has the option to either create or read the knowledge bank

screely-1552768122043.png

BroPro Section

The BroPro section is a new area which is coming soon, you can read more about it here:

https://steemit.com/steemgigs/@surpassinggoogle/have-you-heard-of-steemgigs-org-s-bropro-yet-it-will-be-powered-by-the-teardrops-tokens

screely-1552768200066.png

Footer

The footer holds useful links and quick info for Steem Gigs users, currently this is only used on the landing page, however, this was built into its own component so it can be easily added to other areas of the site should it be needed.

screely-1552768220636.png

Alongside the main landing page, I also created a new sign up modal which will soon be used to allow a user to onboard to steem via the @oracle-d/@steem.ninja API/widget. This can be seen here:

screely-1552769429562.png

Create category preview component for use within the home page

Another piece of work completed was a category preview component that could be reused to replace duplicated page on the home page of the site, within this the ability to sort sections was also added.

Within this commit you can see the old code that was used on the home page, within this you can see that each row was duplicated a number of times:

https://github.com/steemgigs/steemgigs/pull/104/commits/65ac3bfde40f47249e541f6f3299e182f4caed39

Following this work, you can see that the home page is now made up of the following code:

carbon (23).png

In order to achieve this, I created a new component that would both get data and display the data, this was used on each section on the home page. This component is able to display both testimonial and gig cards as well as sort them based on the newest/oldest/highest priced/lowest price (where applicable). The sorting is first conducted server side when the (completed in a previous release) and then sorted again client side using loadash as the client will not load them in the same way that they're provided from the server (I've read this is normal, however, if there is a way to set this by default, that would be great to know :))

You can see an example of this within this site below:

screely-1552769949355.png

The component, which can be found here:
https://github.com/steemgigs/steemgigs/blob/master/src/components/snippets/category-preview.vue, currently has the ability to take in the following properties in order to adjust the display of the data within it:

post_type: String,
header: String,
description: String,
limit: Number

The following provides more information surrounding each property:

PropertyDescription
post_typeAllows you to configure which type of posts should be displayed (gigs, custom requests, testimonials,
headerThe section header text that should be displayed to the user
descriptionThe description text that should be displayed to a user
limitThe number of cards that should be shown within the section/returned from the API

In an upcoming release, this component will also be able to deal with specific categories, subcategories & pagination to allow for it to be used in other places within the application.

What's next?

I am currently working on this task request:

https://steemit.com/steemgigs/@surpassinggoogle/task-request-help-us-add-basic-search-mechanism-to-the-existing-steemgigs-org-search-engine-that-searches-user-profiles-based-on

which is nearly complete, I have also extended the category component for use throughout a selection of different pages. In the next release, I will also add beneficiaries to allow users to support Steemgigs, a start to the BroPro section.

I have also built the API for a wallet on Steem Gigs that will include the TEARDROPS token created by @surpassinggoogle, however, we'll see which release this goes in ;)

GitHub Account

A link to my GitHub account can be found here:

https://github.com/tobias-g1

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:  
Loading...

I really like the UI! Do you have a github ? I’d like to commit

  ·  6 years ago (edited)

https://github.com/steemgigs/steemgigs is the repo for steemgigs, get involved, the more the merrier! Do you know Vue and Node?

I know React and Node but i guess i can adapt to Vue :)

I have react tasks as well on https://github.com/surpassinggoogle/UlogsV2/issues just incase. but would certainly relish your contribution to steemgigs

Hi @tobias-g!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your post is eligible for our upvote, thanks to our collaboration with @utopian-io!
Feel free to join our @steem-ua Discord server

Hey, @tobias-g!

Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!

Get higher incentives and support Utopian.io!
Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).

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

Vote for Utopian Witness!

Congratulations @tobias-g! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

You received more than 15000 upvotes. Your next target is to reach 20000 upvotes.

You can view your badges on your Steem Board and compare to others on the Steem Ranking
If you no longer want to receive notifications, reply to this comment with the word STOP

Do not miss the last post from @steemitboard:

Are you a DrugWars early adopter? Benvenuto in famiglia!
Vote for @Steemitboard as a witness to get one more award and increased upvotes!

This post has been included in the latest edition of SoS Daily News - a digest of all the latest news on the Steem blockchain.

Hi, @tobias-g!

You just got a 1.04% upvote from SteemPlus!
To get higher upvotes, earn more SteemPlus Points (SPP). On your Steemit wallet, check your SPP balance and click on "How to earn SPP?" to find out all the ways to earn.
If you're not using SteemPlus yet, please check our last posts in here to see the many ways in which SteemPlus can improve your Steem experience on Steemit and Busy.

Dear tobias-g:

We are SteemBet, the next generation STEEM based gaming platform. We are honored to invite you to join our first fantastic dice game, which is just the beginning of SteemBet game series. Our dividend system has now launched. The prize pool has already accumulated 2,000 STEEM and more than 60 players have participated in staking mining token SBT. A huge reward of 40,000 STEEM is awaiting! Join us NOW with other 500 STEEM users to loot HUGE dividend reward!!

SteemBet Team

Official Website
https://steem-bet.com

Discord Server
https://discord.gg/95cBN3W

Telegram Group
https://t.me/steembet

Make free landing page and increase your sales on link below 👇 make free landing page increase sales