React Blog Application

The React Social Blog (RSB) Application is a diary app blog based on Semantic ui React for UI, Redux with react-redux for managing states and React for managing DOM .It's an open source project as a portfolio.

DEMO

Green's Diary

Features

• 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 with semantic-ui-react. It hasn't released the final version so there are some bugs that I have to face with.

In my todo list :

• 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
  • ...

What I've finished ( need debugging, testing, documentation)

* 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

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>

Atom plugins

• atom-beautify
• react

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