React + Redux + Firebase = Blog Example + Authenticated

This project is a simple blog using React, Redux & Firebase.

Register and Login
Create and Edit Post
View Posts List
View Post

Demo online

http://react-redux-blog.firebaseapp.com/ Demo:

![demo gif] [demo] [demo]: https://media.giphy.com/media/l396NAqYcOiPewcs8/giphy.gif

Starter kit

React redux starter kit

About

Using technologies:

React
React Router
React Hot Loader
Babel for ES6 and ES7 magic
Webpack for bundling
style-loader, sass-loader and less-loader to allow import of stylesheets in plain css, sass and less,
Redux's futuristic Flux implementation
Firebase - Database
Redux Dev Tools Extensions for next generation DX (developer experience).
React redux starter kit
Redux-await - Manage async redux actions sanely
Redux Form Form validate
Draft.js Text Editor
React-bootstrap Bootstrap component
React Masonry
Bootstrap-sass import scss to app
FontAwesome font icons
SimpleLineIcons font icons
Animate.css best for transitions

Installation

git clone https://github.com/thanhtungdp/react-redux-firebase-blog blog
cd blog
npm install

Running dev server

npm run dev
(or npm run start)

Default server is running on port 8080. If you want to change, you can edit at configs/webpack_dev.js. Go to: http://localhost:8080

Building production

npm run buid

It generates static file public/bundle.js.

You can run public/index.html

Directory structure

Root
├── app
│   ├── api
│   ├── components
|	├── redux
|	|	├── actions
|	|	├── reducers
|	|	├── actions
|	|	├── containers
|	|	├── Root.js
│   ├── routes
│   ├── stylesheets
│   ├── views
│   ├── App.js
├── configs
|	├── webpack_dev.js
├── public
|	├── index.html
├── package.json
├── server.js
└── webpack.config.js

Import other sass packages

Edit at app/App.js Example:

import '../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss';
import '../node_modules/font-awesome/scss/font-awesome.scss'
import './stylesheets/style.scss';

Using with react router

You can edit at app/routes/index.js

// Import react
import React from 'react';
import {Router, Route, IndexRoute, hashHistory} from 'react-router';
import { syncHistoryWithStore, routerReducer } from 'react-router-redux';

// Import components
import AppMaster from '../views/AppMaster';
import SearchAppContainer from '../redux/containers/SearchAppContainer';

export default () => {
    return (
        <Route path="/" component={AppMaster}>
            <IndexRoute component={SearchAppContainer}/>
            <Route path="/search(/:search)" component={SearchAppContainer}></Route>
        </Route>
    )
}

harmonous/react-redux-firebase-blog