Subscribe
Sign in
p/divjoyThe React codebase generator.
Start new thread
Gabe Ragland

Divjoy - The React codebase & UI generator

byβ€’

We make it ridiculously easy to start your next React project. Pick all the things you need in your codebase (UI kit, authentication, newsletter, analytics, etc), choose a beautiful template, then export as a complete React codebase. Everything just works 🀩

Add a comment

Replies

Best
Gabe Ragland
Maker
Hey Product Hunt πŸ‘‹ I'm super excited to share what I've been working on for the past 6 months! Divjoy is a web-based tool that makes it ridiculously easy to get started on your next React project. Let me tell you how... πŸ‘‰ You pick the exact stack you want Do you want a React app powered by Next.js, with Firebase Auth, Mailchimp for your newsletter, contact emails forwarded to you via Amazon SES, and the codebase optimized for hosting on ZEIT Now? You got it. It literally takes 5 clicks. πŸ‘©β€πŸŽ€ We give the whole front-end too Our templates have everything you need, like marketing pages, contact form, pricing, faq, and a complete authentication flow that hooks into your chosen auth provider. Even the forgot password flow works πŸ™€ 😎 But wait there's more! Before exporting your shiny new codebase you can play around in our built-in editor. Tweak styles, add pages, and drag in new sections from our growing library of components. It's a quick and easy way to experiment with ideas before moving to code. πŸš€ Ready to move to code? As soon as you’re ready to move to code, simply download your codebase or one-click export to CodeSandbox. We even include a custom README.md that walks you through your stack so you can be productive right away. This was by far the most challenging project I’ve ever built and happy to finally share it with the Product Hunt community. Please let me know what you think!
Gabe Ragland
Maker
@fajarsiddiq thanks Fajar!! πŸ™
Dennis Bruijn
Wow! Amazing product πŸ‘ Can you peeps share something about your journey from a technical point of view? I'm curious what tech stack your team used and what challenges you faced when building this awesome interface (I'm especially in love with the whole side-pane including the layers and being able to highlight them in the preview-pane).
Gabe Ragland
Maker
@0x1ad2 Thanks so much and happy to share some details! - For the framework Divjoy uses Next.js. Yup it's a Next.js app for creating Next.js apps. - It's actually completely static and deployed to ZEIT Now. Storing data in flat JSON files was an easy way to cut corners and launch faster. Eventually, of course, we'll have an accounts, a DB, etc, but for now it's pretty nice knowing it can scale endlessly :) - So many challenges where to start.. Figuring out the right abstraction for the code generation engine was a huge challenge. Depending on the stack options the user chooses there are a lot specific things that need to differ in the exported code. For instance if their template requires API endpoints I need to generate those, include different dev scripts in package.json, create the code for those endpoints in the right format for their selected host (serverless functions, express.js, etc), and then customize the exported readme.md. This deserves a blog post I think. - The editor was super fun to build. I was able to take advantage of https://github.com/frontend-coll..., which probably saved me a few months time, but it still required a lot of custom work and performance tuning. - I was also lucky to be able to take advantage of some of CodeSandbox' open source libraries for powering live preview. One of my main bits of advice to anyone trying to undertake an ambitious project is to spend significant time searching for open source options. Even set aside a full week to do that. It could mean launching in months vs years (or never).
Diego Haz
Divjoy is the evolution of boilerplates! It’s definitely something that will help developers bootstrap their apps with ease!
Gabe Ragland
Maker
@diegohaz Thanks Diego, that's a great way of putting it! We aim to be a much better alternative to boilerplates, which rarely have all the technical pieces you need or often many things you don't need that just end up slowing you down.
Tomas Batrla
Divjoy looks amazing. I already made a web with it today :) . I think I found my new favorite tool for fast prototyping. Gabe, are there some new components in the making?
Gabe Ragland
Maker
@bartolomej Hey Tomas! Yes, goal is to expand the component library at least 5x. Let me know if there is anything in particular you'd like to see.
Moss F.
@bartolomej @gabe_ragland Hi Gabe, great job. Would be nice to have an Admin page with graph and stuff there are plenty of templates for those but would be nice to have all the codebase integrated and available in Divjoy. Keep up the good work!
Gabe Ragland
Maker
@bartolomej @moss_f_ Yes! Planning on adding some nice admin and dashboard templates soon that integrate nicely with the backend options you choose. Stay tuned!
Moss F.
@bartolomej @gabe_ragland Great!! You got my upvote, already told my friends about it, how are u gonna make money? What is the monetization model ?
Gabe Ragland
Maker
@bartolomej @moss_f_ Will be launching some premium themes and components soon to test the waters ;)
Ivan von Christ
I've been tinkering a little bit with Divjoy and suggested my friends and I use it for a weekend hackathon we participated in recently. Divjoy is an absolute pleasure to use! The drag-and-drop interface and rich component library makes it super easy to create beautiful (thanks Bulma) and functional React apps literally within minutes. I could not recommend it enough.
Gabe Ragland
Maker
@ivan_vc Thanks for the kind words Ivan! I was blown away by what you're team created with Divjoy at the hackathon. For anyone else that wants to check it out: https://qwild.herokuapp.com
Kilian Valkhof
Divjoy looks amazing and has so much layers of functionality. Well worth checking out!
Gabe Ragland
Maker
@kilianvalkhof Thanks for the kind words!
TIMUR MAMEDOV ☞ π™«π™šπ™šπ™™.π™žπ™€
This is gonna be big for bootstrapping. Congrats @gabe_ragland, and thanks for making this!
Gabe Ragland
Maker
@timur_mamedov_ Thanks so much Timur!
Clay Stewart πŸ‘¨β€πŸ’»πŸŒβš›οΈ
Reminds me of Rails Composer. I miss that simplicity. Thanks for bringing it back in a modern way.
Gabe Ragland
Maker
@clay_stewart Yeah totally! I'm a big fan of React (obviously), but I sometimes miss tools like Rails Composer or full-stack frameworks. Seeing if we can have the best of both worlds.
Jarred Sumner
Divjoy is really cool - so much of building a new product is the boilerplate & misc things you need to ship but aren't core to the product
Gabe Ragland
Maker
@jarredsumner Thanks Jared, glad you're liking it! And yup that's the idea. Devs waste so much time wresting with technical integrations and rebuilding the same basic layouts. We want to help them skip all that and jump straight to working on the things that make their app unique.
Lachlan Kirkwood
Such a powerful tool to streamline development. Nice work!
Gabe Ragland
Maker
@lachlankirkwood Thanks Lachlan!
Slava Korolev
Used Divjoy for my current project and love it! For a backend developer it's extremely nice to have everything ready-to-go on a frontend side. Thanks!
Gabe Ragland
Maker
@korolvs Wooo! Glad to hear it. Reach out anytime if you have thoughts on how it could be better.
Caitlin Bolnick
Big fan of Divjoy and awesome to see all the progress you've made to-date @gabe_ragland
Gabe Ragland
Maker
@caitlinbolnick1 Thanks so much Caitlin!
Keyul
So amazing. Any plan to add angular ?
Gabe Ragland
Maker
@keyul Thanks! No immediate plans. Staying React focused for now so that I can scale up the library of templates and components. Maybe down the road though πŸ€·β€β™‚οΈ
Tony PrzybyΕ‚
The best code generator I have ever used. It saves you hundreds of hours, especially when you are developing landing page for your product. I manage to create landing page for my company in 2 days! And it looks amazing: https://venits.com/ . Keep up the great work ;)
Gabe Ragland
Maker
@venits So happy to hear Divjoy worked out well for you! The site looks πŸ”₯
George Burke
Awesome to see this
Russell Smith
@gabe_ragland this looks amazing! Congratulations!
Gabe Ragland
Maker
@rhs Thanks Russell πŸ‘Š
Michael Wang
Amazing product! I've used Divjoy to help build a landing page. Gabe has packed Divjoy with a bunch of useful product features that make it so much easier to get my site going! This is the nextstep in bootstrapping and I can't wait to see where it goes
Kishore
I am very impressed with Divjoy. It took me couple of hours to make web app using ReactJs, Bulma, firebase Auth. I am sure it will take me more time just to setup these things, instead I was ready with beautiful working app in couple of hours. The best part is the quality of the Divjoy code.
Gabe Ragland
Maker
@prakis woooo! Happy to hear it worked well for you πŸ™Œ
kaan bingol
Mind blowing product!
Rushabh Pathak
The maker of this Service is super active in site, polite and sincere. The experience looks quite impressing. Will be seeing the product in my browser in a few days. Good Product I found.