32
53 Comments

I've made a free drag and drop React template builder

Hi,

I just launched reactbuilder.dev, a Free drag and drop react template builder. It currently works with ReactJS + Chakra UI but many more integrations and themes are coming soon.

Any feedback is really helpfull.

  1. 3

    Congratulations on launching reactbuilder.dev! It sounds like a useful tool for React developers. Here are some initial thoughts:

    Pros:

    The drag and drop interface is intuitive and easy to use.
    The Chakra UI integration is a nice touch and makes it easy to customize the styles of the templates.
    The option to export the code is helpful for developers who want to quickly get started with a pre-built template.
    Cons:

    It would be helpful to have some documentation or tutorials for first-time users who may not be familiar with React or Chakra UI.
    Currently, there are only a limited number of templates available. Adding more templates and integrations with other popular libraries would be helpful for users.

  2. 3

    First of all you have done a great job technically. The main thing that sticks with me is that it looks like "engineering design". It doesn't look "bad" but definitely not professionally designed.

    Obviously we want to move fast but my main recommendation would be to just model your layouts and designs/colors/etc. after existing similar products, or cherry pick parts from existing projects. In my experience the visual aspect is just really important.

    In terms of the business proposition (this is becoming the main theme of my comments):
    I need to see what exactly is my main benefit. Ideally quantifiable. What you could do it make a video for instance, where you handcode a webpage. Then you do the same thing using your platform. The outcome is an upside you can present on your homepage:
    "Increase your prototyping speed by 60% while keeping the flexibility of handwritten code" for instance :) Good luck, you are on the right path

  3. 3

    Nice one. Need Next-js integration :)

  4. 3

    Omg. This project is so good. Congrats 🎉

  5. 2

    Wow this would make the development process so much quicker!

  6. 2

    Nice! Just listed this on https://www.starter.place/ too! Thanks again for listing your other starter!

  7. 2

    Wow, looks great! 🙌

  8. 2

    super nice, micro front ends

  9. 2

    @rarestoma I have intermediate working experience with React, but I haven't been coding for the past three years. However, I wanted to let you know that you've done an excellent job!

    Keep up your great work...

  10. 1

    Looks great! Congratulations

  11. 1

    That is going to be a very helpful tool. I have a recommendation. If you can make the tool more compatible with tailwindcss and other UI frameworks. The developer can then choose the appropriate framework based on the requirement.
    https://trendnewsup.com

  12. 1

    Everything is from scratch because I couldn't find a library that matched my requirements and gave me the possibility to simply extend the code.
    https://www.technology-gf.com/

  13. 1

    That will be a really useful tool. I have a suggestion. If you can improve the tool to work with other UI frameworks too, such as tailwindcss. Then the developer can select which framework needs to use based on the requirement.

  14. 1

    Congrats for this

  15. 1

    really cool Keep up your great work...

  16. 1

    That's really cool! I noticed it uses Chakra UI, which is a smart move to move quickly.

    One quick suggestion if I may: It would be helpful to display a sort of breadcrumbs bar at the top when something is selected. For example, when selecting a card's title, it would be something like:

    Grid > Card> Card Title

    Each one would be clickable to selectable. Would make the process quicker 😄

  17. 1

    Thank you for sharing this<a href="https://essentialsclothing.co/">.</a> I really appreciate it.

  18. 1

    Businesses can easily get important coupons into the hands of potential customers thanks to coupon submission services. Businesses can easily send their coupons using these services to coupon websites and other promotional channels. The service takes care of the entire submission procedure from beginning to end, including developing the coupon design, submitting it to discount websites, and monitoring the performance of the coupon. Many coupon submission providers also offer data and insights to businesses so they may improve their coupon campaigns.
    https://www.theshoppingfriendly.com/

  19. 1

    This is beautiful. Do you plan to make this open source? Or a SaaS?

    1. 1

      I am still thinking about it, but I think it will go open source

  20. 1

    Just for my curiosity, did you use any component library like MUI? Or did you make everything yourself from scratch?

    1. 1

      I used Chakra UI for the components

  21. 1

    Amazing job, may I ask what drag n drop lib you use?

    1. 1

      I didn't find any library to match my needs and give me the opportunity to easily extend the code, so everything is made from scratch

      1. 1

        Cool, Im making a SaaS with react that uses a lot of drag n drop and Im having a hard time finding a lib that handles the job.

        Guess I'll have to do myself too.

  22. 1

    awesome! It's great to see new tools being developed for React developers. thanks for sharing!

    1. 1

      awesome! The creation of new <a href="https://www.gopromotional.co.uk/branded-products/promotional-pens
      "></a>
      tools for React coders is fantastic. Gratitude for sharing!

  23. 1

    This looks great, will try this on next project.

  24. 1

    Amazing.....Good project

  25. 1

    This is amazing. Great work 👏🚀

  26. 1

    This looks fantastic! Is there anything additional needed to get it up and running with NextJS? I've had some difficulties in the past doing drag and drop with NextJS

    1. 2

      Hi @cameronblackwood, I have to take a look to see what with takes to make NextJS integration, but I think we can do this too!

  27. 1

    Interesting project. Congrats on the first version.

    Just curious: I've tried using the app, and it seems like your target is SaaS dashboards. Any reason you picked this?

    From the name, I thought you provided a simple drag-and-drop way to create a new component and use it in code instead of the whole web page. Do you think that is any better?

    1. 1

      Hi @abr,

      I currently work with dashboards, and that's why I started with this. `

      Also, I never thought about building just a component, but it sounds good. Do you have any example of the website that does this so I can take a look?

      1. 1

        I have to check it. It was just a thought as in my dev, I end up creating quite some component, then why not use a drag-n-drop way to create those components and copy code back to the editor.

  28. 1

    Nice project 👌. Keep going.

  29. 1

    This comment was deleted a year ago.

Trending on Indie Hackers
Passed $7k 💵 in a month with my boring directory of job boards 39 comments Reaching $100k MRR Organically in 12 months 32 comments 87.7% of entrepreneurs struggle with at least one mental health issue 14 comments How to Secure #1 on Product Hunt: DO’s and DON'Ts / Experience from PitchBob – AI Pitch Deck Generator & Founders Co-Pilot 11 comments Competing with a substitute? 📌 Here are 4 ad examples you can use [from TOP to BOTTOM of funnel] 10 comments Are you wondering how to gain subscribers to a founder's X account from scratch? 9 comments