There is no rest for the wicked. Work is coming along nicely for the Gift Card Marketplace and in this update, we delve into what has changed. This update is separated into two separate components: design and development. Significant work has been done on both fronts. We started out with the concrete slabs and now we're finally seeing some walls being put up.
Full Steem ahead, we're not slowing down since project & development update 1 which you can read here if you missed it. While update #1 debuted some foundational work, this update sees the implementation of a styleguide and more aspects of the foundation of the platform itself.
Roadmap
In case you missed it, we recently announced our roadmap for Steem Marketplace. We will do our best to ensure that we stick to it, but life gets in the way and priorities change. Any delays or changes to the roadmap will be publicised. Check it out here.
While the roadmap is not Gift Card Marketplace specific, this marketplace is the first priority for Steem Marketplace. Relevant milestones as laid out in the roadmap are:
May 2019 most of the UI will be developed for the gift card marketplace. In June 2019 the UI will be completed and we will be soliciting early feedback from presale participants and select members of the community. August 2019 the Gift Card Marketplace will enter alpha stage. September 2019 the Gift Card Marketplace will enter beta launch and will run for two weeks before public launch.
So far we are on schedule with the roadmap, with all of the March 2019 items completed.
Deployment Process
While the API and backend infrastructure has yet to really be implemented just yet, we now have automated builds for the front-end of the Gift Card Marketplace. As work is pushed, it will be built to https://gift.steem-marketplace.com which will allow anyone to see the work as it progresses. Keep in mind this URL will be constantly changing and broken at times.
For the deployments we are using CircleCi which graciously offers a free plan for open source projects. The deployment process allows us to automatically release work as it is pushed up to the GitHub repository. Other repositories will also use CircleCi for the build process.
For the workflow itself, all repositories including the Gift Card Marketplace will adopt the GitFlow methodology, which you can read more about here on Atlassian's website. If you're not familiar, it encourages working in separate branches and only building from the master branch for production. Development builds are deployed from a develop branch.
Design
Glimpses of a simple basic design were shown in dev update #1 and in this latest update, one of the more noticeable updates we see is the creation of a new logo. This logo is adaptable to all marketplaces that will be created. The intention here is cohesion between all of the marketplaces with a familiar look and feel, thanks to our styleguide.
Logo
Nobody likes a show-off, so we opted for a super basic logo that still has a bit of its own identity, but doesn't try too hard. The brief was to create a logo that can be rendered as straight-up text and not a fancy SVG or image. When working with just text, it is easier to style, it's easier to scale and change.
The font we ended up deciding on is League Spartan, which we chose for its readability and playfulness. It only comes in one weight (bold) which makes it perfect for headings, or in our case, great for a logo.
We have not announced any other marketplaces just yet, but we've got some logos in the styleguide experimenting with future marketplace ideas which you can see below:
Styleguide
We now have a styleguide which is well underway, with emphasis on separate visual identity in a shared design system. Each individual marketplace site will have its own colour palette, each marketplace with its own unique primary and secondary colours. We have settled on the font Work Sans as the main font.
The styleguide is currently sitting inside of a design file and the eventual goal is to abstract that design out into HTML and CSS once it is stable and complete, then make it available in the spirit of open source. In the case of the gift card marketplace, the primary colour selected is purple (obviously). Other marketplaces will as discussed, take on their own specific branded colours.
Here is a glimpse of the colour palette we have settled on for the Gift Card Marketplace
One thing you might notice is the primary colour matches that of the logo. Because marketplaces have their own individual identities, every marketplace will use colour to differentiate itself. Colours were chosen to be complementary to one another, a cohesive marring of colour.
Development
A bit of work has been done on the front-end UI and functionality behind it. Pictured in the above image, we can see the header and homepage search hero section has been completed.
If we hover over the top right section where the logged in user avatar can be seen, a dropdown menu reveals itself with convenient shortcuts to different parts of the marketplace.
This is where the users MARKETPLACE token balance will be displayed and underneath, navigation items which allow the user to freely move through the platform; view their profile, buy credits, create new listings, manage existing listings and more.
Another smaller detail is the search icon is clickable, and a search field slides out from the right. In the context of the homepage, it is a little redundant as a hero section with search field is also present, but on other pages, this will be the main in which users can search the platform.
Scrolling down a little further, a featured listings section is displayed. The idea behind this section is that users will pay to promote their posts to the homepage into this section.
The content here is currently test data, although it is representative of the final data (except the images of dogs). But it will display either a user provided image or a fallback image that has yet to be created. Clicking the thumbnails will link you through to the listing itself.
All of the UI shown on the homepage is reusable, from the heading through to the dropdowns and individual listing thumbnails. From the very start, the goal has been to create a clean and reusable platform codebase that does not repeat itself.
There are still other sections to be added to the homepage, as well as more marketing collateral based content, but the homepage and header are coming along quite well and quickly too.
Development pace wise, there have been no challenges we have encountered, due to the fact this is all foundational development work. All future work will be defined and scoped within GitHub issues.
Localisation
The application from here on in fully supports localisation, this will allow anyone to use the marketplace software to create their own marketplaces which fully support any locale. The application currently has locale files for; English Australia/British, United States and New Zealand dialects. Where appropriate local dialect will be used.
The long-term plan with localisation is to open it up to the community through @utopian-io and encourage the community to submit localisations for a plethora of different languages. These localisations will then be freely available to the community for their own projects.
The locales can be found here in the Giftcard Frontend repository. Please do not submit translations just yet if you're reading this. Once the UI is completed, we will be letting the community know.
Steem Engine
Work has begun on the Steem Engine integration into the platform, which will utilise the MARKET token we have already created and will be used as the main platform and website currency.
We will be utilising our own custom Steem Engine node which is already running and work on the contracts has also been started. Smart contracts will be used for the purchase of MARKET tokens as well as the escrow functionality on the platform for facilitating safe peer-to-peer transactions.
Authentication
The platform is going to use both Steem Keychain and Steem Connect. In ideal circumstances, users will use the platform with the keychain extension because it is safer. However, mobile devices do not support extensions and require Steem Connect.
There is a little added complexity supporting both authentication options in a Steem dApp. When you use keychain, you technically do not "log in" to the application, however, Steem Connect is a proper oAuth based workflow which stores a JWT in the browser.
Right now, the application supports logging in via Keychain and Steem Connect support is currently being worked on.
Marketplace JS and Steem Payments Packages
While this is not solely specific to Gift Card Marketplace, preliminary work has been started on the marketplace-js package which will allow developers to interact with the Steem Marketplace platform and Gift Card Marketplace as well.
This package will work in a similar way to Steemit's official steem-js package or Steem Engine's sscjs packages for working with platform specific data. This will open up the door for users being able to integrate with Wordpress and other platforms.
Initial work has also been started on steem-payments which is a separate package that will allow developers to implement "pay with Steem" payment workflows into their applications and will be used on the site itself as well. The repo can be found here and if you're interested, give it a star.
Testing
The groundwork for unit testing using Jest has been laid. Although no tests have been written just yet, the infrastructure is now in place for unit tests within the application. The plan is to test some of the completed components in the UI by the end of next week, as well as the services in the application.
We are also implementing Cypress for end-to-end testing and that will also be integrated by the end of next week as well.