DEV Community

Cover image for Cricket scoring app with Appwrite and NextJS(contd.)
Shakir
Shakir

Posted on • Updated on

Cricket scoring app with Appwrite and NextJS(contd.)

Hey all ๐Ÿ‘‹, this is in continuation to the previous post, that covered changes done on the appwrite-hackathon branch, which was mainly kept and submitted for the hackathon.

This post is not part of the hackathon, as it's over. I thought I would share a few more changes I have done recently, which should be visible on the main branch, and a preview is available via vercel hosting. Note that the web app may not work properly just in case the backend Appwrite server is not on, as I have used EC2 on AWS Cloud9 for setting it up and there are chances it can be shut when idle.

Ok, so here are a few screenshots from Appwrite that shows some backend, DB configuration etc.

Make sure the platform configuration allows requests from the client URL, in my case it's as follows.
Platform configurationThank you @meldiron for the quick help on this platform stuff.

I have setup appwrite with a custom domain, by adding an IPv4 A record for a subdomain pointing to the EC2 instance's elastic IP. The DNS configuration can be done where you bought the domain from, with out any namespace changes. Since I am using Appwrite over a domain, I have to do two extra things at Appwrite side, first the env variable _APP_DOMAIN_TARGET should be set to what ever domain over which you are intending to use Appwrite and then, you need to go the custom domains section and add the same URL.
Custom domains

And once the .env file is setup properly Appwrite can be reinstalled/installed with docker-compose up, so you would need to first download both docker-compose.yaml and .env from the recent URL provided by Appwrite, and also should have installed docker-compose.

$ cat .env | grep -i DOMAIN_TARGET
_APP_DOMAIN_TARGET=<domain-where-appwrite-would-run>
Enter fullscreen mode Exit fullscreen mode

The docker compose file should create a bunch of containers ๐Ÿ”ฅ.

$ docker container ls | grep appwrite | awk '{print $2}' | uniq                                                                                           
appwrite/appwrite:0.13.0
traefik:2.5
appwrite/appwrite:0.13.0
redis:6.0-alpine3.12
mariadb:10.7
appwrite/telegraf:1.2.0
appwrite/influxdb:1.0.0
Enter fullscreen mode Exit fullscreen mode

As seen above, appwrite also uses mariadb behind the scenes. Though I have used 0.13 here, 0.14 is already out๐Ÿ†•. I would plan for an upgrade though, just seeing how I can do a seamless upgrade.

What else, some screenshots from Appwrite that shows the DB fields.

The collections are as follows.
Collections

And all the collections are setup with document level permissions.
Document level permissions

The atrributes and indexes for each collection are as follows.

Players:

    "attributes": [
        {
            "key": "username",
            "type": "string",
            "status": "available",
            "required": true,
            "array": false,
            "format": "email",
            "default": null
        },
        {
            "key": "players",
            "type": "string",
            "status": "available",
            "required": true,
            "array": true,
            "size": 255,
            "default": null
        }
    ]
Enter fullscreen mode Exit fullscreen mode

Matches:

"attributes": [
        {
            "key": "matchName",
            "type": "string",
            "status": "available",
            "required": true,
            "array": false,
            "size": 255,
            "default": null
        },
        {
            "key": "matchNoOfPlayers",
            "type": "integer",
            "status": "available",
            "required": true,
            "array": false,
            "min": -9223372036854776000,
            "max": 9223372036854776000,
            "default": null
        },
        {
            "key": "matchNoOfOvers",
            "type": "integer",
            "status": "available",
            "required": true,
            "array": false,
            "min": -9223372036854776000,
            "max": 9223372036854776000,
            "default": null
        },
        {
            "key": "matchPlace",
            "type": "string",
            "status": "available",
            "required": true,
            "array": false,
            "size": 255,
            "default": null
        },
        {
            "key": "matchStatus",
            "type": "string",
            "status": "available",
            "required": true,
            "array": false,
            "size": 255,
            "default": null
        },
        {
            "key": "teamAName",
            "type": "string",
            "status": "available",
            "required": true,
            "array": false,
            "size": 255,
            "default": null
        },
        {
            "key": "teamAPlayers",
            "type": "string",
            "status": "available",
            "required": true,
            "array": true,
            "size": 255,
            "default": null
        },
        {
            "key": "teamBName",
            "type": "string",
            "status": "available",
            "required": true,
            "array": false,
            "size": 255,
            "default": null
        },
        {
            "key": "teamBPlayers",
            "type": "string",
            "status": "available",
            "required": true,
            "array": true,
            "size": 255,
            "default": null
        },
        {
            "key": "tossWinner",
            "type": "string",
            "status": "available",
            "required": true,
            "array": false,
            "size": 255,
            "default": null
        },
        {
            "key": "tossWinnerChoice",
            "type": "string",
            "status": "available",
            "required": true,
            "array": false,
            "size": 255,
            "default": null
        },
        {
            "key": "userID",
            "type": "string",
            "status": "available",
            "required": true,
            "array": false,
            "size": 255,
            "default": null
        },
        {
            "key": "winner",
            "type": "string",
            "status": "available",
            "required": false,
            "array": false,
            "size": 255,
            "default": null
        }
    ]
Enter fullscreen mode Exit fullscreen mode

Overs:

"attributes": [
        {
            "key": "balls",
            "type": "integer",
            "status": "available",
            "required": true,
            "array": false,
            "min": -9223372036854776000,
            "max": 9223372036854776000,
            "default": null
        },
        {
            "key": "bowler",
            "type": "string",
            "status": "available",
            "required": true,
            "array": false,
            "size": 255,
            "default": null
        },
        {
            "key": "matchID",
            "type": "string",
            "status": "available",
            "required": true,
            "array": false,
            "size": 255,
            "default": null
        },
        {
            "key": "innings",
            "type": "integer",
            "status": "available",
            "required": true,
            "array": false,
            "min": -9223372036854776000,
            "max": 9223372036854776000,
            "default": null
        },
        {
            "key": "over",
            "type": "integer",
            "status": "available",
            "required": true,
            "array": false,
            "min": -9223372036854776000,
            "max": 9223372036854776000,
            "default": null
        },
        {
            "key": "runs",
            "type": "integer",
            "status": "available",
            "required": true,
            "array": false,
            "min": -9223372036854776000,
            "max": 9223372036854776000,
            "default": null
        },
        {
            "key": "wickets",
            "type": "integer",
            "status": "available",
            "required": true,
            "array": false,
            "min": -9223372036854776000,
            "max": 9223372036854776000,
            "default": null
        }
    ],
    "indexes": [
        {
            "key": "matchID",
            "type": "key",
            "status": "available",
            "attributes": [
                "matchID"
            ],
            "orders": [
                "ASC"
            ]
        }
    ]
Enter fullscreen mode Exit fullscreen mode

BattingScoreCard:

"attributes": [
        {
            "key": "balls",
            "type": "integer",
            "status": "available",
            "required": true,
            "array": false,
            "min": -9223372036854776000,
            "max": 9223372036854776000,
            "default": null
        },
        {
            "key": "batsman",
            "type": "string",
            "status": "available",
            "required": true,
            "array": false,
            "size": 255,
            "default": null
        },
        {
            "key": "batsmanNo",
            "type": "integer",
            "status": "available",
            "required": true,
            "array": false,
            "min": -9223372036854776000,
            "max": 9223372036854776000,
            "default": null
        },
        {
            "key": "innings",
            "type": "integer",
            "status": "available",
            "required": true,
            "array": false,
            "min": -9223372036854776000,
            "max": 9223372036854776000,
            "default": null
        },
        {
            "key": "matchID",
            "type": "string",
            "status": "available",
            "required": true,
            "array": false,
            "size": 255,
            "default": null
        },
        {
            "key": "position",
            "type": "string",
            "status": "available",
            "required": true,
            "array": false,
            "size": 255,
            "default": null
        },
        {
            "key": "runs",
            "type": "integer",
            "status": "available",
            "required": true,
            "array": false,
            "min": -9223372036854776000,
            "max": 9223372036854776000,
            "default": null
        },
        {
            "key": "out",
            "type": "boolean",
            "status": "available",
            "required": false,
            "array": false,
            "default": false
        }
    ],
    "indexes": [
        {
            "key": "matchID",
            "type": "key",
            "status": "available",
            "attributes": [
                "matchID"
            ],
            "orders": [
                "ASC"
            ]
        }
    ]
Enter fullscreen mode Exit fullscreen mode

The database could be even tweaked better, with precise min max values, note that the attributes have to be defined first, unlike firestore or HarperDB, where they could be created on the fly. But this approach is ok, I think we have more control, and is secure.

Ok give it a try, and let me know if it's ok or needs improvements to the logic or UI, and feel free to modify the code and make it better.
Match summary

Thank you !!! ๐Ÿ™‚

Top comments (0)