Open SAAS

$3

$3

What's in it (WIIFM)?

$3

The application comes bundled with a fully enabled dashboard including UI elements based on bootstrap and Material UI.

$3

The application is bundled with Recharts which include a fully enabled dashboard with charts (line, donut, pie) and data hooks which loads the data from the backend directly

$3

The frontend is based on React including Apollo client for the GraphQL operations

$3

Backend is bundled with 2 micro-services and API gateway implemented in Node.JS over Typescript including full support for GraphQL data query.

#### Micro-services
Micro-services are bundled with samples for data handling on PostgreSQL and MongoDB.

(*) In order to run the backend fully Docker is required.

$3

In additions, it has plugged in Frontegg powered enterprise features FULLY MANAGED including:
- Identity management (Login, Forgot password)
- Authorization management (Roles and permissions handling)
- Team management (inviting new users and revoking access)
- Profile component including MFA and password change
- Tenants management including back-office
- Full enabled notifications center including:
- Notifications bell
- Web push support
- Webhooks infrastructure (including UI component allowing tenants to subscribe to webhooks)
- Slack Infrastructure (including UI component allowing tenants to subscribe to slack events)
- Reporting mechanism
- Send weekly digest to customers
- Host customers reports on an in-app component allowing customers to schedule their own reports and view current status

Quick Start

``sh
npx opensaas my-app --host=HOST
cd my-app
npm run start
`




(?) The Frontegg host is available upon registration with Frontegg via the Administration menu.








$3




Api gateway default port is 5000.

Metrics service default port is 5001.

Config service default port is 5002.

The dashboard can be opened on http://localhost:3000/.

Dashboard BFF is running on http://localhost:8080/.




Project structure




`
my-app
├── CONTRIBUTING.md
├── LICENSE
├── Makefile
├── README.md
├── backend
| ├── api-gw
| | ├── Dockerfile
| | ├── entrypoint.sh
| | ├── nodemon.json
| | ├── package-lock.json
| | ├── package.json
| | ├── src
| | | ├── autenticated-data-source.ts
| | | ├── lib
| | | | └── config.ts
| | | └── server.ts
| | ├── tsconfig.json
| | └── tslint.json
| └── services
| ├── config-service
| | ├── Dockerfile
| | ├── README.md
| | ├── docker-compose.yml
| | ├── entrypoint.sh
| | ├── nodemon.json
| | ├── package-lock.json
| | ├── package.json
| | ├── src
| | | ├── db.ts
| | | ├── graphql
| | | ├── lib
| | | ├── models
| | | └── server.ts
| | ├── tsconfig.json
| | └── tslint.json
| └── metrics-service
| ├── Dockerfile
| ├── README.md
| ├── docker-compose.yml
| ├── entrypoint.sh
| ├── nodemon.json
| ├── ormconfig.js
| ├── package-lock.json
| ├── package.json
| ├── src
| | ├── db
| | ├── dto
| | ├── helpers
| | ├── lib
| | ├── resolvers
| | └── server.ts
| ├── tsconfig.json
| └── tslint.json
├── bin
| └── *
├── cli
| ├── add-service.ts
| ├── add.ts
| ├── cli.ts
| ├── deploy-services.ts
| ├── init-repository.ts
| ├── remove-service.ts
| ├── remove.ts
| └── run-services.ts
├── frontend
| ├── Dockerfile
| ├── Procfile
| ├── README.md
| ├── build
| ├── index.js
| ├── nginx.conf
| ├── package-lock.json
| ├── package.json
| ├── postcss.config.js
| ├── public
| ├── src
| | ├── App.scss
| | ├── App.tsx
| | ├── Components
| | | ├── Activities
| | | ├── Alert
| | | ├── Badge
| | | ├── Breadcrumbs
| | | ├── Button
| | | ├── ButtonDropDown
| | | ├── Charts
| | | ├── DatePicker
| | | ├── Dropdown
| | | ├── FilterButton
| | | ├── FilterInput
| | | ├── Form
| | | ├── Icon
| | | ├── Image
| | | ├── Input
| | | ├── List
| | | ├── Loader
| | | ├── NavBar
| | | ├── NotificationContext.tsx
| | | ├── Pagination
| | | ├── Popup
| | | ├── ProfileImage
| | | ├── ProgressBar
| | | ├── ProjectStatus
| | | ├── SettingsButton
| | | ├── SettingsSidebar
| | | ├── Sidebar
| | | ├── Slider
| | | ├── Switch
| | | ├── Tab
| | | └── Table
| | ├── Pages
| | | ├── MainLayout
| | | | ├── Dashboard
| | | | ├── DatePickerPage
| | | | ├── FormPage
| | | | ├── MainLayout.scss
| | | | ├── MainLayout.tsx
| | | | ├── SliderPage
| | | | ├── SwitchPage
| | | | ├── TablePage
| | | | ├── UIScreenPage
| | | | ├── Widget
| | | | ├── index.tsx
| | | | ├── mockRequests.tsx
| | | | └── themes.scss
| | | ├── NotFoundPage
| | | | └── NotFoundPage.tsx
| | | └── Routes.tsx
| | ├── Tailwind.css
| | ├── declaration.d.ts
| | ├── hooks.ts
| | ├── index.scss
| | ├── index.tsx
| | ├── logo.svg
| | ├── react-app-env.d.ts
| | ├── serviceWorker.ts
| | ├── setupTests.ts
| | ├── tailwind.output.css
| | └── withFrontegg.tsx
| ├── tailwind.js
| ├── tsconfig.json
| └── tslint.json
├── lerna.json
├── npx-opensaas.gif
├── output.txt
├── package-lock.json
├── package.json
├── tsconfig.json
└── tslint.json

`







CLI




#### Add new service

npm run cli add service-name

#### Remove service

npm run cli remove service-name

#### Run application

npm run cli run

#### Init project

npm run cli init

#### Deploy project to Heroku

npm run cli deploy`

Example of requests to backend using GraphQL

curl \
-X POST \
-H "Content-Type: application/json" \
--data '{ "query": "{ features { name, id, tenantId } }" }' \
http://localhost:5000/graphql

curl \
-X POST \
-H "Content-Type: application/json" \
--data '{ "query": "{ requests { url } }" }' \
http://localhost:5000/graphql

$3