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
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:
New Features/Improvements
The items I completed from the task request were as follows:
- Redesign Landing Page
In addition to the above I completed the following:
- Create category preview component for use within the home page
Redesign landing page
The main request from 
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
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:
Footer
The following shows the footer prior to the redesign:
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.
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
BroPro Section
The BroPro section is a new area which is coming soon, you can read more about it here:
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.
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:
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:
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:
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:
| Property | Description |
|---|---|
| post_type | Allows you to configure which type of posts should be displayed (gigs, custom requests, testimonials, |
| header | The section header text that should be displayed to the user |
| description | The description text that should be displayed to a user |
| limit | The 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:
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
GitHub Account
A link to my GitHub account can be found here: