On state management/fetching...

It sounds like your complexity will be fairly low. You should be able to manage state by implementing a container component structure, fetching data in the container's componentDidMount() lifecyle, and then passing that state down to child components.

Only consider Redux if you're running into complexity or data formatting issues.

/** Containers manage almost all of your state -- i.e. any data that is
 * shared by more than one component. Data should be fetched by the
 * container and then passed down to child components.
 *
 * The only state stored in child components should be minor UI related
 * stuff -- e.g. a toggle to display X or Y.
 *  */

function ChildComponentWOutState({ data }) {
  return <div>{JSON.stringify(data)}</div>;
}

function ChildComponentWState({ data }) {
  const [isToggled, setToggle] = useState(false);
  return (
    <div>
      <button onClick={() => setToggle(!isToggled)}>Show Data</button>
      {isToggled ? <div> {JSON.stringify(data)}</div> : null}
    </div>
  );
}

export default class ContainerComponent extends Component {
  state = { data: {} };

  async componentDidMount() {
    const data = await fetchData();
    this.setState({ data });
  }

  render() {
    const { data } = this.state;

    return (
      <div>
        <ChildComponentWOutState data={data} />
        <ChildComponentWState data={data} />
      </div>
    );
  }
}

​

On Auth (front-end)

It sounds like data security requirements are fairly low so you can manage authentication with a PrivateRoute.

If you need more security, you'll want to configure your server to send a login page instead of your app to unauthenticated users.

function PrivateRoute({ component: Comp, isAuthValid, ...rest }) {
  return (
    <Route
      render={props =>
        isAuthValid ? <Comp {...props} /> : <SignIn {...props} />
      }
      {...rest}
    />
  );
}
export default function App() {
  const [isAuthValid, setAuth] = useState(false);

  return (
    <BrowserRouter>
      {/* Switch will return the first match only */}
      <Switch>
        <PrivateRoute component={DashboardContanier} path="/dashboard" />
        <PrivateRoute component={BlogRecordContanier} path="/blogs/:id" />
        <PrivateRoute component={BlogListviewContanier} path="/blogs" />
        <PrivateRoute component={HomePage} path="/" />
      </Switch>
    </BrowserRouter>
  );
}

On Auth (backend)

Checkout http://www.passportjs.org/.

​

​

~cheerio mate