Our Frontend Tech Stack: Focused On Performance And Scalability

TypeScript

TypeScript has become an indispensable part of our toolbox, and we can no longer imagine working without it. It helps us catch errors early, maintain a more robust codebase, and scale our projects more efficiently. Additionally, it streamlines communication between our frontend and backend applications.

React

React has become so popular and widely used that we can safely say it has effectively become a de facto standard in frontend web development. This is one of the key reasons we chose it as the backbone of our frontend technology stack. Its vast ecosystem offers numerous resources, tools, and libraries that significantly enhance the development experience. Additionally, React's popularity ensures it is future-proof, with ongoing development and improvements guaranteed.

Next.js

For a long time, we relied on Create React App (CRA) to bootstrap our frontend applications. However, as our projects grew in complexity, we faced challenges due to the lack of updates to CRA. At one point, even the React documentation stopped recommending it for creating new projects. So, over the past two years, we made a significant shift to Next.js for all new projects, finding it to be a more powerful and flexible solution that aligns with modern development practices.

Next.js offers several advantages over CRA, including built-in server-side rendering, static site generation, and enhanced performance optimizations. This transition has allowed us to build more performant and SEO-friendly applications while maintaining excellent developer experience.

Node.js

While we have a dedicated backend team that handles most of our backend development, the server-rendering capabilities of Next.js mean that we, as frontend developers, often need to consider backend code as well. Next.js utilizes Node.js for this server-side functionality which requires us to have a good understanding of Node.js to efficiently manage server-side rendering and other backend-related tasks. 

Strapi

For marketing and other content-rich websites, we use Strapi as our headless content management system (CMS). Strapi provides content teams with an intuitive and easy-to-navigate dashboard, enabling them to manage and deliver content efficiently. Its flexible and customizable backend allows us, developers, to implement project-specific custom features. Strapi’s API-first approach integrates seamlessly with our Next.js-based stack, ensuring a smooth and efficient development process.

REST / GraphQL

In most projects, we use traditional RESTful APIs for frontend-backend communication. However, for projects leveraging Strapi, we have found GraphQL to be a more convenient solution. It streamlines the communication between Next.js and Strapi, making the implementation and maintenance of our Strapi based projects more efficient and straightforward.

Ant Design 

Ant Design (Antd) has been our go-to UI framework, offering a comprehensive set of components that enable rapid and efficient application development. However, using Antd has not been without its challenges. Delivering accessible products is a top priority for us, and we have found that Antd components are not always fully accessible. This has necessitated various workarounds and fixes on our part to enhance accessibility. Additionally, when we aim to give our projects a unique and custom appearance, overriding Antd styles has proven to be clunky and difficult to maintain.

As a result, we have been experimenting with other UI libraries. We tried Radix UI, which offers unstyled components. While the developer experience with Radix has been positive, the lack of pre-defined styles places a significant demand on developers' time to implement custom styling.

Currently, we are exploring Mantine, and the experience has been excellent so far. Mantine provides a wide range of components and utilities, ensures great accessibility, and makes the process of overriding styles much easier compared to Antd. If Mantine continues to perform well, we might consider switching all of our projects to it in the future.

Styled-Components

Styled-Components further enhances our ability to create custom styles by allowing us to write CSS directly within our JavaScript code. This approach promotes better organization and reusability of styles, enabling us to seamlessly integrate our custom designs with UI libraries we use. 

TanStack Query and React Hook Form

State management and data fetching are critical aspects of any frontend application. TanStack Query (formerly React Query) has considerably improved the way we handle server state. Its caching and synchronization capabilities ensure our applications are both efficient and responsive. React Hook Form simplifies form management, providing a performant and flexible solution for handling form state and validation.

Zod and OpenAPI-TypeScript

Validation and type safety are crucial for robust applications. Zod allows us to define schemas and validate data with ease. OpenAPI-TypeScript has dramatically improved our API communication by generating TypeScript types from OpenAPI specifications. This ensures type safety and consistency between our frontend and backend, reducing the likelihood of runtime errors.

ESLint, Prettier, and Stylelint

Code quality and consistency are paramount. ESLint helps us catch potential issues and enforce coding standards, while Prettier ensures our code is consistently formatted. Stylelint keeps our CSS clean and error-free, making our styles more maintainable.

Google reCAPTCHA, Vault, and GitHub CI/CD

Security and automation are integral to our development process. Google reCAPTCHA helps protect our applications from spam and abuse. Vault manages our secrets and sensitive data securely. Our migration to GitHub has enabled our Devops team to implement advanced CI/CD pipelines, streamlining our development workflows and ensuring faster and more reliable deployments.

End-to-End Testing with Cypress

End-to-end testing is an important addition for ensuring our applications work as intended. On select projects, in coordination with our backend team, we utilize Cypress, a powerful testing framework that allows us to write comprehensive tests and catch issues before they reach production. 

Docker, Kubernetes, Sentry, AWS, and S3

Our infrastructure and monitoring stack are equally important. Docker and Kubernetes facilitate containerization and orchestration, enabling scalable and resilient deployments. Sentry helps us monitor and debug errors in real-time. AWS and S3 provide the backbone for our hosting and storage needs, ensuring our applications are fast and reliable.

Figma

Although Figma is primarily a tool for designers, we as frontend developers spend a significant amount of time using it. Its intuitive user interface allows us to efficiently translate designs into code, ensuring seamless collaboration between design and development. This makes Figma an invaluable part of our workflow.

Conclusion

Our frontend technology stack has come a long way since the early days of GoodRequest. The adoption of Next.js and the integration of various modern yet proven technologies have significantly enhanced our development process. Yet, as we continue to evolve, we remain on the constant lookout for new technologies that can further improve our efficiency and developer experience, allowing us to build more robust, scalable, and performant applications.