Events driven analytics service powered by Mongo Atlas

Carl-W - Jan 9 '22 - - Dev Community

mongo image

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.

example app

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.

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

GitHub logo ugglr / dev-mongodb-hackathon

Events driven analytics service created with MongoDB, TS, Nest.js and caffeine

dev.to MongoDB Hackathon project

By using MongoDB charting tools it's easy to setup ones own events driven analytics server. It's flexibility is far superior than using a SAAS, all the while keeing your users data safe and secure and not sharing it to any third partys unknowningly.

Demonstration Links:

Built with

  • nest.js
  • mongodb
  • mongoose
  • graphql
  • apollo server + client
  • react
  • typescript

Nest Logo

A progressive Node.js framework for building efficient and scalable server-side applications.



NPM Version
Package License
NPM Downloads
CircleCI
Coverage
Discord
Backers on Open Collective
Sponsors on Open Collective

Support us

Description

Nest framework TypeScript starter repository.

Installation

$ npm install
Enter fullscreen mode Exit fullscreen mode

Running the app

# development
$ npm run start

# watch mode
$ npm run start:dev

# production mode
$ npm run start:prod
Enter fullscreen mode Exit fullscreen mode

Test

# unit tests
$ npm run test

# e2e tests
$ npm run test:e2e

# test coverage
$ npm run test:cov
Enter fullscreen mode Exit fullscreen mode

Support

Nest is an MIT-licensed open source project. It can grow thanks to the sponsors and support by theā€¦




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.

GitHub logo nestjs / nest

A progressive Node.js framework for building efficient, scalable, and enterprise-grade server-side applications with TypeScript/JavaScript šŸš€

Nest Logo

A progressive Node.js framework for building efficient and scalable server-side applications.



NPM Version
Package License
NPM Downloads
CircleCI
Discord
Backers on Open Collective
Sponsors on Open Collective

Support us

Description

Nest is a framework for building efficient, scalable Node.js server-side applications. It uses modern JavaScript, is built with TypeScript (preserves compatibility with pure JavaScript) and combines elements of OOP (Object Oriented Programming), FP (Functional Programming), and FRP (Functional Reactive Programming).

Under the hood, Nest makes use of Express, but also provides compatibility with a wide range of other libraries, like Fastify, allowing for easy use of the myriad of third-party plugins which are available.

Philosophy

In recent years, thanks to Node.js, JavaScript has become the ā€œlingua francaā€ of the web for both front and backend applications, giving rise to awesome projects like Angular, React, and Vue, which improve developer productivity and enable the construction of fast, testable, and extensible frontend applications. However, on the server-side, while there are a lot of superb librariesā€¦





GitHub logo facebook / react

The library for web and native user interfaces.

React Ā· GitHub license npm version (Runtime) Build and Test (Compiler) TypeScript PRs Welcome

React is a JavaScript library for building user interfaces.

  • Declarative: React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable, simpler to understand, and easier to debug.
  • Component-Based: Build encapsulated components that manage their own state, then compose them to make complex UIs. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep the state out of the DOM.
  • Learn Once, Write Anywhere: We don't make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code. React can also render on the server using Node and power mobile apps using React Native.

Learn how to use Reactā€¦




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!

. . . . . . . . . . . . . . . . .