The 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!
Fajar Siddiq
@gabe_ragland Finally it's launched! I'm so happy for Divjoy! Congratulations guys! This is amazing!
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!
123
Next
Last