Developers July 10, 2020

[React] Best Boilerplate Frontend Templates

moonbean

I have been looking into quickly creating the frontend for my MVP using multiple solutions i.e. no-code, low-code, code, and everything in between. I am a software engineer so I do plan on eventually having the frontend built out... but as this is an MVP I know I will make changes and want to do them quickly.

I recently read this article and I was wondering what are the best boilerplate services, libraries, websites, or anything just for frontend (and in my case React)?

Thanks!

  1. 2

    You might like my product divjoy.com, which gives you a fully-functioning React app with UI, auth, db, payments, etc. It also has a low-code editor so you can customize your UI before exporting your codebase. Let me know if you have any questions or want a discount ;)

    1. 1

      @Gabe Actually super interested in how this would work, any possible way to have a free trial or preview? I just want to be able to see if I could make what I need to, but this looks so cool!

      1. 1

        Hey, happy to send over an example codebase that you can check out. Want to shoot me an email or DM me on Twitter? If you’d like to just preview the design and basic page/component structure you can click a template and view it in the editor for free.

  2. 2

    It depends on your needs. But maybe this is something that could help you?

    • react-admin: It provides a lot of things out of the box for B2B systems. I haven't had any experience with it but it looks promising.

    If you want to take as many components as possible here's a good list with curated react components:

    Unfortunately I have the feeling that with React you have to always build the initial structure to start taking advantage of the library.

    Good luck!

  3. 1

    I feel like most boilerplates out there focus too much on features and disregard completely equally important aspects such as code quality or developer experience.

    I'm currently building my own boilerplate with everything in mind to get started building a maintainable and scalable app with quality code. Let me know if that might interests someone :)

  4. 1

    @Gabe will have insights on this topic :)

  5. 1

    If you are going for 'enterprise' grade react app that could scale, you care about TDD, and but SEO is not a priority, I'd recommend using react-boilerplate WITHOUT ImmutableJS.

    If you want the most freedom while not thinking about webpack, I would recommend simply using create-react-app. This one in particular is purely client-side rendering, so it is not optimized for SEO.

    If you want to create a landing page quickly that looks good, you care for SEO, and still put it together, I'd recommend using nextjs / gatsby for server-side rendering, as well as buying some pre-built UI design.

    I bought a pack of UI theme, from CreativeTim. As a developer, when working on frontend, I find myself 'wasting' most of my time arranging styles.

    If you want to get very technical, and geeky, and handcraft your own component visuals, I'd recommend looking at codepen to get inspired. There are some amazing visuals other devs share there purely done with html, css, and js.

    1. 1

      That is actually super helpful, I really don't like having to deal with all the CSS. Are you saying buying a UI theme actually solves this and its a matter of placing components around?

      1. 1

        Yes, templates / themes saves you a lot of time and effort by not having to think of every single aspect of what is being displayed. Mobile and responsive design in usually built in many templates / themes provided by vendors. Personally think this is a big win. Retrofitting responsive design after building a website is cumbersome.

        On rare instances you might have to edit a few styles, but those usually are far and few in between. For a seasoned developer, it is almost like building with lego. For someone relatively new, it is a huge headstart if the focus is to get something out the door. This is not necessaily the best way to learn React/javascript/css though.

  6. 1

    checkout http://bytehub.dev/, we've a whole lot of components, and more in the next few days. Its between code and no-code, like you mentioned its a low-code. Nice terminology though

    1. 1

      these are really nice!

      1. 1

        thanks for your feedback. We're bringing 20-30 more components in coming week

  7. 1

    Depending on your needs, I am a huge fan of the AWS Amplify framework. It is a bit bleeding edge but the community is generous, robust and growing rapidly. There are some things you can set up in a ridiculously easy amount of time.

    *** Sorry, originally you were only focused on React but I mention since the backend features are so powerful too.

    1. 1

      I am totally not just focused on react, open to everything! Really cool thanks for sharing this one!

  8. 1

    hi! I was actually wondering the same thing, and i found this https://www.indiehackers.com/product/mernkit

    haven't tried it yet but going to this weekend. let me know what you think?

    1. 1

      @rasreee thanks for the shoutout! I’m the developer of MERNkit - feel free to reach out with any questions. @moonbean the frontend is react using Material-UI which makes it very extensible and quick to build with. Https://mernkit.com

      1. 1

        this is freakin awesome @mattserel I get to keep the code correct?

        1. 1

          @moonbean Yes sir! Also this has been launched on product hunt as of today if you feel inclined to show support and upvote :) https://www.producthunt.com/posts/mernkit-saas-boilerplate

  9. 1

    This comment was deleted 4 days ago.