GAannotations is a SaaS tool that adds private annotations to Google Analytics charts, so a team can see why traffic spiked or dropped. I worked on it with the Sublime Logics team while it was still in its early versions, building the React interface, the Laravel Passport APIs, the premium payment flow and the email notifications.
Its address back then was gaannotations.com. The product has since grown and moved to Crystal Ball, with sign-in at app.crystalballinsight.com. This page covers what I built in those early versions.
Project at a glance
- Product: Google Analytics annotations manager with a Chrome extension (GAannotations, now Crystal Ball)
- Team: Sublime Logics, working remotely
- My role: React and Laravel developer (UI components, REST APIs, payments, email)
- Stack: Laravel, Laravel Passport, MySQL, React.js
What the product does
Analytics charts show that something changed but not why. Was it a campaign, a newsletter, a release or a holiday? GAannotations lets users pin private notes to specific dates, so the reason sits right next to the spike or dip.
The Chrome extension is the key feature. It shows each annotation as a tooltip over the matching date, directly on the Google Analytics dashboard. According to the original site, annotations could be added by hand or in bulk through CSV upload, the API and automations.
What I built
- React components: I built the responsive, dynamic interface components users work in.
- Laravel Passport APIs: I designed and secured the REST APIs that handle user data, authentication and access to paid features. If you need something similar, see my Laravel API integration and REST API development service.
- Payment gateway integration: I worked on the payment service that lets users upgrade to premium features.
- Email notification system: I built the system that emails users about important events and system updates, and kept it scalable.
- API documentation: I wrote the API response documentation so that people using the GAannotations API could integrate without guesswork.
What I learned
This project taught me React routing and DOM handling in React, and how to build reusable Laravel services for jobs such as payment processing and email automation. It was also good practice in full stack work inside a remote team. You can see how I approach that kind of work on my full stack web development page.
Where the project is today
According to its current website, Crystal Ball is an AI-powered business intelligence and activity tracking platform. It still has annotations at its core, described as sticky notes on your analytics charts, and it connects them with the other tools a company uses. I'm not involved in that newer work. I contributed to the early versions only.
Watch the project overview
Quick answers
What is GAannotations?
A SaaS tool that adds private annotations to Google Analytics charts. A Chrome extension shows them as tooltips on the dates they belong to.
Is GAannotations the same as Crystal Ball?
GAannotations was the product's original name and address (gaannotations.com). It has since moved to Crystal Ball at crystalball.pro.
What did you build on it?
React UI components, REST APIs secured with Laravel Passport, the payment flow for premium features, an email notification system and the API documentation.
Can you build something similar for my team?
Yes. A Laravel API, a React interface, paid plans and email alerts is the kind of project I take on. Send me the details through the contact form, or see my other work on the portfolio page, such as the MERN stack agile board.
Product websites: crystalball.pro (main site) and app.crystalballinsight.com/login (sign in). Earlier address: gaannotations.com.
Up Next