Giter Club home page Giter Club logo

rc4community's Introduction

Rocket.Chat for Communities

build and grow massive online communities with rocket.chat

build and grow massive online communities with rocket.chat


๐Ÿš€ Features ๐Ÿš€

  • every part of the system scalable to handle from one to over a million online community members
  • engage your community at Rocket.Chat, Github, Discourse, Discord - wherever they may be
  • innovative reactJS components enhanced with fullstack behaviors
  • choice of Identity Management - popular SaaS (auth0, firebase) and open source (gluu, keycloak OpenID Connect)
  • full virtual conference handling
  • modern profile and superprofile factoring
  • supports flauna for scaled persistence
  • fine-grained full-stack optimization control - static, server side generation, per-request
  • designed for world-scale computing at the edge from day one
  • JAMStack and beyond, "no compromises" design
  • supports NextJS and Vercel pay-as-you-grow scaled deployments
  • easy assembly of reusable components for flexible adaptive systems
  • ultra-light-weight and re-imagined UX for next generation community builder / developer experience

๐Ÿš€ Community Builder quick start ๐Ÿš€

Customize - Deploy - Manage

๐Ÿ’ป Develop your Community from any browser or Chromebook

Start developing and make changes to your code via a single click Anytime-Anywhere!

Open in Gitpod

Start designing and customizing your community management system by opening the already setup and ready to code developer environment using Gitpod!

Some Recommendations while using Gitpod:


๐Ÿš€ Developer quick start ๐Ÿš€

Development - Build - Production

๐Ÿ’ป Design and Development Time

During development, our data provider is a headless CMS, strapi.

Note that it is used only during development and build time, not during production.

NOTE: You can follow the below instructions to setup your developer environment in your local machine or use the gitpod method to code on the cloud โšก๏ธ as suggested above as well!

Pre-requisites:

volta Nodejs versioning is managed by volta. You can install it by running curl https://get.volta.sh | bash in your terminal. This assures that appropriate versions of nodeJS and npm are used and ensures compatibility for all distributed development teams.

docker Your system should have docker available for superprofile we use a dockerized local flauna instance.

git clone https://github.com/rocketchat/RC4Community
cd RC4Community
sh startdevenv.sh localhost

NOTE: Please replace the "localhost" with your static IP if you are doing environment setup on your VM.

NOTE: Please refer to this reference for setting up Rocket Chat + Google Auth with RC4Community!

The application is written on nextjs and deployable on all nextjs compatible CDN + microservices and scaled deployment platforms.

Using strapi directly - you can now have designers and devs modify the portal content directly and independently from the dev and devOps folks working on the app. While developers can now enjoy the hot refresh and rapid iterations of the nextjs dev environment.

Embedded Chat Component

RC4Community integrates the RC Embedded Chat Component to enable smooth and real-time communication within your platform!

For trying out the Embedded Chat in RC4Community, please setup the Embedded Chat by following the instructions here from the steps mentioned in there note down the Google Cloud Client ID and the Rocket Chat instance url. Now after getting the Google Cloud Client ID and the Rocket Chat instance url paste them in the app/.env with the following key name,

NEXT_PUBLIC_GOOGLE_CLIENT_ID="your google client id"
NEXT_PUBLIC_RC_URL="your url of the RC instance"
NEXT_PUBLIC_RC_ROOM_ID="public channel room id"

The NEXT_PUBLIC_RC_ROOM_ID defaults to "GENERAL".

๐Ÿ›  Application build time

This app is deployable on all nextjs compatible CDN + microservices and scaled deployment platforms.

To build for deployment, first make sure cms (strapi) is up and running, then:

cd app
NEXT_PUBLIC_STRAPI_API_URL=http://localhost:<your strapi port>   npm run build

Upon successful build, the cms (strapi) is no longer needed for deployemnt. For example, you may want to deploy to vercel via a git push.

For a workable but simple minded, non-scalable, never to be used in production deployment:

cd app
NEXT_PUBLIC_STRAPI_API_URL=http://localhost:<your strapi port>   npm run prod

Again, note that cms/strapi is not required in production and should not be started.

๐Ÿ—„ Deployment time (production deployment)

Production should be deployed as a statically generated website (with associated microservices and/or serverless execution support).

Make sure you have built the bundle (with the cms running):

cd app
npm i
NEXT_PUBLIC_STRAPI_API_URL=http://localhost:1337  npm run build

Once you have finshed the build, the optimized files are ready in the out folder. You will no no longer need the CMS running and can stop strapi. This is key, deployment does not depend on the cms, in fact the same tgz can be immediately deployed to 1000s of smart edge nginx PoP as in modern CDNs.

Take a look at deploy/deploy.sh to see how to zip up the out content into a site.tgz file and transfer to your web server (such as nginx in this example) for deployment.

โœจ About the repository โœจ

Since 2015, Rocket.Chat has been used globally by groups and organizations to create and build online communities of all shapes and sizes. Today, with millions of end users and hundreds of thousands of deployed servers, Rocket.Chat has uniquely become a networked community of community builders - a community of communities.

With its upcoming decentralized federation refactor, Rocket.Chat stands to become the next level Internet fabric that will loosely unite all on-line communities in a decentralized yet consistent manner.

This project is an extension to Rocket.Chat that aims to satisfy the immediate demands of today's community builders. Those who are intentionally building massive on-line communities (membership into the millions) centered around Rocket.Chat's core functionalities (sharing of information, collaboration, video and audio meet-ups, virtual conferences, and so on).

Unlike the team chat heritage of Rocket.Chat, this area is a trending but nascent field where major innovations are yet to be imagined. Participants in both open source and closed source space are diligently working on scalability of their platforms and systems. Rocket.Chat for Communities uniquely features an already proven scalable collaboration engine right from day number one.

If you are involved in some ways in the creation, building, and growth of massive communities online - we invite you to participate in this project; help us steer its direction and ensure its long term success.

rc4community's People

Contributors

abhinavkrin avatar abusayid693 avatar debdutdeb avatar dhruvjain99 avatar dnouv avatar dudanogueira avatar irffanasiff avatar itsmanojthapa avatar nishant23122000 avatar palanikannan1437 avatar ronlek avatar samad-yar-khan avatar sidmohanty11 avatar sing-li avatar vasucp1207 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

rc4community's Issues

TODO: Implement open source auth -- GLUU

Implement React component for Gluu Authentication.

Start with simple auth as POC.

Starting thinking about extending to maintaining a super profile assiciated with each user record.

Work with other auth implementers to make sure the component's intterfaces are compatible.

TODO: Add a video streaming viewer component

Like a youtube viewer. Shows thumbnail of video . Upon clicking starts to play video.

Enable "standard" playback controls of the underlying libray.

Make sure it can efficiently support multiple instances on one page.

[BUG] Unable to load the community logo

The community logo in the home page does not appear after loading the page.

The attached URL points to a resource that does not exist.

Browser version:
Google Chrome - Version 99.0.4844.51 (Official Build) (64-bit)

TODO: Create a Hacker News component

Create a React based Hacker News "top list" or "current list" component based on configurable criterion.

Model this one close to the existing Discourse component.

TODO: Create a "live" GSoC 2022 section

Create menu hierachy to support our GSoC and GSoD Communities:

Community
    Google Summer of Code 2022
         Program information   --->  https://docs.rocket.chat/contributors/google-summer-of-code/google-summer-of-code-2021
         Introductions  --->  https://open.rocket.chat/channel/gsoc2022
         Team -->  https://open.rocket.chat/channel/google-summer-of-code
         Leaderboard ->  https://gsoc.rocket.chat
         Virtual Conference -> https://rocket.chat
         Office Hours ->  https://rocket.chat
         Projects Ideas ->  https://docs.rocket.chat/contributors/google-summer-of-code/google-summer-of-code-2021#project-ideas
         Results -> https://docs.rocket.chat/contributors/google-summer-of-code/google-summer-of-code-2021#update-may-20th-2021
    Google Season of Doc 2022
       Program information   --->  https://docs.rocket.chat/contributors/google-season-of-docs/google-season-of-docs-2021
       Introductions  --->  https://open.rocket.chat/channel/gsod2022

TODO: Create a Reddit component

Create a React based Stack Overflow "top upvoted list" or "current list" component based on configurable criterion.

Model this one close to the existing Discourse component.

TODO: Fix the Discourse Module

Current Discourse module will keep populating the top ranking list to 10s or 100s of entries.

Re-implement the logic to select the TOP N entries - with N anywhere from 3 to 15 ONLY.

Define a "module structure" that makes sense for these sort of "full stack reactjs components", beware it will always be executing on nextJS (keep to JAMStack ideals).

Keep this work on ONE SINGLE PR.

TODO: Add Github Integration component

Create a full-stack React component that displays the top 3 to 15 issues from Github. - ranked based on a set of pre-defined filters (most voted up, for example).

This component should be very similar to the existing Discourse component.

TODO: create a Stack Overflow component

Create a React based Stack Overflow "top list" or "current list" component based on configurable criterion.

Model this one close to the existing Discourse component.

TODO: Restyle the components

Check community.rocket.chat for styling. Restyle the existing components to the standard of community.rocket.chat

BE CAREFUL:

  • keeping ALL current reactJS components responsive, when shrunk to mobile format - ti should still be highly usable
  • do not add any global styling - do each components' styling in its own CSS module
  • maintain static generation, do not write components that forces SSR (with 1 exception - the client-side countup counter)
  • do restyling of ALL current component in ONE LONG PR, do not create separate PR for components

TODO: Implement open source auth Keycloak

Implement React component for Keycloak Authentication.

Start with simple auth as POC.

Starting thinking about extending to maintaining a super profile associated with each user record.

Work with other auth implementers to make sure the component's interfaces are compatible.

Create a data-supplier component that wraps a collection of others

Investigate into the possibility of creating a component that takes datasource (strapi, URL to JSON, URL to CSV) and populate its children components iteratively with that data. Without:

  1. touching or modifying the styling of its children
  2. having any major assumption about its childrren (except perhaps an exported data population method)

TODO: Integrate an NFT marketplace

Create a React component that adds NFT marketplace integration for community members.

Investigate possibilities with OpenSea and other trending marketplaces.

[TODO] Revamp Github Component Kit

Description :

The Current Github Component Kit has the following issues :

  • The current kit has multiple components which are used using different tags ,this makes it more complicated to use
  • The database design for the component is not suitable for multiple repositories
  • The current kit does not have a pull request component

Proposed Changes

  • Create a single <Github ... /> tag which can display different components .
  • Improve database design for scalability

image

  • Create Pull Request Component

TODO: Implement Jitsi Video Conference component

Create a reactJS component from the Jitsi web SDK.

This component should enable community members to video conference with one another in:

  • 1 to 1 calls
  • scheduled meetings
  • scheduled virtual events

TODO: Implement quick commercial auth

Implement React authentication components for:

  1.  Firebase
    
  2. Auth0
    

Take the simple and direct route first as POC. Then start thinking of adding a "super profile" associated with the user account.

[BUG] Console Warning/Errors

Description:

Whenever the app is loaded we see some console warnings/errors. These are there due to the following reasons :

  1. JSX Typing errors.
  2. Not passing key props to components.
  3. Nesting Button inside another component which represent buttons.
  4. Not Passing id props to Menus/Forms.

Steps to reproduce:

  1. Run the CDN and APP.
  2. Open browser.
  3. Checkout the Console.

Expected behavior:

  1. Console warnings should be minimized.

Actual behavior:

  1. We see and error in console.
2022-01-26.20-20-49_Trim.mp4

TODO: Improve Rocket.Chat integration

Add back the "Click to Chat" button as it is on community.rocket.chat

We will want to create a new user entry into our Super Profile - when an existing user with a Rocket.Chat account first access the site.

TODO: Create a matrix.org component

Create a React component using the matrix Javascript SDK npm module.

Allows community members to collaborate via embedded federated channels.

Also enabling matrix for federated subscriptions on data channels. (such as real time distirbuted score updates)

TODO: Add a form fill component

Create a component that manages an interactive form to be filled.

Form data should be pushed to our persistence implementation data lake.

An indication if that form has been filled already, should be part of the Superprofile.

Make sure multiple instances on a page is easily handled.

TODO: Create a Discord component

Create a React component to integrate Discord.

Use the existing Rocket.Chat integration as a template and expand into Discord specific featureas.

[TODO] Refactor Leaderboard Component

Description :

Refactor Leaderboard into two components :

  • Main leaderboard.js which can be accessed via the dynamic route at -> root/gsoc/gsoc2022/orgname
  • Reusable `leaderboardcompact.js' which can be used any where by communities.

TODO: Create a Leaderboard Component

Based this React component's interface on the existing GSoC Leadeboard.

Keep the interface flexible for repurposing as Game players' Leaderboard.

[BUG] Missing date_time and duration field of speaker schema and manual updation of `Live` and `Ended` fields of speaker

Description

  • Currently the speaker speaker schema does not have a date_time field to specify the time and date of the speaker session / talk.
  • The speaker schema does not have a duration field to specify the estimated duration of a speakers talk on the main stage.
  • The live and ended fields of the speaker schema have to be manually updated to specify if a speakers session is currently live or if it has ended.

Expected Behavior

  • Speaker Schema should have a date_time field to specify time and date of the speakers event on the mainstage.
  • Auto Updation of Live and Ended fields according to date_time and estimated time_duration of the talk

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.