How I wrote Aurora in less than 30 Days

Some time ago I came across an open-source project to collect views of their websites.

I said to myself: how cool!

Since I wanted to experiment a little, as a personal challenge I made it my own to create such a thing of my own, my goal was to create an extremely simple tool, affordable for everyone, and installable without too much effort.
Let's see together the decisions I made to carry out this project!

Step 1 - Choose the Application Frameworks

Being a React fan for the UI development, I opted for the NextJS framework to build the whole application. This has greatly facilitated the management of deployments as with a couple of clicks you can connect it to a Vercel project and deploy it.

Together with Next, I opted for TailwindCSS as a framework for the User Experience, as not being a designer, helps a lot in the creation of simple scaffolds that can then be enriched at a later time.

Step 2 - Choose the Database

Initially, I took a look at a solution in MongoDB, so as not to worry too much about the possible enlargement of my data structure, but later, I ended up using PostgreSQL for the simple reason, that with a well-defined data structure, it was more convenient to think about what to do. Probably in the future, I will foresee a refactoring to a NoSQL data structure

Step 3 - The Database ORM

Being very used to working with Laravel Eloquent, I thought of looking for a similar solution also in the Javascript world, I came across Prisma, a very effective Next Generation ORM, with very clear syntax.

The problem I had, however, is the fact that proceeding step by step with the various tables and the first APIs for the graph population, I was able to notice that Prisma did not natively support many aggregation functions, and very often I found myself forced to use RAW Query to remedy the problem. Even concerning seeders, with Prisma there was no possibility of being able to split the seeding files into multiple single files, making it difficult to organize any test data.

As a result, by googling the web I found KnexJS, a less fancy ORM than Prisma, but which for my personal need was much more appropriate. KnexJS is very convenient for creating fluent queries, like the one in this example.

const user = await db("users").where("email", email).first();

Step 4 - Authentication

Regarding authentication, following this principle:

NEVER store anything sensitive in localStorage such as JWTs or any other credential for that matter. The purpose of localStorage is to provide user convenience and experience by saving website states and settings.

I opted for a solution managed through an http_only Cookie that contains the JWT with user data, in this way it is possible to use all the advantages related to the JWT, but without having to worry about any XSS attacks.

And YA! Authentication is Done!

Step 5 - Collecting Data

To collect the data you need a small file that must be loaded on each page.

For this configuration, I used an IIFE that calls a URL and passes the essential parameters to be able to give information to the user.

Aurora is completely cookieless, therefore it is absolutely GDPR Compliant, no personal data is saved inside it.

For the build of the tracking file, I used Webpack, already present in NextJS, with some small customizations in its configuration file.

const path = require("path");

module.exports = {
  entry: "./tracker/aurora.js",
  output: {
    path: path.resolve(__dirname, "public"),
    filename: "aurora.js",
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
    ],
  },
};

And the .babelrc

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "regenerator": true
      }
    ]
  ]
}

Step 6 - Charts Madness

For charts I absolutely did not want to go crazy, I looked for the simplest solution to the problem and I found it in React ChartKick.

This library has allowed me to manage many types of graphs through a single general component. (Many of which, even then I didn't use: D)

What was missing in my opinion, however, was an immediate view of the statistics through a dedicated panel, so I drew with a few lines of CSS and a couple of ideas on Dribbble, a generic component that allows me to show this view in the way I wanted!

Check out this!

Step 7 - Testing

This is a currently open step, I'm studying Crypress.io and implementing step by step, an appropriate testing suite for a production environment.

Wrapping Up

So, let's see a quick review of what you can grab from Aurora:

• Aurora is simple, no complex knowledge is required to get started.
• One dashboard, your data inside, no more GA infinite menus, with tons of buttons.
• You can deploy your application and start tracking in really 5 minutes!
• With Aurora, you can create and manage multiple websites at the same time, with a pair of clicks!

So, is Aurora the Perfect Project? Absolutely not. It was born as a simple coding experiment. Could it be that it will?
Maybe yes, everything needs time to grow, who knows, maybe the community will welcome Aurora into her family, and help her grow!

Wanna see a demo?
Check this out

If you want to get in touch with me, follow me on Twitter!

See you next time! :)

Renato