/react-redux-firebase-blog

React + Redux + Firebase = Blog Example + Authenticated

Primary LanguageJavaScript

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

About

Using technologies:

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

More documents

Is updating ...