Intercode SaaS Kit
  • Welcome to SaaS Starter Kit
  • Getting Started
    • Technology stack
    • Database Setup
    • Local Environment Setup
  • Basics
    • Dependencies
    • App architecture
    • Deployment
    • App roles
    • Endpoints List
      • Auth
      • Two Factor Auth
      • Businesses
      • Demo
      • Email
      • Export Document
      • Email Files
      • Files Demo
      • Leads
      • Orders
      • Payments
      • Subscriptions
      • Teams
      • Team Memberships
      • User Admin
  • Animation and Styles
    • Framer Motion
    • Ant Design and Styles
  • Pages
    • Auth
      • Working with PassportJS
      • Two-Factor Auth
      • OAuth Providers
    • Leads
    • Businesses
    • Team management
      • Ownership
    • Profile
    • User Settings
      • App Tour
    • App Settings
      • Lead Statuses
    • Dashboard
      • Lead volume widget
      • Doughnut chart widget
      • Recent leads table widget
      • Lead count over period widget
    • Demo
  • Features
    • Impersonation
    • Subscriptions (Stripe)
    • Search
    • Sentry
    • Captcha
    • Audit Logs
    • Internationalization
  • External integrations
    • Mailer
    • Google oAuth2
    • Facebook oAuth2
    • S3 compatible storage (AWS, MinIO)
Powered by GitBook
On this page
  • Backend
  • Frontend
  1. Basics

Dependencies

Here you will see all the packages so we used them during the development of our application. We also provide a brief description and one or more places where we used it.

PreviousLocal Environment SetupNextApp architecture

Last updated 5 months ago

Backend

N.B. Information about some services such as AWS or Sentry etc. you will find in related block of documentation. The same rule applies to the frontend part of this block.

  1. AWS SDK Packages: We used these packages with Minio to store the files in the vault. Also as additional option to mail sender.

    • @aws-sdk/client-s3@^3.504.0: S3 client to manage file storage on AWS.

    • @aws-sdk/s3-request-presigner@^3.592.0: Enables presigned URLs for S3 file access.

    • @aws-sdk/client-ses@^3.504.0: Client for sending emails through Amazon Simple Email Service (SES).

  2. NestJS Core & Extensions:

    • @nestjs/common@^10.3.1: Core decorators and helper functions for NestJS applications.

    • @nestjs/core@^10.3.1: The main core for building NestJS applications.

    • @nestjs/event-emitter@^2.0.4: Adds event-driven functionality within NestJS.

    • @nestjs/jwt@^10.2.0: Provides JWT utilities to integrate JSON Web Token authentication.

    • @nestjs/mapped-types@*: Tools to define and transform TypeScript types.

    • @nestjs/passport@^10.0.3: Integrates NestJS with the Passport authentication library.

    • @nestjs/platform-express@^10.3.1: Integrates NestJS with the Express framework.

    • @nestjs/schedule@^4.1.0: Adds support for scheduling and running cron jobs in NestJS. Example you can find in Payment module where we synchronized subscriptions in DB with subscriptions on Stripe dashboard.

    • @nestjs/throttler@^5.1.2: Adds request throttling to limit repeated requests. Used in "search" methods in Leads, Businesses and User Admin modules.

    • @nestjs/typeorm@^10.0.1: Integrates TypeORM with NestJS for database management.

  3. Email and Notifications:

    • @sendgrid/mail@^8.1.0: Allows sending emails through SendGrid's email API. How to setup it and to use it please read Mailer block of documentation.

    • @sentry/nestjs@^8.33.1: Sentry integration for error monitoring in NestJS.

    • @sentry/profiling-node@^8.33.1: Adds Sentry profiling to monitor app performance.

  4. Authentication & Authorization:

    • passport@^0.7.0: Main Passport library for authentication strategies.

    • passport-facebook@^3.0.0: Implements Facebook OAuth authentication.

    • passport-google-oauth2@^0.2.0: Implements Google OAuth 2.0 authentication.

    • passport-jwt@^4.0.1: Provides JWT-based authentication strategy for Passport.

    • nest-casl@^1.9.2: Adds CASL-based role and permission management in NestJS.

  5. Data Validation & Transformation:

    • class-transformer@^0.5.1: Transforms plain JavaScript objects into class instances.

    • class-validator@^0.14.1: Provides decorators to validate data based on set rules.

  6. Database & ORM:

    • pg@^8.11.3: PostgreSQL client for database connectivity.

    • typeorm@^0.3.20: ORM for managing entities, relationships, and queries.

    • typeorm-extension@^3.5.0: Adds support for TypeORM features like migrations.

  7. Utility Libraries:

    • axios@^1.6.7: HTTP client for making API requests.

    • bcryptjs@^2.4.3: Hashes passwords for secure storage.

    • dayjs@^1.11.10: Library for date manipulation.

    • dotenv@^16.4.4: Loads environment variables from .env files.

    • hawk@^9.0.1: Security library for HTTP authentication.

    • jsonwebtoken@^9.0.2: Generates and verifies JSON Web Tokens.

    • jwt-decode@^4.0.0: Decodes JSON Web Tokens on the client side.

    • qrcode@^1.5.3: Generates QR codes. Used in Two-factor authentication.

    • reflect-metadata@^0.2.1: Adds support for metadata reflection.

    • rimraf@^5.0.5: Utility to delete files and directories.

    • rxjs@^7.8.1: Reactive extensions for handling asynchronous events.

    • uuid@^9.0.1: Generates unique identifiers.

  8. Data Generation:

    • @faker-js/faker@^8.4.1: Generates fake data for testing, such as names, emails, and addresses. How this was used, please read Demo block of documentation.

  9. File & PDF Handling:

    • @types/multer@^1.4.11: TypeScript definitions for Multer, a file-uploading middleware.

    • wkhtmltopdf@^0.4.0: Converts HTML files to PDFs, commonly used for generating reports. File import usage you will find in File module.

  10. Payment Processing:

    • stripe@^14.20.0: Official Stripe API library for handling payments.

    • @golevelup/nestjs-stripe@^0.6.5: Adds Stripe integration for NestJS applications.

    How to setup it and use please read block.

  11. Templating:

    • handlebars@^4.7.8: Templating engine for generating dynamic HTML content, often used in email templates. Used to form email templates.

Frontend

  1. UI & Icons:

    • @ant-design/icons@^5.2.6: Icon library for Ant Design components. Alternative to Flaticon.

    • @flaticon/flaticon-uicons@^3.3.0: Flaticon’s icon pack for additional visual assets. How to setup and to use please read Style block.

    • antd@^5.20.0: Ant Design, a popular React UI library.

    • antd-img-crop@^4.21.0: Image cropper component for Ant Design.

    • @dnd-kit/core@^6.1.0: Core DnD kit for drag-and-drop functionality.

    • @dnd-kit/sortable@^8.0.0: Adds sorting capabilities for draggable items.

    • @dnd-kit/utilities@^3.2.2: Utility functions for the DnD kit.

  2. PDF Generation:

    • @react-pdf/renderer@^3.3.4: Allows PDF generation directly from React components.

  3. Payment Integration:

    • @stripe/react-stripe-js@^2.6.2: React wrapper for Stripe.js to handle payments.

    • @stripe/stripe-js@^3.0.10: Core Stripe.js library for handling payments.

  4. Testing Libraries:

    • @testing-library/jest-dom@^6.3.0: Custom Jest matchers for DOM nodes.

    • @testing-library/react@^14.1.2: Testing utilities for React components.

    • @testing-library/user-event@^14.5.2: Simulates user interactions in tests.

  5. Hooks: UseMediaQuery hook. Can be found in ui/src/hooks/

    • @uidotdev/usehooks@^2.4.1: Collection of reusable React hooks.

  6. Data Visualization: Dashboard Page.

    • chart.js@^4.4.3: Charting library for data visualization.

    • chartjs-plugin-datalabels@^2.2.0: Plugin for displaying labels on Chart.js charts.

    • react-chartjs-2@^5.2.0: React wrapper for Chart.js, making it easier to use in React apps.

  7. Date Handling:

    • dayjs@^1.11.12: Lightweight date manipulation library.

  8. Environment Management:

    • env-cmd@^10.1.0: Manages and loads environment variables from files.

  9. Animations: Framer Motion block.

  • framer-motion@^11.3.2: Animations and transitions for React components.

  1. Internationalization (i18n): I18n block.

  • i18next@^23.11.5: Core internationalization library.

  • i18next-browser-languagedetector@^8.0.0: Detects user language in the browser.

  • i18next-http-backend@^2.5.2: Backend plugin for loading translations from an HTTP server.

  • react-i18next@^14.1.2: Integration of i18next with React for translation management.

  1. Utilities:

  • axios@^1.6.7: HTTP client for API requests.

  • jwt-decode@^4.0.0: Decodes JSON Web Tokens.

  • memoize@^10.0.0: Memoization library for caching results of function calls.

  1. React and Related:

  • react@^18.2.0: Core React library.

  • react-dom@^18.2.0: DOM bindings for React.

  • react-infinite-scroll-component@^6.1.0: Infinite scrolling functionality for React. Logs and comments on Leads and Businesses pages.

  • react-phone-input-2@^2.15.1: React component for handling international phone inputs.

  • react-router-dom@^6.21.3: Routing library for React applications.

  • react-scripts@5.0.1: Scripts and configurations for Create React App projects.

  1. Styling:

  • sass@^1.70.0: CSS preprocessor for writing styles in SCSS/SASS.

  1. Web Performance:

  • web-vitals@^3.5.2: Measures and reports web performance metrics, such as Core Web Vitals.

Drag and Drop: Used in App Settings, .

Subscription (Stripe)
Lead Statuses