Repository files navigation

The React Social Blog(RSB) Application is a diary app blog based onSemantic ui React for UI,Reduxwithreact-redux for managing states andReact for managing DOM .It's an open source project as a portfolio.

Green's Diary

• React for Managing DOM
• Redux for managing states
• Semantic ui React for user interface
• react-redux connection between redux and react components
• Firebase for Data base and storage
• redux-thunk for Async actions
• Express ast, unopinionated, minimalist web framework for Node.js
• 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
• Image editor for editing images
• Notification
• Authorization

##ON DEVELOPING

Now I'm developing this project withsemantic-ui-react. It hasn't released the final version sothere are some bugs that I have to face with.

• Documentation
• Testing
• Add some features and solving bugs
  • Set vote on posts
  • Reply on comments and mention
  • Show hash tag as a link in posts
  • Show notification for all requests
  • Show validation in login
  • Show popular posts
  • Show popular tags
  • Show number of comments on posts
  • Post privacy
  • Read more on posts
  • Delete comment
  • Delete and edit post
  • Cancel writing comment
  • Search in posts
  • Show loading and progress bar until until all posts and data are loaded
  • Edit web site title in admin
  • Admin authorization
  • Set default avatar for users
  • Validation for profile component
  • Manage users component
  • Bug in admin page when I refresh browser in admin page address it will push to login page when user is logged in
  • Improve user interface
  • ...

* User can login* User can register with validation for inputs* Admin page has authorization to redirect user if user it's not authorized* Create post with hash tag(#) and image* Image gallery with upload, delete and edit images* Create comment on posts* User profile page (:feature: change user summary, contact and avatar)* User account page with validation (:feature: change user full name, email, password )* Show comments on posts* Show date of comments and posts

InstallNodeJs

1. Installing all nodejs modules:npm install

2. Rub webpack to build bundle filewebpack

3. Running server:node server.js

4. Configure firebase:

   • Getfirebase config
   • Create a folder in root folderreact-blog set the nameconfig =>>react-blog\config
   • Create two files in>react-blog\config set their namedevelopment.env andtest.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 inNODE_ENV. If you setNODE_ENV=development your project will use fromdevelopment.env to config firebase but if you set itNODE_ENV=test it will usetest.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>

• atom-beautify
• react

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

$ npm install --global --production windows-build-toolsand then install the package

$ npm install --global node-gyp

• Amir Movahedi

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