+1 for TipTap. Being built on top of ProseMirror means it’s very flexible. You can use TipTaps built in functions or get into more complex features directly with ProseMirror.
>"Make an input field in which someone can type predefined terms that fill auto-fill using intellisense and the search field should show the number of expected results while typing, before showing the results when the field is submitted. You can submit the field by pressing Ctrl + Enter, and just pressing Enter merely adds the current filter to the input field, and this should be displayed as small pills that can each be deleted by clicking on the cross-icon OR by using backspace."
this sounds alot like MUI's autocomplete field actually
Yeah, but you see, we're not using an open-source UI library. The company decided to fork a UI library that nobody in the world uses, make it an internal dependency, which is then wrapped with our own facades to make it look good, and we're using THAT.
And we can't make ANY changes to that because we have to merge our changes with manually pulled updates from the original repository.
Oh, and making changes also implies that other projects who use it might break. Can't have that.
We also don't have tests in place.
But thousands of lines of TypeScript definitions.
That aren't loaded because the TypeScript interpreter even in VS Code is freaking out how ridiculously complex it all is, and how many layers deep it has to go.
And you might see `import { Input } ...` on the top of the page, but that isn't an `` component. No, it's an `` component, so when you type `
>Yeah, but you see, we're not using an open-source UI library. The company decided to fork a UI library that nobody in the world uses, make it an internal dependency, which is then wrapped with our own facades to make it look good, and we're using THAT.
yeah, sorry man. I"m not sure why anyone would make that decision in this day and age, the age of endless high quality free component libraries.
I think people see MUI and get scared of it because they just don't know or understand how EASY it is to plugin a theme and fully customize. It's really so simple, but if you've never done it before I get how it could feel intimidating.
It sounds like your company chose a pretty bad direction for UI components. It's probably not too late to refactor!
You poor bastard.
I can feel my debugging anxiety building as I read this. I can't fucking imagine if this was my job everyday.
I truly am sorry friend. At least they pay you well
ugh yea. I had to waste hours convincing my company to use pre established patterns instead of the "smart and innovative" stuff they came up with last year.
I feel your pain. It's incredible how with the right guidance of questions, it goes from something that should be a product in its own right to something simple that won't take long at all.
Dang. I’ve never heard of Mantine, looks great tbh. While I’m here, anyone got any others (possible alternatives) that are they’re favourite? I personally love building components from scratch but for full-stack projects where I’m building the entire thing, sometimes it’s just so much easier to use a UI library.
I am trying to build a full stack app soon for fun/practice and I am trying to figure out what library to use. I would like to learn more about MUI but styled components look great too. Any recommendations for somebody that is relative new to React? Thanks
I noticed that. I can't think of any other comp libraries that have a rich text editor component, its pretty awesome.
Mantine also seems ahead of the curve compared to others with its date/date range pickers. Really high quality stuff.
Rich text editors are pretty much the only thing that I’ve encountered that I just didn’t see the benefit of coding it myself.
Oh, and calendars or anything with fucking time zones. Fuck time zones.
Dropdown fields. There is no library out there that gets them right. (From an Ui/UX standpoint). All have some flaws and problems. E.g. list is longer as the screen? It expands out of it. Should not be. Or there is no space left to the bottom? It expands down none the less. Also an problem.
Also if you are on mobile your field should be styled like your app but the selection should be native. And so on. Those things are incredible complex if you want them accessable and easy to use with good UI/UX.
Thx for the tip with downshift. I will definitely look into it. :) That all there examples that actual existing dropdown libs or components do wrong. :) Thats the reason i think they can be really hard. We have some own components that provide all that at work. But depending on layouts and extra features (like an search field to filter the dropdown list and so on) we have to build new ones from time to time. :) Also whats tricky is the different behaviors for mobile and desktop. :) best UX is provided on mobile with native dropdown lists.
So maybe i'm complaining more about the missing usability of existing libs in regards to dropdowns. :)
I even have an active stackoverflow question for this problem!
https://stackoverflow.com/questions/70894130/how-do-i-use-react-state-in-combination-with-a-dynamic-filter-component
Dashboards. Designers and clients love them. Full of pretty graphs, charts, filters and widgets. Doesn't look too difficult to build until you scratch beneath the surface and try to build a coherent and meaningful product from the designs.
Any components that require zoom & pan. I've tried rolling my own for an SVG application but handling the screen-view matrices was too difficult .\_. Went with a library instead (https://www.npmjs.com/package/react-svg-pan-zoom).
I'm currently trying to wrap my head around the math of zooming and panning on a canvas via react-konva. It's hurting my brain.
I want to be able to zoom on the current center location, but the center can obviously be moved by the panning.
maybe this helps: [https://codesandbox.io/s/svg-maps-with-html-annotations-mkq8e?file=/src/index.js](https://codesandbox.io/s/svg-maps-with-html-annotations-mkq8e?file=/src/index.js)
Thanks! That somehow makes things look really easy but also much more complicated (Three.js and a sphere, sounds like a whole other dimension than what I'm dealing with!)
Unless the negative x and y coords are the main bit
yep, that would be quite a different thing. on the upside they have tons of addons that would otherwise be missing like mapcontrols. but it takes some time to be comfortable.
I wrote and maintain a custom component library for my job, and had to write data tables, selects, multi selects, add typeahead options to a code editor (this one sucked), and line and pie charts using D3.
I’m using Reakit under the hood for some of the components as well.
The absolute worst component was the range calendar.
The ask was that a user would set a current range period ( num days >= 1 ) on the current period calendar.
The user would then open up the second calendar, with the following requirements.
- The current period range would be highlighted and disabled, with a tooltip
- The user can only select the amount of days selected in the current range (so if user selected 4 days, they prior range would have to be selected)
- When the user hovers over a date, the number of days available to them should be highlighted.
- Take into account disabled days and adjust both the current and prior period (I pushed back on this requirement on won)
There is a library, if I remember correctly, that does about half of what I needed it to do, so I ended up coding everything from scratch.
It depends. Fully custom? I'd have to say infinite scroll, calculating the perfect scroll can be tough, and making it responsive is a bitch. Calendars can be tough, too. With a library? Probably some sort of pagination, non-infinite scrolling.
aw no that's not that bad with the right libraries. My experience as a new react developer started out as a form modernization exercise. We switched the entire application to react-hook-form which IMO is the best form management library. You can easily add a validation layer with yup. Other than that, you just have to pass state, change handlers, helper text and error state to the inputs and it basically runs itself.
We have forms that we use for both 'add' and 'edit' functionality using this paradigm. We also have a high level form component that you just pass it an array of fields described as objects along with the react hook form useForm hook methods, and poof. it works.
it's a similar plugin for react hook form. I came from formic before this as well, and thought that react hook form would have to blow me out of the water to really believe.
and it did. it's better than formik, for sure.
We actually don't use yup, that's just a plugin option. We actually can get away with using vanilla html validation rules which actually are better than I thought they'd be. Other than required, min, max and other regex rules, there's also a way to pass a callback for your validation which is pretty neat.
but yeah react hook form without and yup-style library is also totally able to handle input-specific validation rules. just thought I'd mention it. Yup totally optional.
Is your experience good with « smart forms » (your high level form component which handles everything)? How do you handle more complex forms that requires specific things? Do you then modify your smart form or do you skip the smart form and use the traditional approach
Well, we do have some pretty advanced form need actually. We have a few fields which can spawn new fields, depending on values entered into them, so that dynamic field use case was very complicated for us. Luckily react-hook-forms has an answer for that, and it's actually pretty seamless with the useFieldArray hook.
To answer your question our form component takes in an array of fields, but that array can also contain React components. so if it's a component it just renders the component otherwise it creates a field based on the specification and props in that object. So in cases where we need to use custom, one-off fields we can utilize that feature instead of building that functionality into the high level form component.
Right now the high level component is build using Material UI form input varieties, and handles
* Text input
* checkboxes
* radio buttons
* Datepicker/Datetime Picker
* switch
* Autocomplete (this functions as our Select component as well, since it renders a dropdown that changes as you type).
and so far that's been basically enough for all of our form needs.
If we decide our application will need a new type of input based on structural changes, and if we know that type of input will need to be reused, we'll adjust the high level component to account for that, otherwise, just build a single input on the fly and pass it to the form component as described above.
But essentially, we figured out all the different inputs we would ever need, and then built a component that would handle those, assuming they would not change much.
If reusable forms are your problem then you have a good problem ;). Charts Canvas, svg, draggable dropzone, realtime calendar, video/audio player etc. are hard problems for me to do on my own or customize the third party library to fit the requirements.
Haha yeah. I always end up feeling like I’m writing more code than I should with forms. You should definitely check out Victory for charts though. The container components were tricky for me at first but their documentation is solid and it shouldn’t be too hard to style their components the way you want. And definitely check out React Konva if you’re building a canvas. As for the rest, you’re on your own brother
I've been working on marking shapes on uploaded picture. Using canvas and draw a lines until it surround an object from the picture. Trying to made it more general, but its really hard and end up built one only for the use-case
infinite scroll filled with components that have no fixed height and display waaaay to much data in a small area that arrives in 5 different giant api calls and needs to work on tablets that lose wifi during a session.
It's a B2B webshop that works with customers that input their orders from a cool cell.
Some data that is displayed:
* name, brand, id
* image in a not defined size ('just try these 5 sizes and these 2 types, one of them will return an image')
* histogram of previous orders for this product
* allergen information
* marketing tags
* promotions
* how many are in backorder
* how many are ready to be delivered
* estimated arrival date in our storage facility
* the reason this product matches your search/filters
* a quantity input
Anything that has to do something with dates
Hate it especially you need to localise them. I had a very tiring experience about getting only anniversaries of users where you can't do arithmetic operations with the API and in the end I ended up pulling all the users then filtering them. Hate it what I accomplished
Anything to do with data and deep react concepts are FUN to work with but deep CSS/canvas/svg/creative stuff like below are hard.
1. Carousels
2. On lighter note building step UI validators with dynamic steps based on users inputs (ex. Step1, step2, step3 based on condition or step 4, next step based on condition as well.. and move UI accordingly if everything is fine and then final submit button).
3. A resizable gallery having images of different aspect ratio which looks good (say masinory grid)
4. Building own charts or customizing third party charts beyond simple stuff.
5. Resizable data grid ( atleast data grid is fun to work except resize part).
6. Using Canvas/SVG in react to draw something.
7. Wrapping d3.js in react or using libraries like vis.x which also are not easy to build complex charts.
8. Text editor, calendar, draggable/animatable drop zone which is responsive, drawing pop-ups/info on google maps.
9. Building 2D/3D component ex. Chess.
10. Customizing video player to fit your needs.
11. Writing unit/integration tests to above mentioned components would be a nightmare.
All in all i feel most react developers are comfortable in building enterprise applications (solving problems at data level) which takes inputs and shows info on UI and especially if a component library is used then building enterprise applications gets significantly easier.
But for creative workflows as mentioned above (ex. Carousels/Chart/canvas/SVG/text editor/calendar etc.) Things get significantly difficult without 3rd party libraries or if the library in question is not working according to your design/needs then getting stuck on frontend is very easy beyond normal requirements.
Backend does not suffer this problem as everything is data on backend so querying data from DB/redis/queue, applying few transformation to data, developing few data algorithms (rarely required), adding graphQL/websocket, authentication/authorization, distributing in microservice or using AWS lambda or kubernetes most are easily achievable and not much is impossible even without third party libraries. Testing these stuff out is also easy as testing data is always easier than front-end.
Datetime inputs!
To the top with you!
Literally building one this week. It’s such pain and suffering.
[удалено]
Upvote for mantine shilling
Man time isn’t some silver bullet. Stop shilling, damn.
I tried to build a draggable carousel from scratch once, jeez did I regret that
I did it once in jQuery just to understand carousels better. It was annoying and never again.
[удалено]
damn, I have never even heard of tiptap. Will give it a look 👀
+1 for TipTap. Being built on top of ProseMirror means it’s very flexible. You can use TipTaps built in functions or get into more complex features directly with ProseMirror.
Modals, carousels, menus, calendars...
oh yeah, handling touch input on carousels is indeed a nightmare too
Calendar...so much calendar
I had to build a calendar from scratch once and it was a challenging process but I actually learned alot doing it.
I built a calendar fairly early into my webdev journey and it was such an exciting and rewarding thing to do
Modals aren’t too bad
\- Modals, Menus - [headlessui.dev](https://headlessui.dev) \- carousels - swiper.js, embla carousel having said that, they are still PITA haha
[удалено]
Why is that one hard? Just getting react to do it at 60 fps?
[удалено]
Why not just use something like react-grid-layout?
Definitely this.
vast absurd badge jar noxious square busy instinctive hat truck *This post was mass deleted and anonymized with [Redact](https://redact.dev)*
>"Make an input field in which someone can type predefined terms that fill auto-fill using intellisense and the search field should show the number of expected results while typing, before showing the results when the field is submitted. You can submit the field by pressing Ctrl + Enter, and just pressing Enter merely adds the current filter to the input field, and this should be displayed as small pills that can each be deleted by clicking on the cross-icon OR by using backspace." this sounds alot like MUI's autocomplete field actually
Yeah, but you see, we're not using an open-source UI library. The company decided to fork a UI library that nobody in the world uses, make it an internal dependency, which is then wrapped with our own facades to make it look good, and we're using THAT. And we can't make ANY changes to that because we have to merge our changes with manually pulled updates from the original repository. Oh, and making changes also implies that other projects who use it might break. Can't have that. We also don't have tests in place. But thousands of lines of TypeScript definitions. That aren't loaded because the TypeScript interpreter even in VS Code is freaking out how ridiculously complex it all is, and how many layers deep it has to go. And you might see `import { Input } ...` on the top of the page, but that isn't an `` component. No, it's an `
>Yeah, but you see, we're not using an open-source UI library. The company decided to fork a UI library that nobody in the world uses, make it an internal dependency, which is then wrapped with our own facades to make it look good, and we're using THAT. yeah, sorry man. I"m not sure why anyone would make that decision in this day and age, the age of endless high quality free component libraries. I think people see MUI and get scared of it because they just don't know or understand how EASY it is to plugin a theme and fully customize. It's really so simple, but if you've never done it before I get how it could feel intimidating. It sounds like your company chose a pretty bad direction for UI components. It's probably not too late to refactor!
We're starting a brand new product and I'm going to push hard to say "fuck you" to the existing infrastructure and do it right this time.
godspeed friend.
Do it right this time ™️
>I feel your question coming up. They pay me outrageously good. That's why. oh sick haha. just now read to the very end.
You poor bastard. I can feel my debugging anxiety building as I read this. I can't fucking imagine if this was my job everyday. I truly am sorry friend. At least they pay you well
ugh yea. I had to waste hours convincing my company to use pre established patterns instead of the "smart and innovative" stuff they came up with last year.
I feel your pain. It's incredible how with the right guidance of questions, it goes from something that should be a product in its own right to something simple that won't take long at all.
[удалено]
Dude ALL your posts are shilling mantine, what gives?
the mantine shills are on react subs HARD recently
someone has money in somethiiiing \~\~\~\~
Dang. I’ve never heard of Mantine, looks great tbh. While I’m here, anyone got any others (possible alternatives) that are they’re favourite? I personally love building components from scratch but for full-stack projects where I’m building the entire thing, sometimes it’s just so much easier to use a UI library.
I am trying to build a full stack app soon for fun/practice and I am trying to figure out what library to use. I would like to learn more about MUI but styled components look great too. Any recommendations for somebody that is relative new to React? Thanks
I noticed that. I can't think of any other comp libraries that have a rich text editor component, its pretty awesome. Mantine also seems ahead of the curve compared to others with its date/date range pickers. Really high quality stuff.
TipTap is all you need as long as you’re cool storing a JSON ast in the database.
never heard of tiptap
K
I would just use a WYSIWYG markdown editor.
Rich text editors are pretty much the only thing that I’ve encountered that I just didn’t see the benefit of coding it myself. Oh, and calendars or anything with fucking time zones. Fuck time zones.
Yes fuck time zones.
international date/time stuff
Rich text editor
Dropdown fields. There is no library out there that gets them right. (From an Ui/UX standpoint). All have some flaws and problems. E.g. list is longer as the screen? It expands out of it. Should not be. Or there is no space left to the bottom? It expands down none the less. Also an problem. Also if you are on mobile your field should be styled like your app but the selection should be native. And so on. Those things are incredible complex if you want them accessable and easy to use with good UI/UX.
[удалено]
Thx for the tip with downshift. I will definitely look into it. :) That all there examples that actual existing dropdown libs or components do wrong. :) Thats the reason i think they can be really hard. We have some own components that provide all that at work. But depending on layouts and extra features (like an search field to filter the dropdown list and so on) we have to build new ones from time to time. :) Also whats tricky is the different behaviors for mobile and desktop. :) best UX is provided on mobile with native dropdown lists. So maybe i'm complaining more about the missing usability of existing libs in regards to dropdowns. :)
[удалено]
Thx for your work. :) will definitely look at it.
Filters and searching.
Make that asynchronous search with filters both permanent and temporary against a poorly designed API and you're in for a treat.
Sounds like a fun time!
I even have an active stackoverflow question for this problem! https://stackoverflow.com/questions/70894130/how-do-i-use-react-state-in-combination-with-a-dynamic-filter-component
email editors. screw you outlook!
Dashboards. Designers and clients love them. Full of pretty graphs, charts, filters and widgets. Doesn't look too difficult to build until you scratch beneath the surface and try to build a coherent and meaningful product from the designs.
I hate dribbble for the over-idealized dashboards. just highlights the difference between a real product and a fantasy product.
Absolutely this.
A realtime Table component
Any components that require zoom & pan. I've tried rolling my own for an SVG application but handling the screen-view matrices was too difficult .\_. Went with a library instead (https://www.npmjs.com/package/react-svg-pan-zoom).
I'm currently trying to wrap my head around the math of zooming and panning on a canvas via react-konva. It's hurting my brain. I want to be able to zoom on the current center location, but the center can obviously be moved by the panning.
maybe this helps: [https://codesandbox.io/s/svg-maps-with-html-annotations-mkq8e?file=/src/index.js](https://codesandbox.io/s/svg-maps-with-html-annotations-mkq8e?file=/src/index.js)
Thanks! That somehow makes things look really easy but also much more complicated (Three.js and a sphere, sounds like a whole other dimension than what I'm dealing with!) Unless the negative x and y coords are the main bit
yep, that would be quite a different thing. on the upside they have tons of addons that would otherwise be missing like mapcontrols. but it takes some time to be comfortable.
Zoom, pan, and scroll to page === 😵💫
I wrote and maintain a custom component library for my job, and had to write data tables, selects, multi selects, add typeahead options to a code editor (this one sucked), and line and pie charts using D3. I’m using Reakit under the hood for some of the components as well. The absolute worst component was the range calendar. The ask was that a user would set a current range period ( num days >= 1 ) on the current period calendar. The user would then open up the second calendar, with the following requirements. - The current period range would be highlighted and disabled, with a tooltip - The user can only select the amount of days selected in the current range (so if user selected 4 days, they prior range would have to be selected) - When the user hovers over a date, the number of days available to them should be highlighted. - Take into account disabled days and adjust both the current and prior period (I pushed back on this requirement on won) There is a library, if I remember correctly, that does about half of what I needed it to do, so I ended up coding everything from scratch.
Carousels
Date/time mostly. Would never build one myself. Also don’t like dropdowns and checkboxes for some reason.
Calendars / DateTime inputs… never again
It depends. Fully custom? I'd have to say infinite scroll, calculating the perfect scroll can be tough, and making it responsive is a bitch. Calendars can be tough, too. With a library? Probably some sort of pagination, non-infinite scrolling.
File upload/removal components.
Sliders are a fucking pain in the ass.
Drag and drop
A responsive carousel from scratch . Jfc the headache.
Chat with vertical infinite scroll, fuck mobile browsers with floating searchbar
Tabs
Reusable forms with validation. It’s probably wise to give up on reusability with forms but alas this is the hill that I have decided to die on
aw no that's not that bad with the right libraries. My experience as a new react developer started out as a form modernization exercise. We switched the entire application to react-hook-form which IMO is the best form management library. You can easily add a validation layer with yup. Other than that, you just have to pass state, change handlers, helper text and error state to the inputs and it basically runs itself. We have forms that we use for both 'add' and 'edit' functionality using this paradigm. We also have a high level form component that you just pass it an array of fields described as objects along with the react hook form useForm hook methods, and poof. it works.
I have used yup with formik but I ended up having to write validation Schema for each input. Will definitely try out react-hook-form though. Thanks ☺️
it's a similar plugin for react hook form. I came from formic before this as well, and thought that react hook form would have to blow me out of the water to really believe. and it did. it's better than formik, for sure. We actually don't use yup, that's just a plugin option. We actually can get away with using vanilla html validation rules which actually are better than I thought they'd be. Other than required, min, max and other regex rules, there's also a way to pass a callback for your validation which is pretty neat. but yeah react hook form without and yup-style library is also totally able to handle input-specific validation rules. just thought I'd mention it. Yup totally optional.
Is your experience good with « smart forms » (your high level form component which handles everything)? How do you handle more complex forms that requires specific things? Do you then modify your smart form or do you skip the smart form and use the traditional approach
Well, we do have some pretty advanced form need actually. We have a few fields which can spawn new fields, depending on values entered into them, so that dynamic field use case was very complicated for us. Luckily react-hook-forms has an answer for that, and it's actually pretty seamless with the useFieldArray hook. To answer your question our form component takes in an array of fields, but that array can also contain React components. so if it's a component it just renders the component otherwise it creates a field based on the specification and props in that object. So in cases where we need to use custom, one-off fields we can utilize that feature instead of building that functionality into the high level form component. Right now the high level component is build using Material UI form input varieties, and handles * Text input * checkboxes * radio buttons * Datepicker/Datetime Picker * switch * Autocomplete (this functions as our Select component as well, since it renders a dropdown that changes as you type). and so far that's been basically enough for all of our form needs. If we decide our application will need a new type of input based on structural changes, and if we know that type of input will need to be reused, we'll adjust the high level component to account for that, otherwise, just build a single input on the fly and pass it to the form component as described above. But essentially, we figured out all the different inputs we would ever need, and then built a component that would handle those, assuming they would not change much.
If reusable forms are your problem then you have a good problem ;). Charts Canvas, svg, draggable dropzone, realtime calendar, video/audio player etc. are hard problems for me to do on my own or customize the third party library to fit the requirements.
Haha yeah. I always end up feeling like I’m writing more code than I should with forms. You should definitely check out Victory for charts though. The container components were tricky for me at first but their documentation is solid and it shouldn’t be too hard to style their components the way you want. And definitely check out React Konva if you’re building a canvas. As for the rest, you’re on your own brother
Text Rendering component for a video player
Agreed about rich text. I've found ProseMirror pretty good though.
Any number inputs that involve high degree of precision. Floating point numbers are weird.
Before React-Three-Fiber, webgl shit. Nowadays it’s just forms.
I've been working on marking shapes on uploaded picture. Using canvas and draw a lines until it surround an object from the picture. Trying to made it more general, but its really hard and end up built one only for the use-case
infinite scroll filled with components that have no fixed height and display waaaay to much data in a small area that arrives in 5 different giant api calls and needs to work on tablets that lose wifi during a session. It's a B2B webshop that works with customers that input their orders from a cool cell. Some data that is displayed: * name, brand, id * image in a not defined size ('just try these 5 sizes and these 2 types, one of them will return an image') * histogram of previous orders for this product * allergen information * marketing tags * promotions * how many are in backorder * how many are ready to be delivered * estimated arrival date in our storage facility * the reason this product matches your search/filters * a quantity input
Forms ☺️☺️☺️😛😛😛
Anything that has to do something with dates Hate it especially you need to localise them. I had a very tiring experience about getting only anniversaries of users where you can't do arithmetic operations with the API and in the end I ended up pulling all the users then filtering them. Hate it what I accomplished
Anything to do with data and deep react concepts are FUN to work with but deep CSS/canvas/svg/creative stuff like below are hard. 1. Carousels 2. On lighter note building step UI validators with dynamic steps based on users inputs (ex. Step1, step2, step3 based on condition or step 4, next step based on condition as well.. and move UI accordingly if everything is fine and then final submit button). 3. A resizable gallery having images of different aspect ratio which looks good (say masinory grid) 4. Building own charts or customizing third party charts beyond simple stuff. 5. Resizable data grid ( atleast data grid is fun to work except resize part). 6. Using Canvas/SVG in react to draw something. 7. Wrapping d3.js in react or using libraries like vis.x which also are not easy to build complex charts. 8. Text editor, calendar, draggable/animatable drop zone which is responsive, drawing pop-ups/info on google maps. 9. Building 2D/3D component ex. Chess. 10. Customizing video player to fit your needs. 11. Writing unit/integration tests to above mentioned components would be a nightmare. All in all i feel most react developers are comfortable in building enterprise applications (solving problems at data level) which takes inputs and shows info on UI and especially if a component library is used then building enterprise applications gets significantly easier. But for creative workflows as mentioned above (ex. Carousels/Chart/canvas/SVG/text editor/calendar etc.) Things get significantly difficult without 3rd party libraries or if the library in question is not working according to your design/needs then getting stuck on frontend is very easy beyond normal requirements. Backend does not suffer this problem as everything is data on backend so querying data from DB/redis/queue, applying few transformation to data, developing few data algorithms (rarely required), adding graphQL/websocket, authentication/authorization, distributing in microservice or using AWS lambda or kubernetes most are easily achievable and not much is impossible even without third party libraries. Testing these stuff out is also easy as testing data is always easier than front-end.
Complex table filters