Project Tooling

ZTMReady is equipped with a powerful set of tools that facilitate development, testing, and styling. Each tool is carefully chosen to enhance efficiency, maintainability, and overall development experience.

Main Tooling

Next.js

Next.js (opens in a new tab) is the core frontend framework, providing a robust foundation for building React applications. It supports server-side rendering, static site generation, and seamless integration with various plugins and libraries.

TypeScript

TypeScript (opens in a new tab) enhances JavaScript by introducing static typing. It improves code readability, reduces errors, and facilitates collaboration within the development team.

Tailwind

Tailwind CSS (opens in a new tab) is a utility-first CSS framework that streamlines styling by providing pre-defined classes. Its modular and configurable nature allows for rapid development and easy maintenance of a consistent design system.

Firebase

Firebase (opens in a new tab) is integrated into the project for various features, including authentication, real-time database, and hosting.

ShadCN

shadcn/ui (opens in a new tab) is _a simple, modular and accessible component library.  Built with Radix UI and Tailwind CSS

Sentry

Sentry.io is seamlessly integrated into the ZTMReady project, providing robust error tracking and real-time monitoring to ensure a smooth and error-free user experience.

Testing

Jest

Jest

Jest (opens in a new tab) is the primary testing framework for ZTMReady. It enables unit testing and provides a comprehensive suite for ensuring the reliability of the application.

Playwright

Playwright (opens in a new tab) is employed for end-to-end testing, allowing for the automation of browser interactions. It ensures the functionality and integration of components across the application.

React Testing Library

Testing Library (opens in a new tab) provides utilities for testing React components, ensuring a user-centric approach to testing and validation.

Additional Utilities

Code Quality and Formatting

ESLint (opens in a new tab)

ESLint is used for static code analysis to catch potential errors and maintain a consistent code style across the ZTMReady project.

Prettier (opens in a new tab)

An opinionated code formatter is employed for code formatting, ensuring a clean and standardized codebase.

Form Handling

React Hook Form (opens in a new tab)

React Hook Form simplifies form management with easy-to-use React hooks. It offers a flexible and performant solution for handling forms in ZTMReady.

zod form validation (opens in a new tab)

A TypeScript-first schema declaration and validation library utilized for form validation in ZTMReady.

Animation and UI Enhancement

Framer Motion (opens in a new tab)

Framer Motion is a simple and powerful JavaScript animation library integrated into ZTMReady for creating smooth and interactive user interfaces.

Utility Libraries

• clsx: A utility for constructing class names dynamically.
• date-fns: A library for date formatting and manipulation.
• recharts: A charting library for creating interactive charts.

These additional utilities contribute to the overall development, code quality, and user experience within ZTMReady. Each tool is carefully chosen to fulfill specific roles, enhancing the project's functionality and maintainability. Explore their respective documentation for more detailed insights into their capabilities.

This selection of tools, frameworks, and libraries ensures ZTMReady is not only feature-rich but also well-maintained and future-ready. Feel free to explore each tool's documentation for more in-depth insights into their capabilities.