Learn and fun with CPL (Crypto Premier League): Built with Grafbase

Inspiration

While many fantasy gaming and trading applications exist in the market none are open source. CPL is an initiative to provide you with a prototype towards such an application which is linked with the crypto market(but not limited to).

After all, money that lies in saving will lose its value over time

Why Fantasy trading application with Grafbase? Real-time feed, Learning, complex calculations and too many moving parts at the same time. It's a good opportunity to test the time required for development. Plus, I have already an application around it developed a few days ago in AWS AppSync using AWS Amplify 😬.

Having already built a similar application using AWS Amplify. The goal was to migrate to Grafbase. In the process learn, explore and identify the benefits and challenges of each.

What is CPL?

CPL is a fantasy trading platform allowing one to practice investment in markets without investing or losing real money. You get 1M points at the start of the match, your goal is to choose from a single stock to invest as long as you think or withdraw/change your stock to maximise profit. One can enter the match and chose not to invest at all (this is called testing patience and waiting for the right time to enter). At the end of the contest, it's all about how well you are up to date with the market. If you think the stock will fall then make a sell trade (shorting) or go long with buy. Typically called Bulls vs Bears. On a side note, even I wasn't affluent with market terminologies until I started building an application on fantasy trading.

CPL Gamification overview

To add gamification to the project,

1. We have rates refreshing every 5-second interval (backoff strategy to avoid API usage limits)

2. Leaderboards refresh whenever someone joins/invests or withdraws

3. Plus all logged-in users have a chance to chat with each other, share their strategies or tips or jokes

You don't need to logged-in all the time. As they say, money should work for you while you sleep 😉

CPL Introduction

Technical Architecture of CPL with Grafbase

Demo and Source Code

Source Code: Github

Live demo: grafbase-godwinpinto.vercel.app (best suited on operating system dark mode and desktop)

What can one learn from this project (for developers)?

1. Migration Guide / How to from AWS AppSync to Grafbase

2. VueJS integration with Grafbase

3. Grafbase basic authentication(unexplored areas include owner, groups, etc) and authorization with Auth0 (using social provider i.e. Google sign-in)

4. Pusher (Real-time messages / Pub-sub) in the absence of subscription-based / live queries on Grafbase

5. Hosting and serverless API development, with Vercel

6. Realtime crypto feed from cryptocompare.com

Grafbase

With Grafbase you can instantly have APIs ready to be consumed by your web and mobile applications. No need to write server-side code to just fetch data from the database. Plus Grafbase is Serverless meaning you are charged on a nominal basis i.e. per API calls. Which may be a lower TCO (total cost of ownership) compared to managing your own Graph QL instance 24X7, and highly available. Grafbase does all this for you.

Why would one migrate from AWS AppSync to Grafbase?

Check this out: https://grafbase.com/alternatives/appsync

From my initial experiences, below were some highlights,

1. Grafbase is more natural for Graph QL developers

2. Local GraphQL development instance with Grafbase CLI "npx grafbase dev" is 😍. And instantly you have a graphql instance to experiment with. With AppSync, your billing meter starts because your APIs are responding from AWS Servers and not from a local instance. And now imagine you have a heavy data-driven application development (which means you need to clear data from your servers regularly) and many application developers working on it. And someone just wrote a buggy code to insert lots of data during development.

3. Github Branches to create separate instances/versions of your database

4. Simple Pricing model

Let the migration begin!

Typically you start development with App Sync with AWS Amplify for the eco-system it provides including code-gen and simpler integrations with Auth, hosting, storage and other products.

A short note before my audience reviews the source code, I am not an expert on frontend stack or GraphQL. My exploration of AppSync and Grafbase is just in total 15 days of overall effort).

All comparisons are based on my experience with Grafbase and AWS AppSync's built-in integration with Amplify working on the same project and may be limited by my knowledge and time.

Schema views:

1. In AppSync, you additionally write @hasMany and @belongsTo to indicate the dependency graph in structure development

2. With Grafbase @search annotation makes any fields searchable in your queries, while AppSync by default create a "list" query type which is searchable by any field

3. Amplify uses a strict AWSDate while Grafbase uses Date (the more familiar syntax of widely used Graph QL.

Backend Authorization to your objects:

With AWS:

• @aws_api_key - To specify the field is API_KEY authorized.

• @aws_iam - To specify that the field is AWS_IAM authorized.

• @aws_oidc - To specify that the field is OPENID_CONNECT authorized.

• @aws_cognito_user_pools - To specify that the field is AMAZON_COGNITO_USER_POOLS authorized.

• @aws_lambda - To specify that the field is AWS_LAMBDA authorized.

With Grafbase

1. OIDC, JWT, JWKS and Custom

2. And the syntax is simply @auth

Now I leave it up to you to decide, if you prefer simplicity or more complex controls.

Viewing data

1. With Appsync you can view your data with explorer style in App Sync

   

   or from the AWS Management Console -> dynamo DB without writing any query

2. 

   With Grafbase you get a Pathfinder web application with "npx grafbase dev" command

   

   One advantage of having the Pathfinder is that you can test your queries before putting them in your code. what you might miss is the ease of viewing and operating data in a tabular and button-click format. Although behind the scene it is dynamo db

3. Also, you need to ask if you are ok to handle the complexities (if your application is secure or open to threat because of some networking config going wrong arising out of some settings of which you are not aware) of having an AWS account. If you want extreme simplicity then Grafbase.

Mutation in Grafbase and AppSync

and the code

Not much difference in code. However, you get mutations and queries by default with Amplify and AppSync

Linking child-parent relation in Grafbase and AppSync

Grafbase uses a link while AppSync provides a parent[child]Id to link its parent with the child when using mutations

Queries in Grafbase and AppSync

and the code

Real-time subscriptions

With AppSync you can subscribe to create, delete, and update events separately. While in Grafbase you simply add @live to listen to all three events in one go and filter out based on the "op" (operation type) node in response.

@live queries are being sunsetted this September 2023, so you have alternatives to fallback to pub subsystems like a Pusher service provider or poll at intervals until we have some other alternative

VueJS and integrations

One can use the source code hosted on Github as a reference point to gain various concepts of integration with VueJS's latest build as of August 2023 with Vite along with Typescript.

1. Grafbase Auth integration with Auth0 and Google Sign-in(src/stores/userStore.ts)

2. Apollo client to make Grafbase queries and mutations (src/utils/apolloLink.ts)

3. VueJS integration with Pusher on the client side (src/components/ChatWidget.vue)

Servless API and Hosting with Vercel

Install "vercel" CLI and simply type vessel and follow the instructions. Refer to "/api" directory to know how to build a serverless function on Vercel

What I would love to see in the Future with Grafbase

1. Live Queries / Subscriptions: For applications needing real-time updates, this feature was a blessing. But I also understand other complexities of the ecosystem.

2. Auto-types generation: While with this project I have generated my typescript types using schema definition from Grafbase Pathfinder and then pasting on https://the-guild.dev/graphql/codegen. It would be good to have a type gen CLI command directly integrated

3. Auto Queries and Mutation Generation: The reference queries and mutations were generated using https://www.npmjs.com/package/gqlg. Hoping to have ready queries and mutations CLI generator command directly integrated.

4. Custom Resolver: Provision to write our custom resolvers similarly to writing serverless functions would be a great add-on with custom packages. In my case, an API developed on Vercel to publish on Pusher could then be eliminated.

5. Pre-configured GraphQL client: A preconfigured graphQL client not binding to any framework like React / Vue, etc, would be a great addon to develop things faster.

   Grafbase is promising and looking forward to upcoming releases and features.

   Points 2,3,5 are not show stoppers but just make adoption easy for beginners.

CPL is not limited to Crypto

While the feed from cryptocompare.com currently is showing only for Crypto markets, the possibility of displaying US or Indian markets is easy. However, I am not sure when the judges or audience timings would be when visiting the demo and in that case, the feel of near real-time rates would lose the excitement of leaderboard with rates refresh.

What more can be built on CPL?

1. Last matches winners

2. Weekly Leaderboard

3. Monthly Leaderboards

4. Mobile responsive

5. Difference contest segments (Crypto / US / Indian) with different stocks

6. A proper administrator panel

7. Moving from a Vuejs-dependent stock feed creator to backend based feed

Timeline taken for this migration

1. Exploring Grafbase documentation & Videos - 3/4 hours

2. Understanding and shortlisting a Graphql client (Apollo) - 4 hours

3. Integrating Auth0 into Grafbase with authentication and authorization- 8 hours (now after doing it once, it's just an hour job). Lack of starter documentation/blogs/articles.

4. Actual migration of code (i.e. writing queries and mutations and modifying code appropriately, 16 in total) - 12 hours

This section is to give you an idea when adopting/migrating to Grafbase.

Concluding thoughts

While AWS App Sync is eased at its best in combination with the AWS Amplify ecosystem, if you want to keep it simple and avoid managing complexities Grafbase is the way to go. However, if you want more deeper controls then AppSync with Amplify makes sense. However, some can even look for a third alternative. i.e. AWS Amplify with Grafbase too.

Lastly, thanking Grafbase and Hashnode for giving me this opportunity to explore a promising offering with Grafbase.

Thank you, everyone, for reading this article.