Next Elections

This tutorial will show you how to create an electronic elections system that can work even with temporary networking drops and is secure.

Edge Computing

In this project, we will utilize edge computing to improve the performance and reliability of our electronic elections system.

By deploying our front-end application closer to the end users, we can reduce latency and ensure uninterrupted access, even during temporary networking drops.

With Next.JS, Tailwind CSS, and Vercel's global edge network, we can provide a more responsive user experience, regardless of network conditions.

Architecture

Vercel Architecture

The process we will follow will be to create a front-end using Next.JS and Tailwind CSS and we will deploy it in Vercel.

Below is depicted Vercel's architecture deployed in AWS. Vercel's IP address connects the user to the nearest edge location, which acts as a gateway to the network infrastructure.

For more information about this topic, check Behind the scenes of Vercel's infrastructure: Achieving optimal scalability and performance

Atlas for the Edge Architecture

This is the architecture for Atlas for the Edge.

For more information about this topic, check Atlas for the Edge

Vercel will deploy the front end and associated functions that connect to MongoDB in the Edge.

We will run a local version of the application that connects to Atlas Edge locally.

Creating the application

Let's install the Vercel CLI and create the application to be deployed in Vercel using NextJS. Use the nextjs template.

npm i -g vercel
npx create-next-app@latest elections-frontend --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"

To run the application locally use the command below.

npm run dev

After this, you can deploy it to Vercel and it will provide you with a private URL.

vercel

This is the public URL that was created for the project: https://elections-frontend-9rcgqdbvd-david-sanchezs-projects.vercel.app

And this is the public IP: https://elections-frontend-six.vercel.app/

Configure Atlas

Create a cluster in MongoDB Atlas to store all the data for the elections and then click on Device & Edge Sync to enable Sync.

Then define a name for the Edge Server and select the cluster that you have created.

This will generate an installation script and a token.

curl https://services.cloud.mongodb.com/edge/install.sh | bash -s - --app-id=elections-jrvuvzf --platform=compose

The token will look like this: iOqUaaZvGMQbacH9bEp000wTGYVMubrnHw03xcuPJ1L93hlYlIQ3ODfnjhG8wM

Once you configure Device Sync, the Sync server will create a mirror collection in the database that starts with __realm_sync that will contain all the documents to be synchronised across all clusters.

Load data into the cluster

We have prepared a script that generates random citizens and locate them in Autonomous Comunities.

import os
from dotenv import load_dotenv
from pymongo import MongoClient
import random
import base64

# Load environment variables from .env file
load_dotenv()

# MongoDB connection details
mongo_uri = os.getenv("MONGO_URI")
mongo_db = os.getenv("MONGO_DB")
mongo_collection = os.getenv("MONGO_COLLECTION")


# Generate a random DNI with checksum letter
def generate_dni():
    dni = ""
    for _ in range(8):
        dni += str(random.randint(0, 9))
    checksum = calculate_checksum(dni)
    return dni + checksum

# Calculate the checksum letter for a given DNI
def calculate_checksum(dni):
    checksum_letters = "TRWAGMYFPDXBNJZSQVHLCKE"
    dni_number = int(dni)
    checksum_index = dni_number % 23
    return checksum_letters[checksum_index]

# Connect to MongoDB
client = MongoClient(mongo_uri)
db = client[mongo_db]
collection = db[mongo_collection]

# List of Spanish autonomous communities
comunidades = ["Andalucía", "Aragón", "Asturias", "Baleares", "Canarias", "Cantabria", "Castilla y León", "Castilla-La Mancha", "Cataluña", "Comunidad Valenciana", "Extremadura", "Galicia", "La Rioja", "Madrid", "Murcia", "Navarra", "País Vasco"]

# List of Spanish names
spanish_names = ["Antonio", "María", "Manuel", "Carmen", "José", "Ana", "Francisco", "Isabel", "Javier", "Laura"]

# List of Spanish surnames
spanish_surnames = ["García", "Rodríguez", "González", "Fernández", "López", "Martínez", "Sánchez", "Pérez", "Gómez", "Martín"]

# Generate and store citizen documents
batch_size = 50000
citizens = []
for _ in range(1000000):
    name = random.choice(spanish_names)
    surname1 = random.choice(spanish_surnames)
    surname2 = random.choice(spanish_surnames)
    comunidad = random.choice(comunidades)
    dni = generate_dni()
    citizen = {"name": name, "surname1": surname1, "surname2": surname2, "dni": dni, "comunidad": comunidad}
    citizens.append(citizen)
    if len(citizens) == batch_size:
        collection.insert_many(citizens)
        citizens = []
# Insert the remaining citizens
if citizens:
    collection.insert_many(citizens)

# Close MongoDB connection
client.close()

Configure Edge Server

This EC2 instance will simulate a data centre on each Autonomous Community, although it should be more granular so you have a server per polling station. The image selected is ubuntu-jammy-22.04-amd64-server-20240411.

Once created, run the script generated by Atlas.

export PATH="$PATH:/home/ubuntu/.mongodb-edge/bin"
edgectl init --app-id=elections-jrvuvzf --platform=compose
edgectl start

If you don't have docker installed, you have to install it. In Ubuntu 22 you can do that with the following command:

sudo apt update
sudo apt install apt-transport-https ca-certificates curl software-properties-common
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg
echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
sudo apt update
sudo apt install docker-ce
sudo systemctl status docker

If you find an error like this:

Running 'docker compose --file /home/ubuntu/.mongodb-edge/profiles/elections-jrvuvzf-01/docker-compose.yml up --detach'...
permission denied while trying to connect to the Docker daemon socket at unix:///var/run/docker.sock: Get "http://%2Fvar%2Frun%2Fdocker.sock/v1.46/containers/json?all=1&filters=%7B%22label%22%3A%7B%22com.docker.compose.config-hash%22%3Atrue%2C%22com.docker.compose.project%3Delections-jrvuvzf-01%22%3Atrue%7D%7D": dial unix /var/run/docker.sock: connect: permission denied
Error: failed to run docker compose command: exit status 1

Then you might solve it with the following command. This command is used to give the current user permission to run docker commands without needing to use sudo each time. This is done by adding the user to the docker group.

sudo usermod -aG docker $USER

Then you can connect to MongoDB using the following command

mongosh --username myuser "mongodb://localhost:27021?authMechanism=PLAIN"

If mongosh is not installed, you can use the following command to add the MongoDB repo

curl -fsSL https://pgp.mongodb.com/server-7.0.asc | \
   sudo gpg -o /usr/share/keyrings/mongodb-server-7.0.gpg \
   --dearmor
echo "deb [ arch=amd64,arm64 signed-by=/usr/share/keyrings/mongodb-server-7.0.gpg ] https://repo.mongodb.com/apt/ubuntu jammy/mongodb-enterprise/7.0 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-enterprise-7.0.list
sudo apt-get update
sudo apt-get install -y mongodb-mongosh=7.0.7

Once you connect to the cluster, you will see that all the data loaded into Atlas has now been loaded into the cluster.

If you don't specify a query, an Edge Server instance defaults to a global query of "*", which automatically syncs all data in all of the collections in your linked data source.

We want to sync only data for Extremadura, to do that, we have to pick the name of the schema in App Services and then the query to apply when syncing the data.

edgectl config --query="ciudadano: comunidad == 'Extremadura'"

More info about Edge Server config here

Front end

For the front end, we are going to use Vercel and NextJS.

Here you can find a link to the voting application

This is the app currently running deployed in Vercel:

Please, visit the entry in the blog where we explain more about how the front end was built and deployed.

Building the front end

Once we create the front end, you can use the following command to build a local version of the app that can run on the edge.

vercel build

Uploading the front end to the edge

I have decided in my case to zip the code and upload it to the "edge" to run it locally.

scp -i "david-sanchez.pem" /Users/ds/elections/elections-frontend.zip ubuntu@ec2-13-40-70-114.eu-west-2.compute.amazonaws.com:~

We have to change the .env file to connect to the Edge local instance rather to the internet:

#MONGODB_URI=mongodb+srv://USERNAME:PASSWORD@elections.zz2pp.mongodb.net/?retryWrites=true&w=majority&appName=Elections
MONGODB_URI=mongodb://USERNAME:PASSWORD@localhost:27021?authMechanism=PLAIN

Now we have the application running locally on the Edge (on the polling station) and if the connectivity is lost, you will still be able to vote.

FAQ

Is there any associated cost to run this architecture?

It depends on the volumes so cost could be the same or higher. I would say it depends on the following aspects:

• Data size. As we have seen, when enabling the Edge Server functionality, a new database is created by the Sync Server (__realm_sync...) that will effectively duplicate the size of your data that you have selected to be synchronised. This might incur in greater costs if the total size (original collection and the __realm collection) is higher than the available space you had in your disk in your MongoDB cluster (as you will have to increase the size of your disk).
• Resources. When Edge Server is enabled, the data sent back from the edge to MongoDB (and viceversa) will be synchronised with __realm_sync... database, which means there is a change stream that synchronises that information with the original collection. This requires more resources in your instance and you might find it necessary to scale vertically your cluster.
• App Services cost. If you have multiple Edge Server working simultaneously and continuously syncing data, it consumes the free tier and you will have to pay for the sync runtime, data transfer, requests and compute runtime. More info here.

An error has appeared in the sync process

We are seeing the following error in Atlas, why is that?

Synchronization between Atlas and Device Sync has been stopped, due to error: cannot open a changestream against a paused cluster

This has been caused mainly because you have paused your cluster in Atlas and the sync process couldn't connect and continue syncing information.

In this case, I would recommend restarting the sync process. For more information on how this process works, refer to the MongoDB documentation (or contact MongoDB!).

More links

• https://nextjs.org/learn/dashboard-app/
• https://nextjs.org/learn-pages-router/
• https://nextjs.org/docs/pages/building-your-application/upgrading/app-router-migration#migrating-from-pages-to-app

TO DO

• Change the style to use Tailwind
• Parties and autonomous communities dynamically
• Upload the code to GitHub
• Explain the collections
• Finalise the FAQ