# React Blogging App + React-Bootstrap + MongoDB + Flux-architecture

A minimal example of using a React frontend Blogging App with a Node backend.

• 🕺 Demo
• 📐 Design Points
• ✔️ Functionalities
• 💻 Local Development

Demo

Demo deployment: example API call from the React UI is fetched with a relative URL that is served by an Express handler in the Node server.

Design Points

This is a fronend UI of a combo of two npm projects, the backend server and the frontend UI. So for the backend server of this project go to blogs_backend

• [React UI] is generated by create-react-app.
• We used React router-library for managing navigation in a React-application.
• React Bootstrap is used for styling the application.
• Redux (using Flux architecture) was used for state management.

Flux-architecture

Facebook developed the Flux - architecture to make state management easier. In Flux, the state is separated completely from the React-components into its own stores. State in the store is not changed directly, but with different actions. Facebook has an implementation for Flux, but we will be using the Redux - library. It works with the same principle, but is a bit simpler. Facebook also uses Redux now instead of their original Flux.

Functionalities

1. User Registration using backend
2. CRUD Operations like

• User can add/delete a blog.
• User can put a like to any blog.
• User can see all blogs and other users.

Local Development

Run the [API server]

Make sure to clone the blogs_backend and go to its directory

In a terminal:

# Initial setup
npm install

# Start the server
npm start

Install new npm packages for Node

npm install package-name --save

Run the React UI

The React app is configured to proxy backend requests to the local Node server. (See "proxy" config)

In a separate terminal from the API server, start the UI:

# Initial setup
npm install

# Start the server
npm start

Install new npm packages for React UI

npm install package-name --save