At Zoom, the mission is to empower developers to create innovative and engaging products utilizing Zoom SDKs. To facilitate this, a series of reference applications are being developed across various verticals, providing developers with a solid foundation to kickstart their own app development.
While there are numerous discussions regarding the optimal methods for building web applications, this article focuses specifically on the technology stack selection process for these reference apps, particularly the decision to adopt the T3 stack.
Understanding Technology Stacks for Reference Apps
When selecting a technology stack, it is essential to choose tools that cater to a broad audience of developers. For instance, while using Rust for front-end development could enhance performance, it would limit accessibility to a smaller group of developers.
In web development, JavaScript is typically the go-to language. However, due to its lack of type safety and other limitations, TypeScript—a superset of JavaScript—was chosen.
TypeScript streamlines collaboration within the development team by simplifying code writing and management. Although it introduces additional syntax that may seem daunting to some developers, its code remains largely readable as JavaScript, allowing for easier comprehension.
To further enhance usability, React was selected as it remains the most popular framework for web development. Its straightforward programming model and composable components make it an ideal choice.
The Zoom Video SDK employs JSON Web Tokens (JWTs) for session authorization, ensuring compatibility with various backend languages and frameworks. However, to maintain consistency and ease of use for developers, only TypeScript-based backends were considered.Next.js was chosen as the framework for building full-stack applications with React. It effectively abstracts complexities in web tooling for both frontend and backend development, establishing a robust foundation for the reference apps.
Next Steps in Development
With React and Next.js forming the backbone of the reference applications, additional considerations arose regarding database management and authentication processes. A critical decision was whether to utilize open-source libraries or develop custom solutions from scratch.
While creating proprietary implementations might seem appealing, it could complicate matters for developers who would need to familiarize themselves with new authentication methods. Open-source libraries offer comprehensive documentation that simplifies understanding and usage, allowing developers to focus on building rather than reinventing existing solutions.
This is where the T3 stack becomes particularly advantageous.
Introducing the T3 Stack
The T3 stack is specifically designed for use with Next.js and TypeScript. Many projects also incorporate Tailwind CSS, tRPC, Prisma, and NextAuth.js based on their specific requirements. Detailed information about the T3 stack can be found in the documentation for Create T3 App—the command-line interface (CLI) used to scaffold new projects within this framework.
Starting a new Next.js project with pre-selected libraries results in a setup very similar to what the T3 stack offers. This approach allows developers to bypass extensive configuration processes while benefiting from recent features like the App Router in Next.js; however, the decision was made to continue using the Pages Router for now.
Styling Choices
Tailwind CSS was selected for styling due to its CSS-like syntax that facilitates easy adoption and maintenance. Additionally, shadcn/ui was utilized for UI components, enabling rapid development without sacrificing ownership of each component’s source code. This approach ensures accessibility from the outset while allowing developers to customize themes according to their branding needs.
User Authentication
For managing user authentication within Next.js applications, NextAuth.js emerged as an ideal solution. Its open-source nature makes it straightforward to implement while providing simple React hooks that streamline authentication management.
Database Management and ORM Selection
Recognizing the need for a SQL database to store user data led to choosing PostgreSQL—one of the most widely used open-source databases available. To ensure type-safe database queries, an Object-Relational Mapping (ORM) tool was necessary; Prisma was selected due to its popularity and user-friendly syntax that caters well to developers new to ORMs.
API Integration
The standout feature that integrates all components seamlessly is tRPC. This tool effectively blurs the lines between frontend and backend development in an optimal manner. Initially met with some apprehension by team members, tRPC quickly gained acceptance due to its ability to facilitate individual work on shared features without code conflicts. This not only enhances collaboration but also simplifies code navigation and readability.
For those unfamiliar with any tools mentioned throughout this article, comprehensive explanations and guides are available in the T3 Stack documentation. A vibrant community is actively engaged in utilizing these tools, and there is excitement surrounding participation in this ecosystem.
Conclusion
Prioritizing developer experience and productivity is crucial both internally at Zoom and externally among users. The goal is to ensure that reference applications leverage modern tools that are easy to work with and maintain for both teams involved in their creation.
The first reference app focused on Telehealth can be explored in an introductory blog post. Future blogs will delve deeper into coding practices and technology utilization in app development. Stay tuned for more updates!
Read more such articles from our Newsletter here.
