Simple React Social Network
中文
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.
Our top backers Become a backer
Our top sponsors Become a sponsor
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 :heart:.
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].
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.
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.
Comming soon :) ...
Platform | Accessible |
---|---|
Firebase/Firestore | :+1: |
Amazon Web Service (AWS) | On Developing :zap: |
Azure | Future Support :star: |
ASP.NET Core | On Developing :zap: |
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.
Install NodeJs
$ npm install --global --production windows-build-tools
and then install the package
$ npm install --global node-gyp
You also have this blog which explain installation in details and for all level.
git clone [email protected]:<yourname>/react-social-network.git
cd react-social-network
npm install
OR
yarn install
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.
project name
. In DEVELOP
menu choose Storage
. Click on GET STARTED
. In dialog
click on GOT IT
.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>
.src/socialEngine.ts
write useFirestore(provider)
to enable firestore dependencies!Go ahead ;)
npm start
New structure could make the project easy to change and scale up. There are three main layers:
useAws()
or using Firebase call useFirestore()
in SocialEngine file.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.webpack
npm start
. You need to set PORT=[PORT_NUMBER]
in config file.Right To Left
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.
phpClient
./phpClient
folder name services
then in services
folder create some folders following core/services folder such as services/votes
, services/posts
and etc./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.phpClient
services. Create a file in phpClient
folder name dependecyRegisterar.ts
.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.:heart_eyes: It also would be great if you could contribute your
clientData
andbackend
with us to be part of this contribution. We would appreciate any conntribution.:thumbsup:
.firebaserc
if you set correct project name in default
field of projects
field.
npm run deploy:firebase
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
We use SemVer for versioning. For the versions available, see the tags on this repository.
This project is licensed under the MIT License - see the LICENSE file for details