red-gold / react-social-network

Simple React Social Network

⚠️ We no longer develop this repository. Follow new version in Telar Social. Telar Social Network composed by:

• Telar Social User Interface using ReactJS.
• Telar Social running on Kubernetes (public cloud, private cloud or on-premise)
  • Telar Web designed for handling authentication, notifications, realtime actions, file storage and admin services.
  • Telar Social Serverless handling posts, comments, votes, social community and media services.

Telar Social one-click setup: OpenFaaS Cloud Community Cluster in free tier.

中文
The React Social Network is an open source project relying on React a powerful javascript library for building the user interface. In this project, I tried to show some features of react/react components as a social network. The structure of this project give the ability to developer to develop their project on their own idea and environment.

Support with buying a coffee ☕️☕️☕️

Our top backers Become a backer

Sponsors 🥉🥈🥇

Our top sponsors Become a sponsor

🌟New Upgrade :

React Social Network is moving on redux-saga however we keep redux-thunk version of React Social Network in branch name v0.5. Any contribution would be greatly appreciated by ❤️.

You should consult the CHANGELOG and related issues for more information

This project adheres to the Contributor Covenant code of conduct. By participating, you are expected to uphold this code. Please report unacceptable behavior to [email protected].

Before Starting

First of all this is a boilerplate react social and the purpose is to find the best way to implement a huge project such as social network by React . We learn what technology or algorithm could be better solution for our project by React. Please approach to this project with these ideas and if you feel that you have better solution, to our great pleasure if we could have your contribution.

• You are the person who is new to React and you are looking for some ideas to start React with some basic stuff. Also you are the fan of React Semantic UI I recommend you start with React Blog Project.
• You are the person who has the base knowledge of React which provided in React Blog Project and you are the fan of social network projects, Material-UI. You are the person who love JS/JSX. js-react-social-tutorial project will be recommended.
• You are the fan of pure Redux with redux-thunk, TypeScript, InversifyJS IOC container and you have the knowledge enough about the stuff in js-react-social-tutorial. Version 0.5.0 branch of react-social-network is the place you can find yourself.
• You are in advanced level of React and you are in love with learning advanced stuff about React such Async Component/Lazy loading, redux-saga and other cool stuff, well come you here. We are going ahead.👍

Example

Love Open Social

Required Knowledge

I recommend that you get to know React before using React Social Network. React Social Network has built by React components, so understanding how React fits into web development is important.

(If you're not familiar with the concept of Single Page Applications (SPAs), head over to the here for a quick introduction before you read on.

Document

Comming soon :) ...

Roadmap

Supporting diverse data platforms

Platform	Accessible
Firebase/Firestore	👍
Amazon Web Service (AWS)	On Developing ⚡
Azure	Future Support ⭐
ASP.NET Core	On Developing ⚡

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Prerequisites

Install NodeJs

Note

• If you're using Windows you should install all node-gyp dependencies with following commands:

$ npm install --global --production windows-build-tools and then install the package

$ npm install --global node-gyp

Installing

You also have this blog which explain installation in details and for all level.

1. Fork the react-social-network repository on Github
2. Clone your fork to your local machine

   git clone [email protected]:<yourname>/react-social-network.git

3. Go to the project root directory

   cd react-social-network

4. To install node dependencies use

npm install

OR

yarn install

1. Choose and install your backend before installing UI. React Network is able to be connected with every backend. Here we are developing some and you should choose one.

   Video tutorial

   

   With Firestore

   • Configure firebase:
     • If you don't have firebase account, follow Create firebase account
     • Create Project open the Firebase Console and create a new project.
     • Enable Firestore
     • Enable firebase storage Go to firebase console. Click on your project name. In DEVELOP menu choose Storage. Click on GET STARTED. In dialog click on GOT IT.
     • Get firebase config Go to firebase console. Click on your project name. In Project Overview page click on Add Firebase to your web app. In dialog box copy var config = <copy this area> configuration key/value. Open config file react-social-network root directory in src/config/environment.dev.ts. Pate your config in firebase : <paste here>.
     • Enable Email/Password Authentication sign-in on firebase:
       • In the Firebase console, open the Auth section.
       • On the Sign in method tab, enable the Email/password sign-in method and click Save.
     • Enable OAuth We are supporting sign-in with Github, Google and Facebook. Following firebase document you can enable each one you need.
     • Install Firestore Social Backend Follow instruction of Firestore Social Backend
   • Enable firestore dependencies
     • Go to React Social Network folder in src/socialEngine.ts write useFirestore(provider) to enable firestore dependencies!

   With AWS

   • Coming soon ...

   With ASP.NET

   • Coming soon ...

2. Go ahead ;)

   npm start

What is new? 🌟

Structure

New structure could make the project easy to change and scale up. There are three main layers:

• Core
  • Domain
  • Providing interface for data services
• Data
• This layer provide supporting variety of data platforms such as Firebase, AWS, ... .
  • FirestoreClient
  • AwsClient
  • AspNetClient
  • ...
• Components
• This layer take care of user interface which on React and in [react-mobile-social] on React Native. It means the only thing change here among these three layers on mobile app, is component layer.

IOC Container

• Using InversifyJS in project give us the ability to switch between custom dependencies easily. Specially for data layer, if you are the user working with AWS you only need to call useAws() or using Firebase call useFirestore() in SocialEngine file.

Features

• We moved from custom webpack to create-react-app.
• Moving on redux-saga managing async request and side effects.
• Supporting Async Component/Lazy loading for each container.
• Support Localization by react-localize-redux. Providing this feature we support variety of languages. To contribute ❤️ your language you are able to add your local language. You only need to edit en.json from react-social-network root project and src/locale/en.json. You should name your file according ISO 639-1 Language Codes. For example for Spanish you should name es.json. Which es is the standard code of Spanish language.
• InversifyJS as IOC container
• Add auto compile on changing code for webpack
• Open browser on after compiling on npm start. You need to set PORT=[PORT_NUMBER] in config file.
• Add reset password, confirm password and authorizing by GitHub, Google and Facebook.
• Add scroll auto loading for show posts and people pages.
• Using Firestore
• Supportig Right To Left
• Some cool stuff :)

Can I connect React Social Network to other data platforms ?

Your server side is on PHP, Java,ASP.NET, Python, etc. Or you are using serverless platforms such as Google Cloud, AWS, Azure, etc. You can connect React Social Network to any data platform. You only need to implement the interfaces of core services like implementation of firestoreClient.

There are a summary steps of creating your own dataClients. We assume that we want to implement for PHP backend.

• You need to know about TypeScript and implementing interfaces which I recommend take a look at this article.

• You can get help from other dataClient implementation for your backend algorithm and also using core domain for the backend domain could be helpful.

1. Create a folder in data layer name phpClient.
2. Create a folder in /phpClient folder name services then in services folder create some folders following core/services folder such as services/votes, services/posts and etc.
3. In each folder inside /phpClient/services/* folder you should implement following interfaces in core/services/* folder in file with appropriate name. For example we need to implement IPostService from core/services/posts/IPostService.ts in data/phpClient/services/posts/PostService.ts file.
4. After implementing interfaces for services layer. We should register the dependencies for our phpClient services. Create a file in phpClient folder name dependecyRegisterar.ts.
5. Following firestoreClient dependencies, add a function name usePhp() and bind dependencies in the the function. For example for PostService class add container.bind<IPostService>(SocialProviderTypes.PostService).to(PostService). Here SocialProviderTypes has the identifier of each service. To learn more take a look at inversify docs.
6. Finally call registering dependencies function for in socialEngine file.
7. Enjoy ;)

😍 It also would be great if you could contribute your clientData and backend with us to be part of this contribution. We would appreciate any conntribution.:thumbsup:

Deployment

• In command line of [react-social-network] root project, type firebase login. This command connects your local machine to your Firebase account and grants access to your projects. To test that authentication worked, you can run firebase list to see a list of all of your Firebase projects. The list should be the same as the projects listed at Firebase console.
• Be sure the name of firebase project for [react-social-network] and this project is same. You also need to check .firebaserc if you set correct project name in default field of projects field.

  npm run deploy:firebase

• Please checkout here for more deployment solution.

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.
• Firebase products like Analytics, Realtime Database, Messaging, and Crash Reporting let you move quickly and focus on your users.
• 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.
• redux-thunk Redux Thunk middleware allows you to write action creators that return a function instead of an action. The thunk can be used to delay the dispatch of an action, or to dispatch only if a certain condition is met. The inner function receives the store methods dispatch and getState as parameters.
• React Router V4 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.

❤️ Contributing ❤️

React Social Network has been made by love:heart:. I planed to build a back-end for this project and improve the performance as I process all procedures on the front-end side. If you'd like to help, check out the document. I'd greatly appreciate any contribution

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

• Amir Movahedi
• See also the list of contributors who participated in this project.

How To Support

• Contribution
• Fork || Star

License

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

Acknowledgments

• React
• Firebase
• JavaScript
• TypeScript

react-social-network's Issues

[BUG] Real time notifications not work (as in live example greensocial.herokuapp.com)

Steps

1 Running the app on my local machine
2 Opening two different browsers ,
3 Log in with a differed user account on each browser

Expected Result

If a user votes a post the account in that posted must get a notification in the broswer.

Actual Result

I have to refresh the page to get notification from other folowers

Version

x.y.z

Testcase

Forget password

Forget password page.

The next version

@Qolzam, you mentioned here (#15) that "The next version of this project migrate to typescript with many new awesome stuff, cleaner code, high performance, with AWS and Firebase back-end, easy deploying and CLI to modify project easily," and you also said here (#36) that , ". . . In the new version I have added both reset password and User confirmation #23. I'm trying to make time to release this update."

Given that releasing this projects as open source is big-time charity on your part and your other charitable project contributions (such as this: https://github.com/Qolzam/react-mobile-social ) to the developer community has been nothing less than magnanimous, my humble question is, how's the work on the new release coming along? Any estimation as to when you will be releasing it? Any other information you care to share? Thank you as always for your immense contribution to my life as a developer.

[Discussion] Database thoughts and ideas.

One of the difficulties with building apps on top of Document DB's is querying. I'm torn between using AWS dynamoDB and RDS postgres on AWS.

Regarding this app Firebase have a new database called Cloud Firestore, which you might be interested in.

One thing that I would like to be able to do in this Social network would be to tag users. This tag would be a many to many relationships. Ie imagine there is an attribute of type skill or endorsements (like in LinkedIn). Would this be easy to do with Firebase? I guess I could have 2 more tables, one to hold the skills and another to map the skills to the various users.

Issue messages is for issue page not private message [Edited by Qolzam]

[Idea] what about create react app instead of custom webpack

FYI

https://github.com/wmonk/create-react-app-typescript

[Discussion] Database Security

How do you protect users from writing to other users data, once they are authenticated?

[Question] Rational for circles

Given that only google has this concept of circles, I'm wondering if circles is the best approach.

Instead of organising contacts under circles, perhaps it would be better to store a users contacts/followings in a flat structure. If further organisation would be needed later the user could tag the contact via a new table, for example usertags > user > Tag1 > [userID1,userID2]

Mind you this might make it harder to query to find all users under the same tag for all users.

A user is receiving notifications for actions they carried out - the user ended up receiving my notifications

Steps

• My team mate, Ayomide and I created accounts to demo the app

• Ayomide then

1 Followed me
2 Commented on my post
3 Voted on my post

Expected Result

There shouldn't have been any expected result because those are normal interactions by a user.

Actual Result

Ayomide surprisingly received three notifications that read:

1 Ayomide Otunba follow you

2 Ayomide Otunba add comment on your post

3 Ayomide Otunba Vote on your post

What this means is that, Ayomide Otunba received three notifications that were supposed to have been mine. She was not supposed to have received any of the notifications above for actions that she carried out herself. I was supposed to have been the one receiving the notifications.

Version

x.y.z

Testcase

UserAvatar component errors

Steps

I was able to successfully create an account after my setting up Firebase config.
My partner tried to create an account and it resulted in a blank screen with the following errors.

Expected Result

Actual Result

Version

x.y.z

Testcase

[Enhancement] Apply immutable js

Growing project and data handling immutable objects is more complicated. We also ca have Other benefits by using immutable JS .

Running karma test getting errors

Steps

Expected Result

✔ 28 tests completed

Actual Result

✔ 26 tests completed
✖ 2 tests failed

ERROR in ./app/components/Master/Master.jsx
ERROR in ./app/tests/reducers/authorizeReducer.test.jsx

Version

x.y.z

Testcase

My Account

Add my account page.

[Feature request] Change Password screen

It would be great for users to reset their password. I think it would be great to have this feature.

If you want I can do this for you for the client. Maybe you could do the firebase part?

How do you deploy the application?

Would be great to have some info on where and how you deployed a production build of this project.

I suppose various people would want to host it in various places.

https://firebase.google.com/docs/hosting/
http://docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteHosting.html

Pagination for posts

Add pagination ability for loading post on a page with 5 posts per page.

Data structure optimization

All the domain should have same structure and optimized for every kind of database.

[Upgrade]Moving from redux-thunk to redux-observable/redux-saga

redux-thunk is sweet simple and easy to work. However since project grow it's more difficult to manage side effects and we need more complicated solutions but reliable.

There are two remarkable options redux-observable and redux-saga. Each has it's own advantage but redux-saga seems more clear to manage stuff and it's more handy (my personal idea :) ). In some cases in current project redux-saga solving problems with less complex code. May in other situations redux-observable is better!

I plan to create branch name v0.5 to keep only redux-thunk version of React Social Network. Therefore v0.6 would be React Social Network with redux-saga.

I appreciate any contribution 👍

Feedback button doesn't do anything

[discussion] TypeScript or Create react app

Would TypeScript or Create react app be of interest? With TypeScript you don't need to worry about proptypes.

[discussion] AWS and graphql

I have POC app I want to build am considering options. I was wondering why you choose Firebase vs other cloud providers, I myself am tempted to try to modify my own version this to work with AWS over with graphQL. What do you think of that approach?

Over layer on slidebar

When sidebar is open an over layer should be on the main contain so when user click on over layer sidebar will be closed.

Blank screen upon running web server

Steps

I git cloned the master in order to see the effects of your last commit relating to picture upload
Then proceeded to install and setup app through firebase
I ran web server

Expected Result

I expected to see the create account / login page

Actual Result

I did not see the create account / login page. I only saw a blank page. Please find attached printed screen below

Version

x.y.z

Testcase

Send feedback

Add send feedback page.

Question: auth reference vs auth() execution

Maybe you know what the difference between this two examples:

export let firebaseAuth = firebase.auth
// and
export let firebaseAuth = firebase.auth() // instead every time call firebaseAuth() just firebaseAuth.someMethod/Property

https://github.com/Qolzam/react-social-network/blob/a40c18d2533b78554cff36044948c3b6044c7c3a/app/firebase/index.js#L22

Notifications popover not working properly on mobile

Steps

I was testing the demo app on my iphone

I decided to view my notifications through my iphone

Expected Result

I expected to

be able to view all my notifications through the popover

Actual Result

I could only see one notification out of the 8 notifications I had as you can see evidenced in the screenshot attached. The popover isn't showing my other 7 notifications. Please help, thank you as always for your wonderful work.

Version

x.y.z

Testcase

Image upload help needed

Steps

I tried uploading a profile image after running the app locally

Expected Result

Image should be uploaded

Actual Result

Image did not upload . Please teach me what I am missing. Does this app need to be connected to a Google cloud storage object for image upload to be implemented or it needs another server-less backend like AWS S3 bucket? Please guide me on how to go about it.

Version

x.y.z

Testcase

[Feature Request] User account confirmation

Via email if possible.

[Enhancement] Move localization to redux-saga

Move localization support from redux-thunk to redux-saga.

Mention user in comment

Mention a user in a comment using @ for example @Qolzam.

Exception after latest build

on npm start exception thrown:

Failed to compile
/react-social-network-next/src/containers/login/LoginComponent.tsx
(261,88): Argument of type '(theme: any) => { textField: { minWidth: number; marginTop: number; }; contain: { margin: string;...' is not assignable to parameter of type 'Record<"link" | "contain" | "paper" | "textField" | "bottomPaper", CSSProperties> | StyleRulesCal...'.
Type '(theme: any) => { textField: { minWidth: number; marginTop: number; }; contain: { margin: string;...' is not assignable to type 'StyleRulesCallback<"link" | "contain" | "paper" | "textField" | "bottomPaper">'.
Type '{ textField: { minWidth: number; marginTop: number; }; contain: { margin: string; }; paper: { min...' is not assignable to type 'Record<"link" | "contain" | "paper" | "textField" | "bottomPaper", CSSProperties>'.
Types of property 'paper' are incompatible.
Type '{ minHeight: number; maxWidth: number; minWidth: number; textAlign: string; display: string; marg...' is not assignable to type 'CSSProperties'.
Types of property 'textAlign' are incompatible.
Type 'string' is not assignable to type '"left" | "right" | "center" | "start" | "end" | "inherit" | "initial" | "unset" | "justify" | "ma...'.

Any suggestions on implementing search?

@Qolzam I know you wrote implementing search under your todo list, that said, search is something that I am thinking of implementing at this time and I was wondering if you could direct me on how to go about it. In addition, could you kindly direct me to a tutorial or something I can read to gain a better understanding.

I have looked into AWS Mobile Hub and Appsync. I have been thinking about the possibility of using an AWS serverless architecture, but my inexperience has been impending my efforts. Any help or explanation will be appreciated.

I have no idea how to implement these solutions, but have you seen them? Any thoughts?

https://github.com/toyeebgodo/aws-mobile-appsync-events-starter-react

https://github.com/aws/aws-amplify

https://firebase.google.com/docs/firestore/solutions/search

https://github.com/deltaepsilon/firebase-search

https://github.com/firebase/flashlight

Thank you so much as always.

Better sourcemaps

In chrome debugging isn't so good. I'll look at various sourcemap options.

Black and white source, and hovering over variables produces no output.

Upgrade to react version 16

Facebook released React v16 with new Fiber rendering pipeline allows for a lot of performance improvements. Master branch of react-social-network is React v16 59304fa. We also keep react-social-network with react version 15 in react-v15 branch.

Who's using React Social Network?

Drop a name and a link!

Debounce in resizing

For better performance, resizing window should use debounce to reduce calling times.

[Bug]Can not close notifications from popup

Steps

Try to close notification from notification popup

Expected Result

The clicked notification must closed

Actual Result

Nothing happened
getting error in console (Uncaught TypeError: notifyActions.dbDeleteNotify is not a function)

Version

x.y.z

Testcase

Tslinting?

This might help:
https://github.com/blakeembrey/tslint-config-standard

Circle Name Exist

Check if circle name exist before adding new circle.

Tagline not visible on Profile page

Steps

1 While running a demo of the app on http://greensocial.herokuapp.com
2 I clicked on the edit profile button
3 I added a few lines about me to the Tagline

Expected Result

I expected that my tagline will show up on my profile upon updating it.
Can you educate me on the purpose of the tagline as I thought it was meant to be like the bio feature on Instagram

Actual Result

Nothing showed up on my profile.

Version

x.y.z

Testcase

Debugging with vs code on Windows machine

Steps

Try to debug the application with Debugger for Chrome plugin in vs code

Expected Result

Actual Result

Break points ignored

Version

x.y.z

Testcase

[BUG] Provider icons not appear in login page browsing with Firefox

Steps

Loading login page with Firefox

Expected Result

To see icons for Google + , Github, Facebook, etc

Actual Result

icons not appear

Version

x.y.z

Testcase

[Bug] Get compile error on npm start

react-social-network-next/src/api/FileAPI.ts
(39,5): Type '(this: FileReader, readerEvent: FileReaderEvent) => void' is not assignable to type '((this: FileReader, ev: ProgressEvent) => any) | null'.
Type '(this: FileReader, readerEvent: FileReaderEvent) => void' is not assignable to type '(this: FileReader, ev: ProgressEvent) => any'.
Types of parameters 'readerEvent' and 'ev' are incompatible.
Type 'ProgressEvent' is not assignable to type 'FileReaderEvent'.
Property 'getMessage' is missing in type 'ProgressEvent'.

Can't see followers

Steps

Follow a user:

On the followed account you can't see the follower

Firebase picture upload

Steps

I just finished installing and setting up the app through Firebase

I tried posting something

Expected Result

I expected to be able to upload a picture from my computer to my newsfeed and avatar.

Actual Result

I was able to post words to the newsfeed, however I was not able to upload any picture to neither my newsfeed nor my avatar. Please help.

Version

x.y.z

Testcase

Notification on Following

Steps

• Click follow user
• Add user in a circle

Expected Result

If user1 Add user2 in a circle notification should be appeared only at the first time.

Actual Result

Every time user1 add user2 in a circle, user2 will receive notification. If we add user2 in 3 circles, user2 will receive 3 notifications.

Version

v0.1

environment.dev.ts (5,13): " should be '

Hello , I am getting below error... Please help

ts-loader: Using [email protected] and C:\Users\handm\Dropbox\MundelProjects\React\GitProjects\react-social-network\tsconfig.json

Could not find implementations for the following rules specified in the configuration:
ter-indent
no-extra-boolean-cast
Try upgrading TSLint and/or ensuring that you have all necessary custom rules installed.
If TSLint was recently upgraded, you may have old rules configured which need to be cleaned up.
Failed to compile.

C:/Users/handm/Dropbox/MundelProjects/React/GitProjects/react-social-network/src/config/environment.dev.ts
(5,13): " should be '

Question: How's database structure and security rules?

Reply Comment

Reply to comment with mentioning the person and focusing on comment text field.

What are your thoughts on TSX?

I noticed that you use jsx instead.