avert / ts-ui

Telar Social Network using Reactjs

Telar Social User Interface

🚧 IT IS UNDER ACTIVE DEVELOPMENT, current version is unstable and maybe change at any time until release of v1.0.0. 🚧
⚠️ DO NOT USE IN ANY PRODUCTION ENVIRONMENT!!! ⚠️

Compatible with OpenFaaS

Demo

https://social.telar.dev

Pre-required

• Node.js
• Docker

Running locally

1. Clone repository

$ git clone [email protected]:red-gold/ts-ui.git

2. Add [127.0.0.1 social.example.com] domain into your host file. Doc you may refer to

3. Copy ts-ui/docker/config/.env.secrets.init file and set the name .env.secrets.

4. Config email to receive email notification for signup, reset password, etc. Please refer to doc #2

   Troubleshooting note

   1. Set your smtp email(e.g. for gmail is smtp.gmail.com:587) and your email [email protected]

   $ npx envedit -s ./docker/config/.env.app_config -l smtp_email=YOUR_EMAIL_SMTP -l ref_email=YOUR_EMAIL

   2. Set your email password

   $ npx envedit -s ./docker/config/.env.secrets -l ref_email_pass=YOUR_EMAIL_PASS -b64

5. Run back-end

$ cd docker
$ docker-compose up

#or new docker compose installed by docker
$ docker compose up

6. Run front-end

$ yarn
$ yarn start

Expose Social Network to the internet from your local

In the case you need to make your social network available on the internet from your local PC/Server, you may consider options below.

• inlets (Recommended): inlets uses a websocket to create a tunnel between a client and a server. The server is typically a machine with a public IP address, and the client is on a private network with no public address. inlets is considered production-ready, but you should do some testing before you depend on it. For a commercially-supported solution, see inlets PRO, which enables additional use-cases, has more thorough testing and secure defaults.

• ngrok: ngrok provides a real-time web UI where you can introspect all HTTP traffic running over your tunnels. Replay any request against your tunnel with one click.

• Cloudflare: You can connect applications, servers, and other resources to Cloudflare's network using Cloudflare Tunnel. When connected, Cloudflare can apply Zero Trust policies to determine who can reach the resource.

Blog Posts

• Telar Social one-click setup: OpenFaaS Cloud Community Cluster
• Apply Domain-Driven Design to microservices architecture
• Realtime Server-client interaction using OpenFaaS server-less function with Redux
• Easy steps from OpenFaaS to your own Telar Social Media on Cloud

Features

• Supporting Progressive Web App
• Social services, post, comment, like, connect users and etc.
• Support Internationalization or Localization.

New Changes

• Support React Hooks

Built With

• TypeScript TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
• JSX/TSX This project support both _.jsx and _.tsx files. JSX is a statically-typed, object-oriented programming language designed to run on modern web browsers. Being developed at DeNA as a research project, the language has following characteristics.
• React A javascript library for building user interfaces.
• Redux is a predictable state container for JavaScript apps.
• Material-UI A Set of React Components that Implement Google's Material Design.
• react-redux Official React bindings for Redux.
• redux-saga is a library that aims to make application side effects (i.e. asynchronous things like data fetching and impure things like accessing the browser cache) easier to manage, more efficient to execute, simple to test, and better at handling failures.
• React Router V6 for routing website location
• Sass CSS with superpowers. Sass boasts more features and abilities than any other CSS extension language out there.
• InversifyJS InversifyJS is a lightweight (4KB) inversion of control (IoC) container for TypeScript and JavaScript apps. A IoC container uses a class constructor to identify and inject its dependencies.
• create-react-app Create React App is a tool built by developers at Facebook to help you build React applications. It saves you from time-consuming setup and configuration. You simply run one command and create react app sets up the tools you need to start your React project.

Author

• Amir Movahedi

Looking for support

For questions and support please join our community.

Documents

Check out Telar Social docs

Credits

Notification sounds from Notification Sounds

License

This project is licensed under the MIT License - see the LICENSE file for details