Domain Monitor - A React SPA with MongoDB Cloud Services as a Backend

Simon — Thu, 13 Jan 2022 18:58:15 +0000

Overview of My Submission

I have a bunch of domains that I track using a shell script that sends me weekly emails with domain statuses. Some of the domains are mine, and I follow them because I don't want to miss the expiration date. The rest are the domains that aren't available now, but I'd like to acquire them once they become available. I've been using the script for years, and it suited me well, except for not having a friendly interface for adding and removing domains to the list.

Once I saw the announcement about this hackathon, I knew that it would be a perfect opportunity to rebuild that old and basic script into something more sophisticated and also to explore MongoDB Cloud along the way.

The result is a React single-page, multi-user application that uses MongoDB Atlas for storing domain entries, Realm functions and triggers for querying WHOIS servers, daily updates, and change detection. An email notification is sent to the user when a change is detected.

Submission Category:

Action Star

Link to Code

tunaitis / domain-monitor

Self-hosted React SPA for monitoring domain names.

Domain Monitor

Domain Monitor is a React single-page application for tracking domain status changes.

Hosting on MongoDB Cloud

Requirements

Node.js is required to build the application and then deploy it to the cloud using the Realm CLI. If you don't have it already, please download it from here.

MongoDB Cloud account is required to access MongoDB Atlas and MongoDB Realm. MongoDB Atlas is for hosting the application's database, and MongoDB Realm is for hosting serverless functions and static files. Static files can be hosted anywhere else, but I recommend using MongoDB Realm just for simplicity. Create MongoDB Cloud account here.

The application can be deployed to MongoDB Cloud using the Realm UI, but a more convenient way is to use the Realm CLI. You can find how to install and configure the Realm CLI here.

An SMTP server is an optional requirement to receive email notifications when…

View on GitHub

Additional Resources / Info

The live demo is here.

Also, if you are interested in self-hosting the app, you can find the instruction on how to do that in the project repository.

GitHub Action for Generating a World Map of Repository Contributions

Simon — Wed, 08 Dec 2021 18:01:57 +0000

I found the inspiration to create this workflow after seeing some GitHub repositories listing contributors at the end of README. I thought that having a visual representation that shows where the contributors live would be a nice addition to those lists.

My Workflow

Below is a minimal example of how to use the workflow to get an SVG map generated and placed inside your repository once a week.

name: Create Contributor Map

on:
  schedule:
    - cron: "0 8 * * 1"

jobs:
  build-and-push-image:
    runs-on: ubuntu-latest

    steps:
      - name: Contributor Map
        uses: tunaitis/contributor-map@v1

A new file "contributor-map.svg" will be committed to your repository at the end of the workflow. You can then include it in your README or any other Markdown document inside your repository using the following syntax:

![Title of the map](contributor-map.svg)

Submission Category:

Wacky Wildcards

Yaml File or Link to Code

tunaitis / contributor-map

Automatically generate a world map showing where contributions to your repository are coming from.

Introduction

Contributor Map is a GitHub action that automatically generates an SVG world map with countries colored according to the number of received code contributions.

It uses GitHub API to get a list of repository contributors and their profile information. The location field from the public profile is used to determine the country from which the contribution came.

The action can generate a world map for any public GitHub repository.

Usage

Adding the following to an existing workflow would create a new "contributor-map.svg" file inside your repository.

- name: Contributor Map
  uses: tunaitis/contributor-map@v1.1

The following example would generate a map showing contributions of the facebook/react repository and save it to your repository's data folder.

- name: Contributor Map
  uses: tunaitis/contributor-map@v1.1
  with:
    repository: facebbook/react
    output: data/facebook-react.svg

Example of the action inside a workflow that wouild run the action every Monday at 8AM UTC to…

View on GitHub

Additional Resources / Info

Other actions used in the workflow:

For the world map generation, a template from Wikipedia is used:

https://en.wikipedia.org/wiki/Wikipedia:Blank_maps#/media/File:BlankMap-World.svg

The following open source databases were used to convert user-entered location information to ISO Alpha-2 country codes:

DEV Community: Simon

Domain Monitor - A React SPA with MongoDB Cloud Services as a Backend

Overview of My Submission

Submission Category:

Link to Code

tunaitis / domain-monitor

Self-hosted React SPA for monitoring domain names.

Domain Monitor

Hosting on MongoDB Cloud

Requirements

Additional Resources / Info

GitHub Action for Generating a World Map of Repository Contributions

My Workflow

Submission Category:

Yaml File or Link to Code

tunaitis / contributor-map

Automatically generate a world map showing where contributions to your repository are coming from.

Introduction

Usage

Additional Resources / Info