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>
    )
}

Documents

• Awesome Redux
• Redux offical docs
• Redux example es6
• Firebase Docs
• Redux Blog Example + Nodejs Server

More documents

Is updating ...