resolver/docs/README.md

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 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 two files in >react-blog\config set their name development.env and test.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=.appspot.com
     MESSAGING_SENDER_ID=<SENDER_ID>HOST_URL
     

• For example you should add HOST_URL=http://localhost:3000 in config/development.env for development environment and then add HOST_URL=http://hostname.com in config/production.env for production environment

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

react-social-network