The Frontend Tech Stack at FanAI
Introduction
Amazing web experiences are often built upon great tech stacks. At FanAI, we carefully select tools and packages that propel our frontend feature deliveries without sacrificing flexibility. It can be easy to get lost in the ever-expanding ecosystem of JavaScript packages. If you are looking for frontend tech stack direction or inspiration, look no further! In this post, we will cover what FanAI uses for:
- Foundational Tools & Libraries
- Styling
- Component Organization
- State Management
- Authentication
- Charts, charts & more charts!
- Deployment
Foundational Tools & Libraries
If you are up-to-date on recent web trends, you will not be surprised to learn that FanAI’s frontend is written in TypeScript. We leverage TypeScript’s static type-checking to expose potential implementation problems early, which enables our development team to code with more confidence. Using TypeScript, we define our web components using the powerful combination of React (hooks included) and Redux.
The React library provides us a means by which to define modular, declarative components with well-defined rendering behavior. Redux, on the other hand, provides an observable, centralized data store with unidirectional data flow for handling events. Together they provide a solid app foundation. While some may argue that React hooks are a replacement for Redux, we find that using a hybrid approach is working well for us. Hooks are there when we choose them, and we have the great tools such as time travel debugging at our disposal.
Styling
Let’s talk about styling web components at FanAI. To better understand the technology choices that we have made with regard to styling, it helps to have the context of the workflow with our design team. Our UI/UX designer — a one-man army named Lance — creates mock ups in a tool called Sketch and exports those mock ups to an app named Zeplin that provides helpful CSS to jump-start style implementations.
While these style exports save us a lot of time, vanilla CSS is not quite enough for our team. The need for major extended CSS features such as variables and nested rules led our team to use PostCSS, a superset of CSS, to enrich our stylesheets. Improving Zeplin CSS snippets using extended features from PostCSS and creating layouts using CSS grid provides our team with everything we need to bring style to our app.
Component Organization
While styling decisions are important, determining how to organize a growing system of components can be a far more significant decision. At FanAI, we use Atomic Design to categorize our components based on relative complexity. Atomic design is a methodology inspired by chemistry that organizes components similar to chemical structures (e.g. atoms, molecules, organisms).
Our directory structure and component organization is a reflection of the above progression of categories. Our smallest components are classified as atoms, components that display multiple atoms are classified as molecules and our more complex components that display multiple molecules are considered organisms. While the concept of Atomic Design is simple and straightforward, be aware that the lines between categories can sometimes be blurry. That being said, the team at FanAI really enjoys the level of organization that comes from applying Atomic Design.
State Management
The FanAI app employs a hybrid approach to state management. For state that is shared across many components in the app, such as authentication state and user information, we leverage an observable Redux state container that enables us to create actions and propagate events to other components in the system. Redux brings far more than just state management to the table. It also enables the use of helpful middleware such as our very own @fanai/request-redux-middleware for fetching state from the backend as well as great browser tools such as redux-devtools that provide us an interactive view of the current app state at a glance, which can serve as a time-saving debugging tool.
While Redux provides great features and functionality for global app state, we have a lot of state that is more localized. For those cases we leverage React hooks such as useState and useContext to store and provide state within a more localized context.
Authentication
Now that we have covered foundations and style, let’s move on to authentication. FanAI’s core requirements for authentication are fairly simple: We need password-based accounts and tight security. To satisfy those requirements we use Google Firebase.
Having already embraced Google Cloud for our backend, Google Firebase was a natural choice for our frontend team. Firebase provides a drop-in authentication solution with a simple SDK and extensive compliance with existing security standards. Our team also makes use of the Google Firestore database through the same SDK to supplement our backend and expedite some of our feature development, making Firebase a critical component of our frontend stack.
Charts, Charts & More Charts
As a sponsorship data platform, we are all about crunching numbers. We pull massive amounts of data related to our customers and their sponsors and transform that data into information that helps match teams with sponsors and evaluate sponsorship effectiveness. How do we display all of this valuable information? HighCharts! We use a variety of HighCharts to display interactive visualizations that are stylish and easy to consume.
Deployment
When it comes time to build and ship our latest features, the team at FanAI leverages Google Cloud Build for Continuous Integration and automated deployments. We use Cloud Build to run our automated tests and bundle our assets using Webpack before deploying to various staging environments. Once we have qualified our release with both automated and manual testing, we deploy to the Firebase Hosting service.
While Firebase Hosting is already aligned with some of our other technology choices, it offers some serious benefits such as simplistic setup, a blazing-fast CDN service and free SSL certificates that make it worthy of consideration.
Closing
Knowing more about FanAI’s frontend tech stack may leave you asking some hard questions such as “Should I switch to using package X?” or “What are the benefits of using package X over package Y?” It is important to remember that a more ideal solution will always be on the horizon and become apparent after you are well beyond the start of a project. Our advice is to stay pragmatic; consider the return on investment from changing direction; and most importantly, stay focused on delivering great products!
And one more thing: If you are a strong frontend developer that would enjoy working on an exciting sponsorship performance analytics platform in the heart of Santa Monica, CA, send us your resume!
