Create an Product Page editor

user_13051961 0
Viewed 29

What we want to do:

We have two projects:

  1. A consumer focused frontend
  2. A business focused dashboard

The frontend uses cool custom styling, while the dashboard is rather boring. The idea is that you can edit and create objects in the dashboard and then preview them in the styling of the frontend (imagine setting up an amazon product and then previewing it as the product page). Ideally we would also like to offer live editing, meaning you see the proper rendered product page and you can edit the information live.

Our Setup

  • Two separate repositories
  • Both use React + Tailwind
  • There are not many custom CSS classes as everything is styled via tailwind classes in the code

What would be the best solution?

I have a couple of solutions, that might work with more or less success (e.g. sharing components via bit.dev). Did someone built something similar or could recommend some best practices?

bit.dev tailwind-ui tailwind-css reactjs
1 Answers

Depends on what is the best solution for you. What is best for you, might not be the best for me, or the other way around.

Bit is a way to share components. Components are isolated pieces of functionality (UI, Hooks, Themes, whatever) That can be used and consumed across several projects.

You could totally have a Bit workspace, where you design, create and edit your components, export them once finished, and consume them in both your repositories.

bit new react my-shared-components-workspace --default-scope LeonardCompany.LeonardRemoteScope
cd my-shared-components-workspace
bit create react shared-button
# edit your button
bit tag -m "initial tag" shared-button
bit export shared-button

In your repos:

npm install @bit/LeonardCompany.LeonardRemoteScope.shared-button

Want to update the button? Edit it again in your workspace, export, and update the projects. Ultimately, those projects could be App components too.

Let me know if it helped.

user_176254860
Related