Gift Card Marketplace: Project & Development Update #1

Fresh off the press and hot on the heels of winning the @aggroed business plan competition, the Gift Card Marketplace is full steam (or should I say steem) ahead. Since the initial announcement, a lot has happened.

We announced the creation of the MARKET token in this post here which explains details behind the token that will power the marketplace.

We have a domain name

Thinking of a name is one of the hardest aspects of a new idea or offering. The name was admittedly staring at us in the face the entire time and while I wanted something unique and clever, the domains settled upon are:

• https://steemmarketplace.com
• https://steem-marketplace.com

The main domain name that will be used is https://steem-marketplace.com, the other one will just redirect to this one. The strategy that will be employed is subdomains.

The Gift Card Marketplace will live at: https://gift.steem-marketplace.com this keeps everything under the same familiar steem-marketplace.com umbrella, whilst providing a unique identity and brand. This aligns perfectly with the Github organisation name and other use of the Steem Marketplace name.

Work has already been undertaken for design to be created for the landing page of Steem Marketplace. The design is also being commissioned for the marketplace itself. In a future update, we will delve into the design, challenges and the goals of creating a cohesive marketplace with individual identities.

Steem accounts created

Because using my personal Steem account is not a long-term strategy, a new account has been created as the main marketplace account. This will handle operations on the market initially, with other accounts planned for bot operations as they're developed. Sadly, all of the marketplace appropriate accounts have been taken and we tried a lot of different variations.

Eventually, we settled upon @marketplacesteem as the account. This account will primary be used for upvoting supporters, sharing promoting listings and acting as the issuer of MARKET tokens. In the future, a separate issuing bank controlled by a smart contract will be created, for the MVP this will do the job just fine.

Steem Engine node created

One of the first things completed is a functional Steem Engine node. This is where the smart contracts for the marketplace platform are going to live, primarily the contract for escrow functionality.

The Steem Engine Node is currently running here: https://se.steem.services/.

While work on the contracts themselves will begin when the front-end is more finalised and basic MVP functionality of the backend completed, a placeholder repository has been created here https://github.com/steem-marketplace/escrow-smartcontract which you can star and keep an eye on.

Tech Stack Finalised

I am a member of the Aurelia.io core team, so all of the front-ends are being written using the Aurelia Javascript Framework. For any backend related functionality, Node.js is going to be used. For real-time functionality, Firebase will be used in combination with Google Cloud Platform services, primarily for messaging/UI update features.

For some functionality, WebSockets will be used and will leverage Google App Engine to support scalable server resources for persistent Websocket functionality in the marketplace apps. All infrastructure will be cloud-based to allow for greater scalability and management of costs.

The structure for the front-end can be seen here in the Gift Card Marketplace repo: https://github.com/steem-marketplace/giftcard-frontend. This will extend to all marketplaces including the core marketplace application. The aim is to develop the gift card marketplace and use the code as the basis for other marketplaces.

As mentioned in the initial announcement post, functionality will be broken up into separate open source packages. One such will be a package allowing users to add in payments functionality to their Steem apps https://github.com/steem-marketplace/steem-payments.

Development Log // Work completed thus far

A lot of work has been done on the initial gift card marketplace front-end.

You can download and run the app

A working initial skeleton of the app has been created. Simply clone the repository and follow the instructions in the README.md file: https://github.com/steem-marketplace/giftcard-frontend/blob/master/README.md.

The site will be accessible at http://localhost:8081. Although, keep in mind that the actual implementation and design of the app still has to be completed. Pulling down the app now will allow you to regularly update and see the progress first-hand as more changes are pushed.

The basic design has been started for the gift card marketplace, which will be improved in subsequent releases and as the design is finalised.

The goal is to use basic styling and focus on the functionality itself, getting caught on design details so early on can set you back quite a lot. I think what is here is workable and can be improved.

Steem Keychain typings for TypeScript

The entire app is being written in TypeScript and currently, typings do not exist for the Steem Keychain extension. Complete TypeScript typings for the extension give complete intellisense support and reduce the need to consult the documentation. They might be adjusted accordingly, but they work well so far. Developers are encouraged to use these in their own TypeScript projects.

The typings will be submitted to the official @types repository shortly to make them installable from a separate package.

Initial Auth Work

Because the marketplaces are going to leverage the Steem Keychain extension, authentication requires a custom solution using keychain. A handy authentication method has been created in the keychain service which can prompt a user to authenticate with the application: https://github.com/steem-marketplace/giftcard-frontend/blob/master/src/services/keychain.ts#L11. Because you don't technically login to a dApp, you grant permission, this is a vanity check if anything.

This code is easily portable to other applications, so if you're curious how to implement login functionality, this chosen method uses the requestSignBuffer method in the keychain extension itself: https://github.com/steem-marketplace/giftcard-frontend/blob/src/services/keychain.ts#L15.

State management with Aurelia Store

There are a lot of choices out there for state management, the most common and popular is Redux, as well as something like MobX. The marketplaces leverage the Aurelia Store plugin which is based on RxJS. The reason for this is Aurelia Store is more simplistic and just as powerful, it also closely resembles that of Vue's VueX state management.

At present, all of the functionality for working with the state lives in this actions file: https://github.com/steem-marketplace/giftcard-frontend/blob/master/src/store/actions.ts. As the app grows, actions will be moved into individual view-models.

The shape of the state data itself can be seen here and at the moment, it largely revolves around the user and Steem meta: https://github.com/steem-marketplace/giftcard-frontend/blob/master/src/store/state.ts.

Application services

Part of the initial development process was to create numerous micro service adapters for communicating with different back-end services. These services will be the backbone of the platform, also making it easier to re-use the code in other applications and packages. As the app grows these services will be populated and expanded accordingly.

Unlike other projects which focus on a component based approach (Vue and React most notably), Aurelia has dependency injection (DI) which allows for business logic to be broken up into reusable clean services (singletons and transient classes). All written in TypeScript, it self-documents.

Coin Market Cap Service

A service that nicely wraps the Coin Market Cap API for getting price feeds for STEEM and SBD has been created here. The code is simplistic in its implementation, eventually, it will be shifted into the back-end, but for the time being live on the front-end to not hold up or complicate development.

Steem Service

The Steem Javascript SDK is easy to work with and a Steem service has been created here to wrap the package and make calling various methods easier. Once again, it saves time needing to consult the documentation (or lack of) to do basic tasks.

Steem Keychain Service

The Steem Keychain browser extension exposes a nice global object with numerous methods for interacting with the plugin. The Keychain service here wraps the extension and makes calling various methods a lot simpler.

As part of this work, the keychain extension has full TypeScript typings here. If you need Keychain typings, feel free to use them in your own projects. They really make working with the plugin nicer without needing to consult the documentation.

Conclusion

Last, but not least... testing. The application has been set up to use Jest for unit testing and tests are going to be a huge focus going forward. Cypress is going to be utilised for end-to-end tests, but this has not been configured in the application just yet. Initially, unit tests will be the focus.

As can be seen, a lot of work has started and we're not even at step 1 yet, but I am keeping good pace and lots more goodies are to come.

Series Backlinks

• Announcing Steem Marketplace: Step 0 - Learning to crawl
• Announcing The "MARKET" Token: Diving Into The Economics