Task Request: Add A New Segment To The SteemGigs Homepage, Along With Specialized Editors, Categorization etc

Details

This task will require adding an entirely new segment to SteemGigs. Before we released SteemGigs to the public for use and testing, we wanted to make sure that it already had the entire framework for most of its functions and features, ready and working, so that the addition of new features can mostly require replication.

In this task, we will like you to add a new segment to the SteemGigs homepage upon log-in called "SurpassingGoogle", that displays random posts but only posts that have been created using the SurpassingGoogle's all-encompassing specialized editor.

To understand what we mean by "a new segment", kindly look at this image:

Note: Post-cards (post thumbnails) all around SteemGigs, should be able to do the following:

1. Should be expandable to view full post as well as to upvote, comment etc
2. Cards must contain post title, steemit reputation score, steemit profile picture, post pending-payout, post-age upon hovering on post pending-payout etc
3. We should be able to upvote posts (with slider) right from the post-card, without expanding the card.

The above post-card features already exist on SteemGigs and should be verified and maintained throughout this task.

The #surpassinggoogle segment as seen above, is tied "to an all-emcompassing specialized editor" i.e the #surpassinggoogle segment is expected to only display and categorize posts, that have been created using its (own) editor.

Note: the exact framework for the specialized editors we are looking to recreate, already exists on the current SteemGigs e.g custom request editor, so you can look to replicate that.

Here are other things to note, about the editors across SteemGigs:

1. Editors have a save and preview feature before post publishing
2. Editors have the steem "upvote" option before post publishing, which isn't "ticked" by default
3. Editors have "minimum character count" feature (in post body)and renders hints or suggestions, if this isn't met by user; else post will not be executed.

Please try verify and maintain what exists, during this task.

This is the mockup for the landing page that leads up to the all-emcompassing SurpassingGoogle editor:

Where you are not able to insert text, always look to use "default text", so we can easily update it to our own text

We refer to the SurpassingGoogle segment as having "an all encompassing editor" because as seen in the earlier screenshot above, it leads to a bunch of specialized editors, specific to a chosen category yet the base framework for the editor is the same all through.
Upon clicking on one of the categories on the image above, it should load up the editor, filled in with the directional tutorial, specific to that category
e.g if one clicks on the "Tutorials" card as seen in our earlier image above, it should load up an editor that looks like this:

or if one clicks on the "teardrops" option, it should load up an editor that looks like this:

You will notice that the framework of the editor for each specific category remains the same.

Here is a list of the only things that change each time, per editor-type:

1. The name or type of editor and default welcome message e.g "tutorials" editor(at the topmost part of the page) + default welcome message.
2. The text just before "main editing" begins e.g in the case of tutorials editor, it writes; "create a tutorial > publish".
3. The graded out directional message in the "add title" segment of the editor.
4. The directional message inside the "main body" segment of the editor changes, specific to the type of editor.
5. The second default tag changes as well depending on the editor loaded up e.g for the tutorial editor, the second default tag becomes "tutorials"; the first always being "steemgigs" and the next two tags should rely on the category and subcategory that the user chooses.

Here are mockup images of all other editor-types under the SurpassingGoogle segment:

TIL editor:

How-To Editor:

DIY Editor:

Rare Intel:

Terry Says:

Steem Secrets:

Un(dis)talented:

Life:

Motivation & Inspiration:

Resolutions:

Note: If you need a "to & fro conversation", e.g incase you experience difficulties or need the text copies of the words on the screenshots etc, don't hesitate to ping @steemgigs on the Slack Channel for SteemGigs development

Categorization & Search

The reason for an all encompassing editor dedicated to the "SurpassingGoogle" segment, is to make categorization and search easier for this segment alone and especially, so that posts created under the segment "SurpassingGoogle", don't mix up with Gig posts or custom request posts; other segments of SteemGigs.

We already have the general search function working on SteemGigs but we don't have refined "search" yet. So, work with what exists for now.

We will focus a bit more on categorization for this task. Basically, we will want every post resulting from the use of editor-types enlisted earlier, to automatically organize into proper categories and subcategories existent under the SurpassingGoogle segment. This is made very possible by allowing a specific editor for each category.

To get ideas, you can look at how the "gig create" editor and "custom request" editor are structured, in relation to categorization and search. (Again, the framework is already in existence on SteemGigs.)

When most of the task is complete, this how the screen should look when one clicks on the SurpassingGoogle tab on the homepage upon log-in:

Then, when you click on the drop-down for the "SurpassingGoogle" tab on the homepage; on one of the categories e.g "how-to", it should lead you to a page that follows this structure:

Below, i will just write out all the subcategories that should fill up the left side of the landing page for each of the main categories under the SurpassingGoogle" segment. I will just use one example as the same entries will apply for the others:
e.g
SteemGigs (TIL)

(Graphics & Design)
Logo Design
Business Cards And Stationery
Illustration
Cartoons And Carricatures
Flyers And Posters
Book Covers And Packaging
Web And Mobile Design
Social Media Design
Banner Ads
Photoshop Editing
3D & 2D Models
T-shirts
Presentation Design
Infographics
Vector Tracing
Invitations

(Digital Marketing)
Social Media Marketing
SEO
Content Marketing
Video Marketing
Email Marketing
Search & Display Marketing
Marketing Strategy
Web Analysis
Influencer Marketing
Local Listings
Domain Research
E-commerce Marketing
Mobile Advertising
Music Promotion
Web Traffic

(Writing And Translation)
Resumes And Cover Letters
Proof Reading And Editing
Translation
Creative Writing
Business Copywriting
Research & Summaries
Articles & Blog Posts
Press Releases
Transcription
Legal Writing

(Videos and Animation)
Whiteboard & Animated Explainers
Intros & Animated Logos
Promotional Videos
Editing And Post Production
Lyric & Music Video
Spokeperson Videos
Animated Characters & Modelling
Short Videos Ads
Live Action Explainers

(Music & Audio)
Voice Over
Mixing & Mastering
Producers & Composers
Singer-songwriters
Session Musicians & Singers
Jingles And Drops
Sound Effects

(Programming & Tech)
Wordpress
Website Builders & Cms
Web Programming
E-commerce
Mobile Apps & Web
Desktop Applications
Support & IT
Chatbots
Data Analysis & Reports
Convert Files
Databses
User Testing
QA

(Business)
Virtual Assistant
Market Research
Business Plans
Branding Services
Legal Consulting
Financial Consulting
Business Tips
Presentations
Career Advice
Flyer Distribution

(Fun & Lifestyle)
Online Lessons
Arts And Crafts
Relationship Advice
Health, Nutrition And Fitness
Astrology & Readings
Spiritual & Healing
Family & Genealogy
Gaming
Greeting Cards & Videos
Your Message On ...
Viral Videos
Pranks & Stunts
Celebrity Impersonators
Collectibles
Global Culture

(Steem & Steemit)
Steem Projects
Curation Projects
Steem Tutors
Steem Graphics
Steem Coders
Steem Veterans
Witness Services
Steem Writers

(Other)

You can use this as default for all the other editor-types.

This list will also fill up the drop-down portion of the "category" tab and "subcategory" tab on each of the editor-types.

But don't you worry; like i said, "the framework for each editor-type in this case, is very similar to our custom request editor and already contains most of these entries enlisted just above, with the exception of the** "untalented steemgigs"** segment and ofcourse the "surpassinggoogle" segment which have been exempted as they are considered segments that shouldn't mix with Gigs, custom requests, testimonials etc

In general, once you have executed the framework, it will be easy to tweak the text entries. Please look at all the screenshots for directional hints.

Where you are not able to fill up text entries e.g things like welcome message etc; simply add some default text as we can work on editing those. Just focus on the core of this task.

**Additional Note **: We will look to support approved contributions as well.

Components

This changes will mostly affect front-end and likely back-end. Thus, contributions should be made to this repositories:
Frontend: https://github.com/steemgigs/steemgigs
Backend: https://github.com/steemgigs/steemgigsServer (Where needed!)

Deadline

7 days

Communication

Best way to contact us is by joining development discussion or through the DM on our Slack channel.

Simply ping or DM "@steemgigs" for questions related to this post.
To understand the code better, ping @jalasem on the Slack Channel

---

Posted on Utopian.io - Rewarding Open Source Contributors

---