DBS Diagrams - SAAS Database Helper ReactJSDBS Diagrams - SAAS Database Helper ReactJS
saas to create database without SQL. it is a freemium service using firebase, stripe and react.js.DBS Diagrams - SAAS Database Helper ReactJS
saas to create database without SQL. it is a freemium service using firebase, stripe and react.js.Overview
Welcome to our project.
This application was built with React.js, it's useful to create your database with out using SQL and using this project you can export your diagram as SQL or as image.
You can also save your work and see the statistics of how many tables, columns, primary keys and foreign keys you have.
You can also change tables and connections style.
This service using Firebase auth (Gmail) and Stripe for payment.
Demo:
watch the video before demo.
Url: https://dbsdiagram.web.app/hom
step 1:
Login using google (Gmail)
step 2:
Enter this card information
card: 4242424242424242
cvc : Any 3 digits
date: Any future date
Features
- Login using google (Gmail)
- Pay using card (Stripe)
- trial plan
- create table and change style
- save diagrams
- export diagram as SQL
- export diagram as image
...
Requirements
- Internet
- Node.js
- Npm
- VScode
- Browser
Instructions
# Instructions
`Make sure to run your server side before your client side.`
Unzip `project.zip` file into project folder
## Firebase Rules
Unzip `project/dbsDiagrams/dbsDiagrams.zip` file into dbsDiagrams folder
Open `project/dbsDiagrams/dbsDiagrams/firebase` folder with VScode
Add `project/dbsDiagrams/dbsDiagrams/firebase/firebase-rules.txt` content to your `firebase rules` to secure your database.
login by your email to `https://console.firebase.google.com` then go to `Firestore Database` then to `Rules` the add the firebase rules.
## Server
Open `project/dbsDiagrams/dbsDiagrams/server` folder with VScode
Execute these commands
```
npm install
```
Add your website (dbsdiagrams) url to `cors` in the server (line 47)
To start the project:
```
npm start
```
## Client
Open `project/dbsDiagrams/dbsDiagrams/client` folder with VScode
In `project/dbsDiagrams/dbsDiagrams/client/src/items/constants/constants.js` file change `serverUrl` variable to your server url.
Execute these commands:
```
npm install
```
To start the project:
```
npm start
```
To build the project (build without SourceMap):
```
npm buildWin
```
# Keys
- you can get Firebase keys by login to `https://console.firebase.google.com` then you can get the keys.
- you can get Stripe keys by login to `https://stripe.com` then you can get the keys.
## Server
in `.env` file and add your `admin firebase` keys
in `.env` file add your `stripe` secret key and price id (subscription).
## Client
in `.env` file add your `firebase` keys.
in `.env` file add your `stripe` publishable key.
Other items by this author
Category | Scripts & Code / ReactJS |
First release | 26 September 2022 |
Last update | 30 September 2022 |
HTML/CSS Framework | Bootstrap |
Software framework | React |
Files included | .css, .html, Javascript .js |
JavaScript Framework | Node.js |
Tags | simple, easy, Javascript, js, money, help, Stripe, firebase, helper, react, SaaS, freemium |