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:
- The backend - which collects all the events and stores them into mongodb atlas
- 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
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:
- backend: https://devmongo.herokuapp.com/
- frontend: https://goofy-galileo-d36254.netlify.app/
Built with
- nest.js
- mongodb
- mongoose
- graphql
- apollo server + client
- react
- typescript
A progressive Node.js framework for building efficient and scalable server-side applications.
Description
Nest framework TypeScript starter repository.
Installation
$ npm install
Running the app
# development
$ npm run start
# watch mode
$ npm run start:dev
# production mode
$ npm run start:prod
Test
# unit tests
$ npm run test
# e2e tests
$ npm run test:e2e
# test coverage
$ npm run test:cov
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.
nestjs
/
nest
A progressive Node.js framework for building efficient, scalable, and enterprise-grade server-side applications on top of TypeScript & JavaScript (ES6, ES7, ES8) 🚀
A progressive Node.js framework for building efficient and scalable server-side applications.
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 e.g. Fastify, allowing for easy use of the myriad 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, extensible frontend applications. However, on the server-side, while there are a lot of superb libraries, helpers and tools…
facebook
/
react
A declarative, efficient, and flexible JavaScript library for building user interfaces.
React · 
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.
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!
Top comments (0)