
Show HN: Divjoy – React Codebase and UI Generator - makeee
https://divjoy.com
======
makeee
Hey HN, my goal with Divjoy is to make it ridiculously easy to start a new
React project. You just select all the things you want in your codebase (UI
kit, React framework, auth provider, analytics, form handling, etc), pick a
template, then export it as a complete codebase that you can keep building on.
All the UI logic like routing and auth flows just works. It also has a built-
in editor which I think is pretty nifty. You can view the entire component
hierarchy right in the tool and drag in pre-built sections from the component
library. I'm planning on building out a large library of components across all
the major UI kits (Bootstrap, Material UI, etc) and adding support for Next.js
soon.

This was by the far the most difficult project I've ever built. Would love to
hear your thoughts and happy to answer questions.

~~~
csbartus
I love the idea and I’ll use it !!! One question: apart Framework can we have
a ‘Not needed’ option for all other features? What if I want authentication
with no styling at all..... Thanks a lot and keep up !!,

~~~
makeee
Yeah, I'm definitely considering that. Basically just wanted to wait and see
if anyone asked for it. Out of curiosity, is that because you'd like to use a
different UI kit or do you generally write styles from scratch?

~~~
thegeomaster
I think a lot of people prefer to write styles from scratch. At least I
haven't seen these UI kits being used much around me. I tried using one a
couple of times and while it's great for getting something on the screen
quickly, it turned into hell when I wanted to customize the look. Also it
emitted embarassingly large bundles.

~~~
leetbulb
Yeah, having styled-components (not a UI framework) included in the
boilerplate would be pretty awesome for something like this.

~~~
pixel67
I was just going to ask that. I’m not big on using UI kits and prefer to use
styled components. I like the idea of implementing Next.js

------
ghengeveld
That's awesome, well done. Really nice that it exports to codesandbox as well
so you don't even need to download anything. Would love to see support for
TypeScript as well.

~~~
makeee
Thank you. I figured people would want to be able to quickly check out the
code and play around with it rather than wait for npm install :)

~~~
chrisan
Definitely nice to be quick and easy to jump into, but I really love
typescript for longevity of a project

~~~
makeee
Out of curiosity, would you pay $10-20 to export with typescript?

~~~
digizen
I definitely would.

------
joshi4
This is amazing. Creating a site from scratch takes a lot of time, WYSIWYG
website builders are not very customizable. You are in the exact sweet spot I
look for as a developer. Seriously great work !

~~~
123randomusere
hey joshi! What kind of website are you thinking of building? Would love to
hear about why WYSIWYG website builders break down for certain use cases.
We're thinking of using WYSIWYG builders interally

~~~
ativzzz
Classic 80/20 rule. I've used several of these in the past, and they always
work great until you need that 1 thing that they don't support out of the box
and then you have to spend half a day figuring out the JS hackery the builder
uses so you can work around it to implement the one thing you need in it's
subpar code editor that's hidden away in a submenu somewhere.

------
bbx
Great work, and great name! Surprised, but glad to see Bulma as the main UI
option. Thanks for using it ;-)

~~~
makeee
Thanks for making such as awesome CSS Framework! Planning to keep growing the
library of pre-built section built on Bulma, so hopefully it can become a
great resource for the Bulma community (at least those that use React).

------
sandGorgon
This so cool.

Can you also do Gatsbyjs ? Building static sites is the most productive thing
these days - especially for building landing pages and corporate websites.

I would pay for something like this (with a whole lot of themes)

~~~
makeee
I'm thinking a lot about Gatsby and how best to integrate with their way of
doing things and their new themes system. Super excited about the potential
there.

------
mostlyjason
We recently started using another scaffold generator from
[http://scaffoldhub.io](http://scaffoldhub.io). It’s similar to this but
geared more for apps than for marketing sites. It allows you to build out a
complete data model and backend. It’s got a lot more features but they add
complexity to the code that might not be needed for everyone.

~~~
benatkin
That's the proper thing to call it: scaffolding or boilerplate. "Codebase
generator" sounds like an excuse to charge for the output it produces. Instead
of _that 's just scaffolding_ I can imagine _well, yeah, we used a codebase
generator, that 's just smart, isn't it? Should we do everything manually?_
Divjoy looks pretty cool but I think I'll avoid it out of principle.

~~~
makeee
Hey, is the main issue you have with Divjoy that it uses the term "codebase
generator" or was there something about how it works that you didn't like? To
be honest, I'm not a huge fan of "codebase generator" either. Open to changing
it if it seems weird or meaningless to people.

~~~
benatkin
That was just my reaction to it. I think it sounds catchy. I would just leave
it and see how it works. I'm not the target audience because stock create-
react-app and create-next-app (and rails new) are more boilerplate than I like
for starting a project, though I'll look at custom boilerplate for
inspiration.

~~~
makeee
Ok gotcha, appreciate the feedback.

------
jhsu
It's been great seeing the early alpha to what it's become!

Divjoy is like a super powered create-react-app. great way to start off a
project. being able to quickly add prebuilt components and essentially "eject"
them makes customizing super easy.

the UI is intuitive and love the animating side drawer for the component
library.

and :cheer: to exporting to codesandbox!

~~~
curo
As an early alpha user as well, I'm also impressed at how quickly it's coming
along. Great job

------
pcurve
I really thought this was a facetious jab at the modern web dev landscape
until I started clicking around.

~~~
makeee
Maybe a little of both haha? I mean it is ridiculous how many services you
need to bring together for a basic web app. On the other hand, I like that the
React ecosystem is composed of a lot of services that each do one thing really
well. So not sure a big monolithic framework is the answer. So this was kind
of my attempt at a solution.

------
dboon
This tool is an absolute joy to use. At my nine to five, I work on a library
that often times feels clunky and heavy. To use a tool as simple, powerful,
and beautiful as this one truly does bring me joy. Thanks for putting the time
into this! It's the perfect intersection of drag-n-drop and from scratch.

If you've got some preferred channel where I can drop you a couple dollars in
support of this project, let me know.

~~~
makeee
Wow, thank you! And I really appreciate the offer to support the project. The
plan is to roll out some premium integrations and themes in the coming months
and see how that works out as a revenue model. Not against setting up a Paypal
or Patreon, but would love to see if this can be productized (yet still super
generous with what you can do for free). Anything come to mind as something
extra you'd pay for?

~~~
dboon
I think you're spot on with that revenue model. I would certainly be willing
to pay a couple of bucks for a premium suite of templates and components, or
integrations with less mainstream technologies.

One idea I'd really love is simple Git integration. If I want to download my
code and work on it outside of the GUI, it seems cumbersome to return to the
GUI for simpler tasks (e.g. let me double click this string instead of
remembering which parent component has it). If I could sync to Git, you'd have
all of my money!

As for a word of unsolicited advice: Don't be afraid to monetize! Plenty of
people (and corporations) use and pay for tools like e.g. Figma which don't
even produce code on this level. What you have right now is, in my opinion,
more than generous for a free service.

Cheers, best of luck!

~~~
wolco
To the author: Be careful going down the saas root. The path is filled with
feature requests with promises of small monthly payments without lockin.

Great for a focused simple product but perhaps not so great for this kind of a
tool. Ultimately your customers want something to create as much of the
app/site as possible. As you approach this ideal complixity increases making
your application more brittle. When the ecosystem changes your tool may not be
able to respond to the new reality.

Your better off using this tool to create value for your own customers. Or
selling the source code rather than chasing the 9 dollars a month customer.

------
duxup
Very cool project.

Looking at the code I really like code that comes out of this. Very easy to
read / change.

I would like to see authentication done with SQL as an option. Admittedly that
would be more work than firebase, but it would be a nice second opinion that
is more portable / not tied to Google.

~~~
makeee
It's great to hear you find the code east to read and change. To clarify,
would you want something like a rest API + node server that talks to an SQL
database? The plan is to provide more self-hosted options for code export,
going with 3rd party services like Firebase was just easier to add for this
MVP.

~~~
duxup
>a rest API + node server that talks to an SQL database

Yes that is what I was thinking.

~~~
makeee
Cool, thanks for clarifying. Definitely on the todo list, although still
figuring out how soon I need to figure out the whole data layer (the big
missing piece right now) VS focusing on expanding the component library across
all the UI kits. Lots to do..

~~~
duxup
Yeah it looks like a great project with endless directions to expand.

I think it would be nice for that drop down for authentication to just offer
one more choice. For me there's sort of an "oh, just google" moment when there
is just one built in authentication.

That's not to take away anything from the project as it is, it's pretty great.

~~~
makeee
Thanks, that's good feedback. Considering Auth0 next. Any other ones I should
consider?

------
martin_
This is awesome, great work! One piece of feedback is that currently all of
the components seem around designing static components. I'd love to see
support for lists, dropdowns, etc, and ideally with the accompanying connect
code to wire up a store with the renderer

~~~
makeee
Hey Martin, thanks for checking it out! Yeah, I'm eager to get a lot more
dynamic components in there (lists, dashboards, social media feeds, dropdown
menus, etc). Going to make that a focus over the next few weeks. These
components will probably make it in before I have the data part figured out,
but long-term want to find an elegant way to let the user pick from multiple
data strategies (graphql, rest, etc) and just magically wire it up to the
components.

~~~
home_project123
+1 for adding all these UI dynamic components (menus, social, nested comments,
etc)...

------
IceDane
This looks absolutely awesome. I had been toying with a similar idea in my
head for a while, but I never even started building anything, and now it looks
like I won't need to!

It had seemed to me that due to how web development has evolved in recent
years, improving compositionality greatly by adopting functional programming
concepts, designing something like this could be done relatively elegantly if
you are just able to find the right abstractions. Seems to me that you have
been able to do so, given what you support and are planning to support, though
I can imagine it is an ongoing engineering challenge.

Kudos, thanks and good luck! I will definitely be trying this out, though I
hope you decide to support typescript at some point.

~~~
makeee
Yeah it's super hard to find the right abstraction between UI and code! Lots
of feedback sessions and iteration to get where I am and still very far from
where I want it to be. Glad you're liking it!

------
cryptozeus
This is great ! Just works out of the box...really good work. Waiting for
bootstrap version

~~~
cryptozeus
Even the code sandbox integration is great, I dont even need to download the
code. Good focus on what devs want...have you thought of integrating this with
tools like VS Code ? More non web based product ?

~~~
makeee
I love the idea of doing some kind of VS Code plugin, but not sure where it
will fall on the priority list. Any thoughts as to what a VS code integration
might look like?

~~~
wolco
This is why you may want to open source. There are so many cool features but
very little time.

------
mahdiponline
Tried it out and it works fantastically. I'd love to see more components
especially with Bootstrap. Do you need any help with its development cause I
would love to work on it.

~~~
makeee
Yup, my goal over the next month is to 5x the size of the component library,
as well as start adding some more dynamic components like full dashboards,
activity feeds, user settings pages, etc. Bootstrap is definitely coming. If
you select it as an option you can enter your email. Just testing where the
demand is. So far Boostrap and Material UI are about neck and neck. Feel free
to shoot me an email at hello@divjoy.com if you want to get involved.

------
webmaye
This looks amazing. Going to give it a try for my next project.

~~~
makeee
Thanks! Would love to hear any feedback once you give it a spin.

~~~
WrtCdEvrydy
Yeah, this reminds me of RealWorld on Github.

I wonder if you could use that to build your templates since it's open source
:)

~~~
makeee
Yeah I'm a big fan of that project! Definitely took some inspiration from that
early on when I was thinking about how doable this was.

------
dreamer_soul
Looks amazing! Any plans on a vuejs implementation? Also would be awesome if
we can change bootstrap scss variables such as primary color. Thank you for
the amazing product

~~~
makeee
Thanks! So you can actually tweak SCSS variables like primary color in the
tool. Just click the style button at the top when you have editor open. I'll
have this for Bootstrap as well when it's added. Any kind of Vue
implementation is probably a ways down the road, since the plan is to build
some nice UI abstractions around React concepts (like Suspense). Harder to do
that well if I'm building for multiple frameworks.

------
MegaLeon
This is amazing, I can't believe it works as well as it does. Very well done!
Reminds me a bit of mobirise.com.

I'm curious to hear about your future plans for monetization? Premium blocks?
Concurrent sites creation limit?

I can also see that right now the project is cached in the browser session.
Any plans to have import/export of project files in order to better manage
several projects at once? Or a desktop version?

~~~
makeee
Thanks! Will likely try out premium themes and blocks. Maybe extra export
options.

Accounts and multi-project support is definitely coming at some point. Right
now you can technically import/export by clicking export project in the top
dropdown menu (copies entire project json to your clipboard), save that, later
import it using the import option. Not the most user friendly but it works.

Haven’t really thought about desktop to be honest! Will keep an eye on
feedback and see how much people want that.

------
orliesaurus
This is amazing - good job - I like the interface and it looks pretty useful,
going to give it a better try later :)

~~~
makeee
Appreciate it! Please let me know if anything is confusing when you give it a
try.

------
raykanani99
This is great. Looking forward to giving it a spin! Would by nice if I could
spin this up from the terminal

~~~
makeee
Hmm that's a cool idea actually. Will think on that.

------
ksma
A really cool idea. I will definitely use this for spinning up for the next
project I am going to work on.

------
lukeplato
Impressive, how long did it take a single developer to make something like
this?

~~~
makeee
It was pretty exploratory at first so hard to say. Initially started out as me
wondering if a drag and drop tree editor would be a decent way for beginners
to learn React. Played around with a lot of different ideas and it kind of
evolved from there. Maybe about 6 months full-time.

------
vcpn1313
I love this. So easy to use and intuitive. Really creative. Great job!!!

~~~
makeee
Happy to hear that! Feel free to reach out anytime if you run into issues or
have ideas on how it could be better.

------
cgle
Hey there should be a collapse/expand button for component And thanks for
creating this. This is so far the best dev product I have seen in a while

~~~
makeee
Hey, could you clarify what you mean by collapse/expand button for components?
Currently, there is a +- button on each component that is a bit like
collapse/expand. Technically it's controlling whether the component's inner
structure is displayed inline in the tree or whether you just see the
instance.

------
agustif
This looks great, would be awesome if possible to customize and add
plugins/other integrations one self back to the mothership

~~~
makeee
Hey, would love to hear what kind of plugins or integrations you'd want. I'll
be adding them pretty quickly over the next few months.

------
davidjnelson
This sounds awesome! Does it work with server side rendering or is that coming
with the next.js integratiom you have planned?

~~~
makeee
Hey David, I don't export anything that helps with server-side rendering the
CRA app. In theory, I could do that if people want it, but my feeling is
people that want SSR should probably just use Next.js once we support it.
Coming soon!

------
bighitbiker3
This is awesome! Can't wait to try it out

------
graylien
it's almost like no code, but it is code

~~~
makeee
Did I just get my new tagline?

------
danpedder9
This is awesome - literally took me just a few minutes to get something going.
Great work.

~~~
makeee
Wooo! That's great to hear :)

------
dsouza889
I love the idea! please add support to vue.js too. Thanks.

------
jameshk
Very cool project, I’m excited to see where you take this!

~~~
makeee
Thanks! Would love to hear any thoughts if you give it a try. Critical
feedback is most welcome.

------
pixel67
Looks awesome, are there going to be more choices coming?

~~~
makeee
For sure, listening to feedback and seeing what people want right now.
Anything you want in particular?

------
catchmeifyoucan
Would be awesome if it supported Semantic UI

~~~
makeee
Thanks for the suggestion. Will consider.

------
onion2k
I made a project, I messed around with the components, and I exported it.
There weren't any tests or docs. That's very disappointing.

~~~
makeee
This is helpful feedback. Right now it exports the normal CRA readme. Plan is
to soon replace that with a dynamically generated doc that goes over your
chosen stack as well as some details like the light wrappers we export around
routing and auth. Is that what you had in mind? In terms of docs, anything
else you’d like to see?

~~~
onion2k
_Is that what you had in mind?_

That's exactly what I would have liked to see, yes.

------
andrewstuart
This must have been ALOT of work.

------
lucasverra
my 2 cats after 10 sec of checking :

feature request :

\- add for UI kit : ant.design & reactSemantic.UI please :)

~~~
makeee
Thanks for the suggestions! They are on my radar :)

------
tschwimmer
This is a great idea!

------
lowestlatency
Antd support pls

------
properframework
Why not just use angular cli and be done with it?

------
dlphn___xyz
nice work

------
buremba
Would love to see Vue version of it.

~~~
makeee
I started out trying to make it framework agnostic, but decided to really try
to nail React first and then see about supporting other frameworks. Appreciate
the feedback!

------
amazingandyyy
support builder!

~~~
makeee
What's builder?

------
mattblackdev
Nice job Gabe! Next week's hook: const myApp = useDivjoy('material-ui',
'@reach/router')

~~~
makeee
Thanks Matt!

------
somesortofsystm
I don't like this much. I'm using React as a UI engine for IoT devices, where
the interchange is defined with protocol buffers.

Yes, just protocol buffers .. which generate templates for React to slurp up
and render.

Doing this the "Web-first" way, means I have to sign up to produce code? This
is where I object.

Please people, push things into the smaller end of the stack! Its the natural
order of things...

~~~
makeee
Not sure I'm following you.. also it doesn't have signup. You can use the
entire app and export a codebase without signing up.

~~~
somesortofsystm
Ah, well I missed that in my hatred for React things, but okay, fair point.
Sorry for bloviating.

