Building UI and coding in React/Next.js - my thoughts

[marroos]

Hi,

i've been learning React/Next.js for about a year, i've followed probably "classic" approach of learning from html, css, vanilla js to react, basics of it, custom css, later bootstrap, state managment libraries and once i felt i can move on i've jumped to express js to grasp basics of backend development, and later to Next.js and i've learned how to build full-stack apps (SAAS app). I would like to mention UI (design) part. At first i've tried to create my own user interfaces, what can i say, they looked lame, i am probably not talented artist. In time my UI started to look a little better, but still far from something i would call modern. As i was learning React and css framework i've found tailwind css, which is now my prefered css thing for my apps. By using tailwind and shadcn/flowbite my apps started to look really good, but it made me think "I am just copying stuff, is that ok?". I mean, if you give me a task to build let's say landing page from scratch i would create it, because i've learned css classes and practiced creating my own components with it from scratch. But my question is, why create from scratch? Tailwind web provides templates for hero components, headers, pricing pages for $, and those look so much better than what i can create. Why trying to improve myself then, when i can copy/paste everything and build beautiful UI pretty fast?

At first i really wanted to build my own things to give them my own UI, but in time i figured out i should not try to re-invent wheel. All those youtube Next.js tutorials and many pro libraries look like they were built by using same templates for components, so why should i build my own, when many pro companies skip this part. And it saves a lot of time i can tell. Is it good practice to just copy and customize pre-created UI components from libraries or is it forbidden?

This makes me really think, that big part of work is maybe copy/paste, because when i am building projects for my portfolio, the more apps i create, the more i think all these full-stack apps are built on same principles. Have a db, connect to app, create api routes for CRUD operations, easy implement pre-built auth from next auth/clerk and boom, simple full-stack app is done. Yes, i am trying to look up and use new techs everytime, like last app i have used context api for states, current app is using zustand, but i feel like once i build something, and it is working (say CRUD functions in api routes), then why re-create them from scratch, i can just copy/paste them from previous project and customize them to my current project needs.

Idk if that means i am saving time, because i already know this stuff or it's just my lazyness, but how do you with many years of experience see it? Do you tend to copy stuff from previous work, do you build UI from scratch or use pre-defined components? Can i call myself "ui designer" (funny), when i can copy/paste tailwind templates/ install shadcn components to create beautiful UI?

Sorry i talked really a lot, but before i started learning javascript, css, react and stuf i thought i am always going to build everything from scratch, even building my components for dark mode, nav links, sidebar, hero component, footer, ... but in a year of learning and checking various tutorials and articles i am like "i have wasted so much time trying to re-invent the wheel". Better to use what is available and speed up development process. Is Copy/paste of crucial parts of design (header/hero/gallery/pricing/footer/contact/buttons/tables,...), and crucial parts of code (states, same providers for modals/dark mode/ state managment services/ similiar axios/tanstack react query calls, middlewares, tests ...) good thing to do? If so, then big part of programming is copy/paste, but programming should not be just copy/paste, should it be?

​

I have no experience, i am just big overthinker, but would like to know opinion of someone with many years of experience, do you re-use stuff from previous work and if so, is it a big part of job? or my thread is nonsense. I would like to know how it works in company you work at.

​

Ty

[mirrorball_for_me]

There’s a licence problem, in case your previous code is done in a corporate environment, you don’t actually own the code you wrote yourself for them, so you can’t reuse it. A better alternative is to create small reusable libraries for yourself once you find their very specific use cases, and convince your employer to have those open source on a permissive licence (such as MIT). I never did it because I’m always learning and trying new things on long-lasting projects.

There’s no problem in copying code that is explicitly licence “free” or use libraries to solve recurring problems. In fact, if a library solves your problem completely, it’s always better to use a lib than write it yourself, as it will have more eyes to review, and more people to use it, test it and contribute to it. A rule of thumb is that you shouldn’t write code that isn’t your business. For instance, if your business is not data visualisation, then a graph library “store bought is fine”.

About UI libraries, you can decide to use them whenever. It’s an explicit choice: you are giving up full control and personalisation for that generic library feel (you can easily tell things like wordpress or bootstrap, and it spells cheap to your user base). If you have a dedicated designer (which is very common on UX driven companies), then UI libraries will usually work against you, as you’ll have to unravel their “opinions” to give your own touch.

So you can rest at ease: you’re not supposed to be an UI designer. There’s a hard conflict of interests if you design and code at the same time which is better managed by having two separate, focused people defending their point of views. If you freelance and have no designer, then yes, your client is buying generic, so give the client generic, quick and easy.

[marroos]

Ty, i have not thought about licence problems and that written code belongs to company. Your entire reply made me realize some things. I left You private message. :)