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
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
-
Installing all nodejs modules:
npm install -
Rub webpack to build bundle file
webpack -
Running server:
node server.js -
Configure firebase:
- Get firebase config
- Create a folder in root folder
react-blogset the nameconfig=>>react-blog\config - Create two files in
>react-blog\configset their namedevelopment.envandtest.env=>>react-blog\config\development.envand>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 setNODE_ENV=developmentyour project will use fromdevelopment.envto config firebase but if you set itNODE_ENV=testit will usetest.envin 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