Skip to content

Instantly share code, notes, and snippets.

@oscaromsn

oscaromsn/Modern SaaS stacks, tools and utilities.md

Last active March 19, 2025 06:56
Show Gist options
  • Save oscaromsn/c0766dd81ffa2d893bccfc6ccdaaaeef to your computer and use it in GitHub Desktop.
Save oscaromsn/c0766dd81ffa2d893bccfc6ccdaaaeef to your computer and use it in GitHub Desktop.
Download ZIP
Modern SaaS stacks, tools and utilities.md
Raw
Modern SaaS stacks, tools and utilities.md

My favorite stack and tools for SaaS development

Also see [[- Lemon Squeezy...]], [[Prisma MOC]]

1. Core Foundation

  • Python: General-purpose programming language known for its simplicity and readability, widely used for building web APIs, data processing pipelines, and machine learning models.
  • TypeScript: A strongly typed superset of JavaScript that compiles to plain JavaScript, providing static type checking, enhanced code editor support, and improved code quality. It enables better scalability, early error detection, and seamless integration with modern frameworks and libraries through its powerful type inference and tooling ecosystem.
  • bun.sh: JavaScript runtime and toolkit that provides significantly faster package installation, bundling, and testing capabilities compared to traditional Node.js tools, with built-in TypeScript support.

2. Fundamental Development Areas

  • Backend Development:
    • Backend Frameworks:
      • LangGraph: A framework for building and orchestrating complex natural language processing workflows. It integrates with large language models (LLMs) to enable advanced applications such as conversational agents, text generation, and semantic search. LangGraph provides tools for chaining prompts, managing dependencies, and visualizing execution flows, making it easier to design, debug, and scale NLP-driven systems.
      • DSPy: Python framework for declarative machine learning pipelines, enabling researchers and developers to define and execute complex data processing workflows with reusable components.
      • Haystack: Framework for building end-to-end NLP applications like search engines and question-answering systems, supporting pipelines for data ingestion, indexing, and querying.
      • n8n: Open-source workflow automation tool that allows users to create, automate, and manage workflows without code. It supports integrations with numerous APIs and services, enabling tasks such as data synchronization, event handling, and process automation across applications. Its visual editor and self-hosting capabilities make it highly customizable and privacy-friendly for developers and businesses.
  • User Interface & Styling:
    • Core UI Libraries:
      • React: Open-source JavaScript library for building user interfaces with static typing support, enabling better developer experience, enhanced code quality, and easier maintenance through compile-time type checking and improved IDE support.
    • Full-Stack Frameworks (React-based):
      • Next.js: Full-featured React framework that provides server-side rendering, static site generation, API routes, and excellent developer experience with features like automatic code splitting, image optimization, and built-in routing.
    • Styling Frameworks:
      • Tailwind CSS: Utility-first CSS framework that enables rapid UI development through composable utility classes, offering high customization while maintaining a small production bundle size through its JIT (Just-In-Time) compiler.
    • Low-Level Component Libraries:
      • Radix: Low-level UI component library that provides unstyled, accessible components with robust functionality and behavior, focusing on ARIA compliance, keyboard navigation, and proper screen reader support.
    • Reusable components (Styled):
      • Shadcn: Collection of reusable, accessible, and customizable React components built with Radix UI and Tailwind CSS, offering a robust foundation for building modern web applications with consistent design patterns.
    • Icon Libraries:
      • Lucide Icons: Modern icon library that offers a comprehensive set of customizable, consistent icons as React components, with features like dynamic color changes, size adjustments, and accessibility support.
    • Animation Libraries:
      • Framer Motion: Production-ready motion library for React that enables creating fluid animations and gestures with a simple declarative API, supporting complex transitions, drag-and-drop functionality, and advanced animation controls.
    • Font Optimization:
      • next/font: Next.js built-in font optimization feature that enables self-hosting of custom fonts with zero layout shift, automatic subsets, and optimized loading strategies for improved performance metrics.
    • Dynamic Image Generation:
      • ImageResponse: Next.js API for generating dynamic images at runtime, particularly useful for creating OpenGraph images, social media cards, and other dynamic visual content with server-side rendering capabilities.

3. Development Practices & Tools

  • CLI-enabled frameworks:
    • Kirimase: Command-line tool for building full-stack Next.js apps faster. It supercharges your development workflow, allowing you to quickly integrate packages and scaffold resources for your application with best practices in mind.
    • T3 Stack: An opinionated full-stack web development stack that integrates Next.js, TypeScript, tRPC, Prisma, and Tailwind CSS. It emphasizes type safety, performance, and developer experience, enabling seamless client-server communication, efficient database management, and rapid UI development. Designed for scalability, the T3 Stack is suitable for modern web applications requiring robust features and a clean developer workflow.
    • Redwood: Full-stack web development stack on steroids, with support for Jest, Storybook and GraphQL.
  • Code Quality & Development Tools:
    • Code Style & Best Practices:
      • ts-reset: TypeScript configuration library that provides stricter type-safety defaults and fixes common TypeScript quirks, improving type inference and catching more potential issues.
      • Absolute imports/module-path-aliases: Simplifies import paths in JavaScript and TypeScript projects by defining custom path aliases in configuration files (e.g., tsconfig.json or jsconfig.json), improving code readability and maintainability by avoiding complex relative paths.
    • Dependency Management & Patching:
      • Patch-package: Tool for making and preserving modifications to npm dependencies, allowing quick fixes to node_modules without waiting for upstream changes.
      • Renovate BOT: Dependency update automation tool that creates pull requests for outdated dependencies, with configurable update schedules and automated testing.
    • Bundle Analysis:
      • bundle-analyzer plugin: Webpack plugin that provides visual size analysis of bundled code, helping identify and optimize bundle size issues for better application performance.
    • Linters & Formatters:
      • Prettier: Opinionated code formatter that enforces consistent code style across the project, supporting multiple languages and integrating with most editors and CI/CD pipelines for automated formatting.
      • ESLint: Static code analysis tool for identifying and fixing code problems, enforcing coding standards, and catching bugs early in development with extensive rule configurations and plugin system.
    • Code Analysis & Architecture:
      • Components coupling and cohesion graph: Analysis tool that visualizes relationships between components, helping identify architectural issues and maintain clean code structure.
    • Testing Frameworks:
      • Jest: JavaScript testing framework that provides a complete testing solution with mocking capabilities, snapshot testing, code coverage reporting, and parallel test execution.
      • React Testing Library: Testing utility for React applications focusing on testing components as users would interact with them, promoting better testing practices and accessibility awareness.
      • Playwright: End-to-end testing framework that enables automated browser testing across multiple browser engines (Chromium, Firefox, WebKit) with powerful debugging tools and test generation capabilities.
    • UI Component Development Environment:
      • Storybook: Development environment for UI components that enables isolated component development, documentation, and testing with features for visual regression testing and component playground.
      • Chromatic: Visual testing and review platform for UI components, enabling automated visual regression testing, component snapshots, and collaboration through versioned design previews. It integrates seamlessly with Storybook, ensuring UI consistency across development stages.
    • Testing Methodologies:
      • Smoke Testing and Acceptance Tests: Testing methodologies where smoke tests verify basic functionality after deployment, while acceptance tests validate if the software meets business requirements and user needs.
    • Continuous Integration & Continuous Deployment (CI/CD):
      • GitHub Actions: CI/CD platform integrated with GitHub that automates build, test, and deployment workflows, enabling automated quality checks, releases, and deployments with easy configuration.
    • Git Hooks Management:
      • Husky: Git hooks manager that enables running scripts (like linting, testing, or formatting) before commits or pushes, ensuring code quality standards are met before code reaches the repository.
      • Conventional commits git hook: Git hook that enforces standardized commit message format following the Conventional Commits specification, enabling automated versioning and changelog generation.
    • Automated Release Management:
      • Semantic Release: Automated version management and package publishing tool that determines the next version number and generates changelogs based on commit messages.
    • Container Orchestration & Monitoring:
      • Kubernetes heath checks: Monitoring mechanism that verifies application health through liveness and readiness probes, ensuring proper container orchestration and high availability.
    • AI-Powered Code Review:
      • Automated ChatGPT Code Reviews: AI-powered code review system that provides automated feedback on code quality, potential issues, and suggestions for improvements using OpenAI's GPT models.
    • Codebase Analysis Tools:
      • Biome: Toolchain for formatting, linting, and analyzing JavaScript and TypeScript codebases, providing fast, incremental processing and extensible configuration options.
      • Knip: Dependency analyzer for JavaScript and TypeScript projects that detects unused files, exports, and dependencies, helping to maintain clean and optimized codebases.
      • Repomix/Repopack: Powerful tool that packs your entire repository into a single, AI-friendly file. Perfect for when you need to feed your codebase to LLMs like Claude, ChatGPT, and Gemini.
    • Others
      • Axios: Promise-based HTTP client for JavaScript and Node.js that simplifies making asynchronous HTTP requests. It supports features like request and response interception, automatic JSON data transformation, timeout handling, and error handling, making it ideal for interacting with APIs.
      • Ngrok: A secure tunneling service that allows developers to expose local servers to the internet through public URLs, enabling testing and sharing of web applications, APIs, and webhook integrations without deploying to production. It supports HTTPS, traffic inspection, and authentication, making it ideal for development, debugging, and demonstration purposes.

4. Utilities & Helpers

  • Utilities & Helpers:
    • Validation Libraries:
      • react-hook-form: Form state management and validation library that focuses on performance and developer experience, offering uncontrolled components approach, easy validation, and minimal re-renders.
      • zod: Runtime type validation library that provides powerful schema definition and validation capabilities with excellent TypeScript integration, enabling type inference and strict data validation.
    • UI Component Libraries (Specialized):
      • react-table: Headless UI library for building powerful tables in React, providing features like sorting, filtering, pagination, and row selection with complete styling flexibility.
      • recharts: Composable charting library built on D3.js that offers responsive charts with customizable components and animations, maintaining good performance with large datasets.
    • Custom React Hooks:
      • useIntersectionObserver: Custom React hook for observing element visibility within the viewport, enabling features like lazy loading, animations, and infinite scrolling.
      • useLocalStorage: Hook for managing and persisting state in local storage, ensuring data remains available across sessions with minimal code overhead.
      • useScroll: Hook for tracking scroll position and direction, commonly used for triggering animations or sticky UI elements based on scroll behavior.
      • use-debounce: Hook for debouncing function calls, delaying execution until after a specified delay, useful for optimizing performance in search inputs and API requests.
    • Utility Functions:
      • Tailwind Merge: Utility function that intelligently merges Tailwind CSS classes, automatically resolving conflicts and ensuring the resulting class list is optimized and valid. It simplifies dynamic class handling, especially when combining conditional styles or multiple class sources.
      • clsx:A lightweight utility for conditionally joining class names in JavaScript and TypeScript, simplifying dynamic class name management by merging multiple class names and filtering out falsy values.
      • nFormatter: Utility function for formatting large numbers into human-readable formats (e.g., 1K, 1M) to improve data presentation in charts or dashboards.
      • capitalize: Utility function for capitalizing the first letter of strings, useful for standardizing text inputs and display values.
      • truncate: Utility for truncating strings to a specified length and appending ellipses when needed, ensuring concise display of text in UI components.

5. Cross-Cutting Application Enablers

  • Global State Management:
    • Zustand: Lightweight state management solution with a simple API, providing hooks-based state management with minimal boilerplate, built-in TypeScript support, and middleware system for extending functionality like persistence and devtools.
    • Jotai: Atomic state management library focused on primitive state atoms, enabling fine-grained reactivity and state composition with excellent TypeScript support and minimal re-renders.
    • Recoil: Experimental state management library by Facebook that provides atomic state management with features like state dependency graphs, async selectors, and snapshot capabilities for time-travel debugging.
  • ORM/Query Builders:
    • Prisma: Modern database toolkit that provides type-safe database access, schema migrations, and powerful query capabilities with features like relations handling, transactions, and raw SQL support, along with excellent TypeScript integration and developer experience.
    • ZenStack: Open-source TypeScript toolkit for building high-quality, scalable apps faster, smarter, and happier. It centralizes the data model, access policies, and validation rules in a single declarative schema on top of Prisma, well-suited for AI-enhanced development.
    • Drizzle: Lightweight TypeScript ORM focusing on performance and developer experience, offering type safety, schema declarations, and migrations with minimal overhead and no need for a separate client runtime.
    • Kysely: Type-safe SQL query builder for TypeScript that provides compile-time SQL query validation, auto-completion, and proper handling of complex SQL operations while maintaining high performance and minimal runtime overhead.
  • Full-Stack Frameworks & Tools:
    • Full-Stack Type-Safe APIs:
      • tRPC: End-to-end typesafe API layer that enables sharing types between client and server without code generation or runtime bloat, providing automatic type inference and excellent developer experience for full-stack TypeScript applications.
      • safe-action: Type-safe server action wrapper for Next.js that provides runtime validation and type inference for server actions, ensuring type safety between client and server.
    • Data Fetching & State Synchronization:
      • tanstack/react-query: Powerful data synchronization library for React that handles fetching, caching, synchronizing, and updating server state in React applications, offering features like background updates, pagination, and optimistic updates with minimal boilerplate.
      • nuqs: URL state management library for Next.js that enables type-safe URL search params handling, providing automatic synchronization between URL parameters and application state.
    • Authentication & User Management:
      • Clerk: User authentication and management system that provides pre-built components and hooks for handling user sessions, authentication flows, and user data, offering features like multi-session management, security controls, and various social login options.
      • NextAuth.js: Authentication library for Next.js applications offering built-in support for multiple providers (OAuth, email, credentials), session management, and database adapters with easy configuration and TypeScript support.
      • Auth.js 5: Latest version of the authentication framework (formerly NextAuth.js) with enhanced features like web platform APIs, improved session management, and better framework agnostic support.
      • Auth0: Identity platform providing comprehensive authentication and authorization solutions with features like single sign-on, multi-factor authentication, social connections, and user management dashboard.
  • Data Storage & Management:
    • Relational Databases:
      • Supabase: Open-source alternative to Firebase providing PostgreSQL database, authentication, real-time subscriptions, and storage capabilities with a powerful dashboard and client libraries for easy integration.
    • Vector Databases:
      • pgvector: PostgreSQL extension that adds vector similarity search capabilities to traditional PostgreSQL databases, enabling AI/ML features like embeddings storage and nearest neighbor search directly in the database.
      • Weaviate: Vector database and search engine designed for AI-powered applications, offering semantic search, vector storage, and classification capabilities with support for various machine learning models.
    • Graph Databases:
      • Neo4j: Graph database platform optimized for storing and querying highly connected data, providing powerful relationship analysis, pattern matching, and graph algorithms for complex data structures.
    • Headless CMS:
      • Sanity: Structured content platform offering real-time collaboration, customizable editing interface, powerful querying capabilities, and seamless integration with modern web frameworks through its GROQ query language.
      • Strapi: Open-source headless CMS that provides a customizable API and an intuitive admin panel for managing and delivering content. It supports REST and GraphQL APIs, offers flexible content modeling, and integrates seamlessly with modern front-end frameworks and back-end technologies, making it ideal for creating scalable and robust web applications.
      • Contentful: Headless CMS providing flexible APIs for structured content management, enabling developers to build dynamic web experiences with centralized content storage and delivery.
      • Builder.io: Headless CMS and visual page builder that enables no-code content management, visual editing, A/B testing, and dynamic content delivery with API-first architecture and React component integration.
  • Cross-platform desktop support
    • Tauri: A lightweight framework for building cross-platform desktop applications using web technologies like HTML, CSS, and JavaScript, paired with a Rust-based backend. Tauri enables developers to create secure, performant, and small-footprint applications by leveraging the Rust ecosystem for native functionality while maintaining the flexibility of modern web development.

6. Application Features

  • Analytics & Monitoring:
    • Web Analytics:
      • Vercel Analytics: Built-in analytics solution for Vercel deployments offering real-time performance monitoring, user behavior tracking, and core web vitals analysis.
      • Upsolve AI: A platform for building and delivering customer-facing analytics-as-a-service solutions. It enables businesses to create embedded analytics dashboards with a point-and-click interface, empowering end-users to customize dashboards and visualize data effortlessly. Upsolve AI supports seamless integration with popular databases and data warehouses through its API, helping businesses focus on their core products.
    • Observability:
      • Open Telemetry: Observability framework that provides standardized collection of metrics, traces, and logs from applications, enabling comprehensive monitoring and debugging.
      • Sentry: Application monitoring and error-tracking platform that helps developers identify, diagnose, and resolve performance issues and bugs in real-time, providing detailed error reports, stack traces, and performance metrics for improved debugging and stability.
      • PostHog: Open-source product analytics and user behavior tracking platform that enables teams to collect and analyze user interactions, monitor feature usage, track events, and run A/B tests, offering tools for session recording, heatmaps, and funnel analysis to improve product performance and user experience.
      • PlausibleHQ: A lightweight, open-source web analytics tool designed to provide privacy-focused and simple-to-understand website traffic insights. It emphasizes GDPR, CCPA, and PECR compliance by avoiding cookies and invasive tracking. PlausibleHQ offers real-time analytics, actionable metrics, and integrations with various platforms, making it a streamlined alternative to traditional analytics tools.
      • Helicone AI: An analytics and monitoring platform designed specifically for AI-driven applications. It provides insights into API usage, latency, errors, and costs for popular AI services, enabling developers and teams to optimize performance, debug issues efficiently, and manage expenses effectively. Helicone AI integrates seamlessly into AI workflows, offering tools for tracking and visualizing data in real-time.
    • Experimentation Platforms:
      • Hypertune: High-performance feature flag and configuration management system focusing on developer experience with Git-based workflows, type-safe configurations, and real-time updates through edge computing capabilities.
      • Split: Feature flag and experimentation platform offering sophisticated targeting rules, metrics tracking, and A/B testing capabilities with detailed impact analysis.
      • Statsig: Product experimentation platform providing feature flags, A/B testing, and analytics with focus on data-driven decision making and quick experiment setup.
      • LaunchDarkly: Feature management platform providing real-time feature flags, sophisticated user targeting, A/B testing, and experimentation capabilities with comprehensive SDKs and enterprise-grade security features for controlled feature rollouts and testing.
    • Conversion Rate Optimization (CRO)
      • Keak: An AI-powered website optimization platform that automates A/B testing and conversion rate improvement. Keak's AI agent continuously generates website variations, launches A/B tests, and fine-tunes its model based on test results, enabling websites to self-improve over time.
  • Payments:
    • Payment Processing:
      • Stripe: Comprehensive payment processing platform that provides secure payment processing, subscription management, invoicing, and marketplace capabilities with extensive API support, webhook integration, and pre-built UI components for common payment flows.
  • Email Communication:
    • Email Templating:
      • React-email: Framework for building dynamic email templates using React components, providing a type-safe development experience, live preview capabilities, and consistent rendering across email clients.
    • Email Delivery Services:
      • Resend: Email delivery API and infrastructure that offers reliable email sending, analytics, and template management with features like bounce handling, delivery tracking, and API-first architecture.
  • Enterprise Application Features:
    • Environment Management:
      • T3 Env: Environment variable validation and type safety solution from the T3 stack, ensuring runtime safety for environment variables and providing TypeScript types for configuration values.
    • Architectural Patterns:
      • MonoRepo: Development approach using a single repository to manage multiple packages or applications, enabling shared code, consistent versioning, simplified dependencies, and coordinated changes across projects.
    • Internationalization:
      • i18n: Internationalization framework that enables multi-language support, date/time formatting, number formatting, and RTL (Right-to-Left) text handling, essential for applications targeting global audiences.
    • Search Engine Optimization:
      • Next SEO: Search Engine Optimization features including metadata management, structured data, dynamic sitemap generation, and server-side rendering capabilities to improve search engine visibility and ranking.

VSCode/Cursor extensions

See also: [[My Cursor preferences]] and [[Recomended Chrome extensions]].

  • have to set up powerline fonts “Meslo LG M for Powerline” (download)
  • auto-close-tag v0.5.6
  • auto-rename-tag v0.0.15
  • Bookmarks v9.1.0
  • code-settings-sync v3.1.2
  • debugger-for-chrome v4.10.2
  • es7-react-js-snippets v1.8.7
  • graphql-for-vscode v1.12.1
  • mdx v0.1.0
  • prettier-vscode v1.6.1
  • python v2018.9.2
  • python v0.2.3
  • rainbow-brackets v0.0.6 - this is now deprecated, use the native "editor.bracketPairColorization.enabled": true
  • shades-of-purple v3.17.0
  • vscode-graphql v0.1.5
  • vscode-import-cost v2.9.0
  • vscode-styled-components v0.0.23
  • vscode-wakatime v1.2.3
  • TabNine AI completions
  • GitHub Copilot
  • to try: File Utils - recommended by Stolinski
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment