AI Supercharged LowCode Platform CMS and Framework

Protofy is a Full-Stack, batteries included Low-Code enabled web/app and IoT system with an API system and real time messaging.

You can use this as a base to fast prototype Apps, webs, IoT systems, automations or APIs. Based on: Protofy (protoflow + visualui + protolib + protodevices) + Expo + Next.js + Tamagui + Solito + Express + Aedes + Redbird + Many other amazing packages

You can think of protofy as a Wordpress but based in react and javascript and some features from supabase, plus visual widget editors to edit source code inside the admin panel itself and a a visual editor for react pages (wysiwyg). A ultra-extensible CMS with supercharged capabilities, mobile support and IoT support (esp32 thanks to esphome).

📦 Included packages

• Protoflow LowCode interactive diagram system for Javascript and typescript)
• VisualUI What you see is what you get for react,like FlutterFlow but for react
• Protolib Protofy Framework on top of react, express and tamagui
• Express API system (With automatic CRUD creation)
• Aedes mqtt server
• Redbird http reverse proxy
• Tamagui 🪄
• Solito for cross-platform navigation
• Expo SDK
• Next.js
• Expo Router
• Many more things!

🗂️ Folder layout

The project has two main folders:

• apps

  • expo (native)
  • next (web)
  • api (express API to create the web or app)
  • admin-api (express API with the admin API)
  • proxy (redbird reverse proxy)

• packages shared packages across apps

  • ui includes your custom UI kit that will be optimized by Tamagui
  • app you'll be importing most files from app/
    • bundles
      • custom the custom bundle, put here your custom pages, components, apis etc. The admin panel reads and writes on this bundle.
  • protolib Protofy react library with high level widgets and functions to bootstrap the web/app creation
  • protoflow Protofy react library to draw js/ts/jsx/tsx as diagrams
  • visualui Protofy react library to do WYSIWYG in react
  • protodevice Protofy integration with ESPHome for IoT and device management

You can add other folders inside of packages/ if you know what you're doing and have a good reason to.

🔑 Key features

There are many features and artisanal technologies included in this starter. Let's explain some of them and where to find them.

Cascading prompt system for LLM context management

Code Debugging and Assistance: Get context-aware help in debugging and understanding complex code. Project-Specific Guidance: Receive advice and suggestions tailored to your current project's context. Learning and Development: Utilize the LLM’s context-aware responses for learning new programming concepts relevant to your work.

VisualUI

WSIWYG editor for react. You can find it on packages/visualui. It's a technology that you can use to edit your react components. It's used by the admin panel to edit custom pages.

Protoflow

Lowcode system for Javascript/Typescript code manipulation, editing and visualization. You can find it on packages/protoflow. It's used to edit behaviours.

🚀 Getting started

Using a freezed version:

node prepare.js
yarn && yarn dev

Using the latest version (recommended until stabilization):

node prepare.js --latest
yarn && yarn dev-latest

• node prepare.js to initialize submodules (protoflow, protolib and visualui). Only needed the first time.
• Install dependencies: yarn
• local dev: yarn dev

By default there is a proxy running on port 8080 that redirects to the next.js app on port 3000 and the api on port 3001 and the adminApi on port 3002. You can go to apps/proxy/index.js to change defaults or add more services like the expo app.

Once the nextjs app is running you can go to http://localhost:8080 to see the web app.

🙋‍♂️ Adding a user

The first time you run the starter you won't have users. You can easily create one on http://localhost:8080/auth/login but this one will be a normal user. If you want to create an admin user you can do it by running the following command:

yarn add-user user@email.com password admin

We just created a user with admin type, but this is only a plain text user type identifier. You can create as many user types as you want while creating the users.

The admin panel requires to have a user with admin type to be able to access it.

🔨 Workspace

Once you've logged in you will be able to access the workspace. The workspace is the place where you can create your apps, webs, apis, devices, etc (Also known as adminpanel).

🆕 Add new dependencies

· Pure JS dependencies

If you're installing a JavaScript-only dependency that will be used across platforms, install it in packages/app:

cd packages/app
yarn add date-fns
cd ../..
yarn

· Native dependencies

If you're installing a library with any native code, you must install it in expo:

cd apps/expo
yarn add react-native-reanimated
cd ..
yarn

☝️ Update new dependencies

· Pure JS dependencies

yarn upgrade-interactive

You can also install the native library inside of packages/app if you want to get autoimport for that package inside of the app folder. However, you need to be careful and install the exact same version in both packages. If the versions mismatch at all, you'll potentially get terrible bugs. This is a classic monorepo issue. I use lerna-update-wizard to help with this (you don't need to use Lerna to use that lib).

You may potentially want to have the native module transpiled for the next app. If you get error messages with Cannot use import statement outside a module, you may need to use transpilePackages in your next.config.js and add the module to the array there.

Roadmap

Comming soon...

Credits and references

Many thanks [@natew] for creating the original starter and to @FernandoTheRojo for the Solito starter monorepo which the original [@natew] starter was forked from. Check out Fernando Rojo his talk about using expo + next together at Next.js Conf 2021.