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.

Since I started building this project I've planned to have a back end for this project so I haven't focused on performance until I build the back end and move some data procedure from end to back end. Therefore I need to change data structure and actions for Redux.

DEMO

Green Open Social

Document

React Social Network Document

Features

• 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-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.
• Express Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.
• 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.
• Webpack for bundling code

In my todo list

• Documentation
• Testing
• Security issues
• Performance
• Add some features and solving bugs
  • Sharing post in social itself and other socials
  • Add link feature to post
  • Add vido post
  • Add image gallery post
  • Search post and people ...

Prerequisites

Install NodeJs

Installing

1. Installing all nodejs modules: npm install
2. Rub webpack to build bundle file webpack
3. Running server: node server.js
4. Configure firebase:

   • Get firebase config

   • Create a folder in root folder react-blog set the name config => >react-blog\config

   • Create three files in >react-blog\config set their name development.env , test.env and production.env => >react-blog\config\development.env and >react-blog\config\test.env

   • Inside the files, you should write some keys of firebase configuration (each file is depend on the environment you work in NODE_ENV. If you set NODE_ENV=development your project will use from development.env to config firebase but if you set it NODE_ENV=test it will use test.env in test environment):

     API_KEY=[API_KEY]
     AUTH_DOMAIN=[PROJECT_ID].firebaseapp.com
     DATABASE_URL=https://[DATABASE_NAME].firebaseio.com
     PROJECT_ID=[PROJECT_ID]
     STORAGE_BUCKET=[BUCKET].appspot.com
     MESSAGING_SENDER_ID=[SENDER_ID]HOST_URL
     

Warning

• 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

Authors

• Amir Movahedi

License

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