My free side project: 600+ UI Components with Code Editor | Hacker News Reader

My free side project: 600+ UI Components with Code Editor

easyfrontend.com

116 pointssifuldotdev25 comments

As a frontend developer. I've always found that I can boost my current projects by copying sections or components from previous ones. To keep track of these components, I created a website where I can easily copy and paste them to enhance my work. I believe this can help others too, so I've made it free for all. Additionally, I've included an editor where anyone can build their own React or HTML projects using Bootstrap and Tailwind CSS.

This looks great, and the editor is nice and snappy. I'm not a react guy but might have to learn...

Did you use a component library to build the editor? I see you're using next.js for the site, but was there anything that got you up and running faster from the UI perspective?

Also, do you plan to open source the editor?

Hi, nprateem,

Thank you for the comment. We did not use any component library for the editor. Next.js is also used in the editor. We have plans to make the editor open-source. As we built it for personal use, we will polish it and make it live.

Great, thanks

Your FAQ mentions "free version you can only use it for your personal purpose", yet the license for the components on GitHub is MIT. Can you clarify what exactly is free and what you're selling?

All the components are under MIT license. Updated the FAQ. thanks

Maybe this is obvious, but thank you for making the option to export to raw HTML and not just React components! I've been taking a step back from doing things the react way, and have been struggling with design (so much so that I'm contracting out design work) so this tool comes just in time for me! Great stuff!

You might want to add a "Show HN:" to the front of the title to get more feedback, because this looks pretty decent to me, so I'm a little surprised how little of a reaction you've gotten.

I will say that "components" might be the wrong word - these are fully baked page layouts, which are great time-savers.

The FAQ also has a question about getting refunds, which seems odd on a page that has no costs or pricing?

In short, your marketing of this might need some polish, but the actual content and functionality looks pretty good!

What does "free" mean in the headline? Because according to the FAQ, this is a subscription service.

All the components are free.

OP has previously shilled their site without disclosing they are the owner;

https://news.ycombinator.com/threads?id=sifuldotdev

Yes, and they are now are receiving actual responses now that they are doing it the right way. I guess the system works, and is it not awesome that we have such a great community who welcomes people in?

I want the ability to have something like this integrated with VS code. I want to be able to start typing out a component name, or press a key shortcut to see components... scroll through... select the export format (React). And then see it rendered in a sideview, with my own theming applied. Use nostril inhale and exhale to tweak certain things.. and then of course, hook it up to data by dragging a little arrow from the 'data' buckets on my hud to the component.

I too miss the golden age of Delphi

And Visual Interdev

Even better, I want to pick components from a tool window, move them around and resize them with the mouse and have the code automatically generated for me, if possible well hidden so I don't even have to look at it.

Somehow this was standard twentyfive years ago, how could we have regressed so much?

We haven't regressed, the code those systems used to generate was a nightmare

We're way better off without them

Nightmare generated code is fine if you never have to look at it. This is like saying we shouldn't use react because of the div soup it spits out.

We should be able to have modern tools that don't require spelunking in their output

I think with the state of llms that we should aim for readable code output. Also react doesn't spit out a div soup, that's totally within the control of the dev

The idea seems good. I will play with some VS Code extensions if it's possible to do

I think that your project is amazing, thank you. Will definitely use it!

p.s. - I think that your project deserves much more attention from HN

You might want to test the landing page more on Android, because at least on my phone it was janky enough to scroll through it to put me off (I'm only bringing it up as I assume the page is using the components the page is about)

As the editor is not ready for mobile. We are working on it to make it more mobile-friendly.

I was confused by the editor. I couldn't get (in a short time) how the two offerings related to each other. You may want to split the two apart, or describe how they relate.

The first offering is a collection of UI Components, Blocks, and Sections built with HTML, React, Bootstrap, and Tailwind CSS. These components are designed to boost your development workflow by providing over 600+ free UI components. Developers can utilize these components by copy-pasting code directly into their projects.

The second offering is a powerful editor tool provided by us. This editor allows users to create, edit, and download complete websites and landing pages without the need for coding from scratch. Users can leverage this editor to customize and integrate the UI components from the collection seamlessly into their projects.

Reply on news.ycombinator.com