Overview of My Submission

When utilising MongoDB Atlas charting tools one can with little code create an events driven analytics service. It's a magical feature where we can get charts with data straight from the DB.

By creating your own service we can keep as much or as little of our users data as we want in-house without worrying about sharing sensitive information with third party products or services. It is also possible to extend the service endlessly to fit all types of applications, or with further request relay mechanisms. For instance relaying events to Facebook conversion API.

And since we are just making post requests over http our clients can be very thing, without pulling in any external SDKs or big npm packages.

There are two parts to my submission:

1. The backend - which collects all the events and stores them into mongodb atlas
2. The example app - The app mimics a regular landing page with a couple of CTA buttons and navigation.

The Backend

The backend consists of a Nest.js server running graphql where the events get's stored into mongodb. It's nothing fancy it's just a create function for the events.

One thing of note is that there is no resolver / query where one can get the events out from the server. So it's completely blocked from the outside world. Events goes in but events cannot be queried.

Except in mongodb charts where we grant a service account read rights to make the charts. So there's no need to do any data aggregation on the server, mongodb atlas handles that for you, and with a little bit of getting used to even non-coding people in the organisation can make charts at their will.

The example app

This part of the submission is just a simple landing website with two pages written in react.

On the first page (home), there are a few elements which are common to all websites where the user takes some type of action and where we want to track the analytics.

I've added sending tracking events on the CTA buttons, and the navigation.

And the events are called:

• CTA1 clicked!
• CTA2 clicked!
• CTA3 clicked!
• Navigation: home
• Navigation: analytics
• Navigation: logo

These are the events that then makes up the charts on the analytics page.

On the second page (analytics), there is an Analytics page where I display the use of the events by using MongoDB Atlas charting functionality. The charts are created in the mongodb atlas cloud website and then embedded into the page using iframes provided by the charting tools.

This is really cool because to make new charts does not require any coding, and can me made on the fly, or in personal dashboards, or as in this case embedded into any website. One can aggregate the data right on the dataset, while none of the events are query-able from the server.

Submission Category:

Own Adventure (I think 🤔)

Link to Code

$ npm install

# development
$ npm run start

# watch mode
$ npm run start:dev

# production mode
$ npm run start:prod

# unit tests
$ npm run test

# e2e tests
$ npm run test:e2e

# test coverage
$ npm run test:cov

Additional Resources / Info

[Note:] # (Be sure to link to any open source projects that are using your workflow!)

I wrote the service using Nest.js for the backend, and react for the frontend.

Some other open source packages that I used:

• mongoose
• Graphql
• apollo server & client

The deployment is powered by heroku and netlify.

Hope you like what I've built!