TRPG instant IM software client, based on React and React Native + Redux

TRPG instant IM software client, based on React and React Native + Redux

TRPG instant IM software client, based on React and React Native + Redux .Simply put, it is similar to DingTalk, Slack, Discord and other functional chat software made with instant messaging as the core and assisted by other business needs.

Simply put, it is similar to DingTalk, Slack, Discord and other functional chat software made with instant messaging as the core and assisted by other business needs.

This project includes the following:

  • TRPG Engine front-end webpage
  • TRPG Engine mobile terminal
  • TRPG Engine Universal Portal

Official document:

Online address:

Mobile download:


  • Character card system based on XML description (can be understood as a dynamic form) -Playground
  • Practice and tool chain of sharing redux state between web and RN
  • Multi-terminal coexistence and code sharing (Web terminal, RN terminal, Portal terminal (Portal terminal is the way that RN terminal performs some intermediate operations through webview, similar to H5 terminal of various mobile apps) )
  • Some other self-development utilities, such as RN端WEB端通用Portal组件快速生成通用表单基于BBCode的消息解释器,通用缓存管理机制

Package & run

Recommended NodeJS version: v10.19.0

$ npm install

RUN dev npm $ ## run local development server

The development server be accessed to access the client. The client needs to cooperate with the server to run normally. For details, you can check the server project TRPGEngine/Server

About development progress

  • Currently there are both new and old versions on the web, and the old version is used by default
  • It is currently recommended to experience the new version of the UI, which can be switched through the menu in the lower left corner
  • Currently the mobile terminal corresponds to the old version of the web version of the UI, and the mobile terminal corresponding to the new version of the UI is under planning
  • The new version of the mobile terminal can achieve a better browsing experience through Chrome PWA

About environment variables

  • PLATFORM: Compiled platform, optional: webappelectron, by defaultweb
  • NODE_ENV: Compiler environment, optional: productiondevelopment, defaultdevelopment
  • TRPG_HOST: Compile the specified back-end server address, default value: (compile environment developmentis
  • ASSET_PATH: Resource file path, default is /. Used to specify the cdn address of the packaged resource. Such as//

New UI release log and preview

Some screenshots of the old UI

desktop version:




  • Q: Why don't I use the ready-made QQ WeChat to communicate but use your independent application to run the group?
  • A: This question seems to be why there are dedicated DingTalk and corporate WeChat communication tools for work, Slack for software, and Discord for games. Because in addition to the most basic communication, other auxiliary functions are often needed TRPG Engineto meet this demand. TRPG EngineIt will not pursue other functions, but will focus on the field of running a group for continuous deep cultivation. It would be good to be able to meet the needs of this specific group of people

About contribution

Welcome to send pr, please describe the purpose of the change in detail when initiating pr, it will be more convenient for review

About open source

This project is based on the GPLv3 open source agreement . It is not allowed to be used for any unauthorized commercial activities.

Download Details:

Author: TRPGEngine


Source Code:

react reactjs javascript redux

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

React and React Redux — Connecting to Redux

Redux is a light weighted State Management Tool that helps the components in our React App to communicate with each other. The simple concept behind this is that every state of the component is kept in a store that will be global. So that every component can access any state from that store.

ReactJS With Redux.

As one starts building his application in ReactJS, one needs to keep an eye on the complexity of application state management. As the application state tree grows with more nodes, the complexity to manage them also increases widely. So, we need a state management utility to manage our states effectively. Here will be using Redux, a library coupled with our ReactJS application for state management.

Learn React Redux With React Hooks - React JavaScript Tutorial

In this video I wanted to show the basics of Redux in React, I didn't go over anything complex as I wanted this to be a beginners introduction into Redux. Let me know in the comments if you would like to see more content on redux such as Redux Thunk.

Full Shopping Cart By React & Redux

Build Shopping Cart Using React, Redux, React Router, React Reveal and React Modal.