You can create a private router to check authorization

[avalonprod]

You can use standard state context react

// Dependencies
import { FC } from "react"
import { Navigate, Outlet } from "react-router-dom"
import { useSelector } from 'react-redux'

// Store
import { RootState } from "../redux/store"

// Components
const PrivateRoute: FC = () => {
  const { isAuth, loading } = useSelector((state: RootState) => state.auth)

  if (loading) {
    return (
      <div style={{ background: "#e3f0ff" }}></div>
    )
  }
  return (
    isAuth ? <Outlet /> : <Navigate to={"/"} />
  )
}

export default PrivateRoute

[pwdel]

Hey first off, thanks for your continual suggestions.

I don't understand because my background in React and frontend is very limited.

How does this relate to how we currently have things set up?

Also, in a parallel thread, since you mention React, though perhaps not related, I wanted to flag this to you, I believe one of the major projects in React is going to be to adapt this theme, which was voted on by some users on a platform / game I currently engage in.

https://github.com/openpredictionmarkets/socialpredict/issues/51

Basically, my thought is, similar to using bootstrap, we would use this customized bootstrap theme to implement and upgrade our design significantly.

[avalonprod]

Using private routes will allow you to organize your routes in this way

  <Routes>
      <Route element={<PrivateRoute />}>
        <Route path={ROUTES.HOME} element={<HomePage />} />
        <Route path={ROUTES.ADMIN} element={<Admin />} />
     </Route>
        <Route path={ROUTES.LOGIN} element={<LoginPage />} />
        <Route path={ROUTES.SIGN_UP} element={<SignUpPage />} />
  </Routes>

In addition, managing the application state is an important aspect. For this, you can use the global context of ReactJS, or, even better, utilize a StateManager such as Redux or MobX.

If you want to use the themes you have chosen, essentially, it's a straightforward UX Design, and you already have a predefined project structure. It will be sufficient to describe the business logic and interaction with the API. As I mentioned before, you can use one of the State Managers for this. The functionality of the charts is likely to be implemented in the template you plan to use, so you just need to come up with a formula that adapts the charts to your data.

If you use such a template, your structure won't be suitable. You need to separate components, pages, and business logic.

Since the template uses SASS, you should also switch to it instead of using pure CSS.

My conclusion: You need to download the template and customize the UI for your project. Additionally, consider using tools like Redux Toolkit for managing the application state and API calls. For custom styling, use SASS.

I would also advise you to look at a similar type of layout with more modern approaches to development: https://isomorphic-furyroad.vercel.app/analytics

[avalonprod]

Hey first off, thanks for your continual suggestions.

I don't understand because my background in React and frontend is very limited.

How does this relate to how we currently have things set up?

Also, in a parallel thread, since you mention React, though perhaps not related, I wanted to flag this to you, I believe one of the major projects in React is going to be to adapt this theme, which was voted on by some users on a platform / game I currently engage in.

#51

Basically, my thought is, similar to using bootstrap, we would use this customized bootstrap theme to implement and upgrade our design significantly.

I'm happy to help