CODEWITHSUNDEEP
javascriptreactjs
Usman Tahir
Usman Tahir

Reputation: 2663

Two projects for Admin and User panel VS single app for both with different theme

I have a scenario to implement in React. We have a pre-built admin panel with most of the functionalities like Auth, charts, analytics, user management etc already implemented. Now we are trying to attach it to another site as backend.

But the site is a web chat app with login feature where the user can come and manage his profile + chat history.

Admin panel and User Screen is totally different. both have an entirely different style guide and entirely different themes bought from theme forest.

We want to implement Role Based Auth so admin and user both enter using same login page.

Now I am confused about one thing.

  1. The Admin theme is heavy and full of charts and components
  2. User panel is fairly simple and lightweight.

My colleague wants to modify our already built admin theme, copy paste few components and add new bought theme inside it. but here I am seeing an issue. The project is going to have 2 themes and 2 assets.

I want to keep 2 themes running separately, redirecting to entirely different react app to launch admin or user panel. I want suggestions are this a bad practice or there's a better way to work around this issue

Upvotes: 6

Views: 4445

Answers (1)

Michel Engelen
Michel Engelen

Reputation: 573

From what you are presenting us here I would go with your solution as well.

Basically speaking you should think about it as a separation of concerns, since both Panels will have different use cases and totally different dependencies.

But let's go through some of the points that make me think it would be best to split it up:

1. Payload for the user

If you inherit the whole Admin Panel and use just parts of it to render a totally different view out of it (by implementing another theme) you will automatically generate more data the user has to load before accessing his profile panel, which (eventually) influences the user experience.

2. Maintainability

By splitting up the different Panels you generate code that is less complicated and as a direct result of it gains a whole lot of maintainability, since bugs can be tracked way easier when you can look up a specific part directly instead of searching for it in a massive code-base.

3. Modularity

When thinking about SPAs modularity is key. This is even more important when you are writing a react application. If I would be in your position I would modularize the whole profile and admin panel so you can easily reuse parts of it. This gives a boost to the maintainability as well, so that is a clear win-win situation.

4. Styling

I don't know which approach you are going, but I would say it is way easier to style components when they don't depend on each other. It is basically as you said: 2 themes mean 2 different style sets, so why should you go and combine these? It only makes it more complicated.

5. Security

When you split up the different panels you can easily separate data and APIs to prevent a data-leak between the two.

Long story short: I would go with your approach by splitting the 2 panels into seperate components (or even react applications).

Upvotes: 8

Related Questions