The packages/main-app folder
The packages/main-app folder houses the main SaaS application built with Next.js 14 and the App Router.
It provides a robust starting point for your SaaS project with several key features and pre-built components.
Key Features
- Next.js 14 (opens in a new tab): Utilizes the latest features of Next.js, including the App Router.
- Authentication (opens in a new tab): Fully functional authentication setup using Auth.js (opens in a new tab)
- tRPC (opens in a new tab): Implements a type-safe tRPC client for seamless interaction with backend endpoints.
- Mantine (opens in a new tab): Uses Mantine as the primary component library and styling framework.
- Pre-built Components: Includes several pre-built pages and components as starting points.
Authentication
The application uses Auth.js (opens in a new tab) for a comprehensive authentication solution. This includes:
- Email sign-in with magic links
- Social sign-in with over 50 OAuth providers
- Secure session management
For more information, visit the Auth.js documentation (opens in a new tab).
tRPC Integration
A type-safe tRPC client is implemented for client-side interaction with backend endpoints.
- Endpoints are set up in the
packages/corefolder - All tRPC endpoints are secured by Auth.js authentication
- Provides seamless, type-safe communication between frontend and backend
Pre-built Components
The application includes several pre-built components and pages to accelerate development:
- Sign-in screens
- App dashboard with example statistics
- Table component with infinite scroll and virtualization
- Example tRPC calls for adding/removing employees in the table
Custom Hooks
Several custom hooks are provided:
- GDPR-compliant cookie consent management
- Infinite scroll for Mantine tables
- File uploads to AWS S3 buckets (e.g., for employee avatar uploads)
Theming
We use Mantine's theming capabilities, configured in theme/theme.ts. This file sets up our color schemes and default styles for all components.
Checkout the theming docs for more information.
Product Analytics
The application includes an integration with PostHog (opens in a new tab) for comprehensive product analytics:
- Pre-configured setup for tracking user interactions and events
- Seamlessly integrated with the GDPR-compliant cookie consent system
- Ensures analytics data is only collected when user permissions are granted
- Provides valuable insights into user behavior and product usage
This integration allows you to make data-driven decisions while respecting user privacy and complying with GDPR regulations.