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.
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 !!,
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?
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.
Yeah looking into adding Styled Components and Emotion support. Should be pretty easy since all custom style is already stored in a json format and scoped to each element.
It'd be pretty easy to strip the UI framework out if that's what you want - probably easier than starting with CRA :facepalm: I agree, though, this would be a great option.
Thank you, I think it is great idea and I love it. I need to play with it, but on the face of it, seems like solid idea and very useful tool. Thank you!
I personally like Bulma a lot and think it is useful, so either that or Material works for me.
If you do decide that, it would be super cool to make a license like Unity where it's free until a certain project revenue amount, then you do a percentage or something.
That could really induce testing and user adoption.
I think most of the revenue would be from the small companies or agencies that need to make many sites fast on a regular basis. Once you have larger revenue then you wouldn't be using something like this — you would have your team.
This is awesome! I am a frontend noob and I've been learning a whole lot of things last 4 weeks and got a Vue SPA with Cognito auth, AWS amplify, Quasar and Vuex. I don't like the output I see in the browser and it pisses me off really. I am yet to cover UX, CSS/Stylus/SCSS and I see a bunch of bundle size warnings that I've no idea how to fix. For people like me, this project would reduce the bootstrap time significantly. I see you plan to add support for Vue etc but man, you're building something very valuable. Kudos.
Thanks for the kind words! Totally understand the frustration of trying to piece everything together. Been there many times and why I finally decided to give this idea shot :)
Hey Chris, yeah Gatsby is awesome! I use it on https://usehooks.com. They're doing some really interesting stuff with themes, component shadowing, and of course their whole graphql system. Not totally sure how Divjoy would integrate with all that stuff (or whether it should try) but going to be exploring that soon.
Firstly, a big well done to you. This is absolutely amazing. I am pure backend dev struggling to get my idea up and running. This will solve my worry of auth and the initial design right away.
My questions:
Is there a way to contribute?
Are you planning to monetise this?
That's so great to hear! Please don't hesitate to reach out if you run into and issues. I'm going to be trying out some premium themes and components soon.
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.
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.
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.
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.
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)
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.
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!
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 !
That makes me very happy to hear. I'm trying to keep a pretty light abstraction over code. Over time going to build UIs over the code bits, like props, scoped style, etc.
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
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.
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).
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.
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 ?
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?
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.
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!
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
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.
132 comments
[ 2.7 ms ] story [ 179 ms ] threadThis was by the far the most difficult project I've ever built. Would love to hear your thoughts and happy to answer questions.
I'm using styled components too. But the idea is to have nothing unnecessary forced on you like an UI library, email subscription and so on
I personally like Bulma a lot and think it is useful, so either that or Material works for me.
That could really induce testing and user adoption.
Congratulations on making the Web a more comfortable place for Delphi expats.
My questions: Is there a way to contribute? Are you planning to monetise this?
I wonder if you could use that to build your templates since it's open source :)
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!
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)
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...