Divjoy

The React codebase & UI generator

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 🀩
Discussion
Would you recommend this product?
12 Reviews4.6/5
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 Finally it's launched! I'm so happy for Divjoy! Congratulations guys! This is amazing!
@fajarsiddiq thanks Fajar!! πŸ™
Divjoy is the evolution of boilerplates! It’s definitely something that will help developers bootstrap their apps with ease!
@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.
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).
@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).
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
@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.
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.
@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