[FIXED] How to implement an admin template with react js?

Issue

I am building an online course platform using reactjs. I am using firebase as storage, database, authentication and hosting. I want to create an admin page using react-admin-firebase. My question is should I create a separate app for the admin panel and where should I host it or should I include it in the folder structure of the original app, if so how should I organise the folder structure of my original app. It is my first website so any info about this would be very appreciated!

Thank you

Solution

Just to make the answer clearer...

You could have subfolders to hold all admin related pages and components:

├── components
    ├── global
    │   └── Navbar.tsx
    │   └── Footer.tsx
    ├── main
    │    ...
    │   └── Home.tsx
    │   └── About.tsx
    │   └── Login.tsx
    │   └── Register.tsx
    │    ...
    ├── admin
    │   └── Dashboard.tsx
    │   └── Manage.tsx
    │    ...
    │   └── Settings.tsx

And in your components, you define the ProtectedRoute component

...
export default const ProtectedRoute = ({ path: Path, component: Component, ...rest }) => (
  <Route
    path={Path}
    render={props =>
    //Custom login check to be implemented by you
      logggedIn ? (
        <Component {...props} />
      ) : (
        <Redirect to="/login" />
      )
    }
  />
);

Then wherever you define your routes, I assume App.tsx

<Route exact path="/" render={props => <Main {...props} />} />
<ProtectedRoute path="/admin" component={admin} />

Answered By - BlueIcedPen

Answer Checked By - Cary Denson (PHPFixing Admin)