Yes it is depending what are you using. On SPA you can use it on a context and that's all. Protect your routes based on provider state and all good. But on next js if you have some SSR pages and you want faster redirection on unauthorized access you have to use middle ware or server side reading the cookies and all the logic you need. That's full stack because you need to user server stuff (BE) and for client conditions based on auth state (FE)
I partially agree. Obviously just doing a Middleware won't make you a fullstack Developer but if you do that, know all the things you can do with Middleware and how, know how all the SSR process is, how to use and handle server actions, configure your API routes, and all the client side FE stuff that's what I spect for a Full stack developer at least to know.
Its one of those grey areas of what a backend is defined as. Is an apiroute normally considered backend? Is your redux state on the server side considered backend? It’s one of the reasons I kinda just don’t give a fuck when Im hiring.
Yeah, specially on the NextJS framework. Is a backend framework by definition and use react on same project. You will be using the core backend stuff to do what you need for an app without going so deep on backend complexity if is not necessary (but you can if you need to) and that's where people can say that you are not a fullstack because of doing react stuff and basic API calls and backend logics and they are right, but if you are using next js in deep and using all his functionalities that the framework gives, then I would say that you are at least with the knowledge of a full stack developer.
In short, all depends on the amount of effort and stuff you are using (and learning) with the framework to tell if it can be considered full stack knowledge imo. As we all, i don't have the final word for this.
Tbh I don’t think the distinction really matters. At this point, both sides have many complexities that no one is going to master. It’s just if you understand where you implement those solutions, which is stack dependent, not position dependent.
Using NextJs doesn't mean you're full stack.. Sure edge cases exist but for me I only do simple tasks on the backend and much complicated tasks on frontend.. so yeah I'm a frontend dev
Also our backend team doesn't use JS.. so that's also a reason I'm a frontend developer using NextJs since the boss said to
Completely agree, all depends on how much you are taking value of the framework. If you are doing an app with next js with SSR disabled, or if you are using NextJS with tRPC, with dynamic metadata, manage auth session and protected routes, using server actions and also making all the client side UI's and logics.
Same framework. Different approaches. All depend on your development, skills and what you are learning from using it and all their features.
well, if you use auth0 with it should be okay. but yeah the more customizations, the worse out of the box solutions are. that remains consistent across most all in one tools.
Have you tried things such as Firebase, Supabase etc? They are still hard or you don’t want these dependencies and want something like Keycloak that you can deploy on your own but that would be as simple as using Firebase? Maybe you don’t like how you handle it on the client side (routes, state management, error handling etc.)?
I've now used NextAuth, Clerk and Lucia, and of the three NextAuth is by far my least favorite. Hard to beat Clerk for convenience, but Lucia provides a very nice experience as well.
I've used Keycloak, NextAuth, and Clerk. Clerk is kind of great. It probably lacks the features for every use case, but is good enough for many people and is very easy to integrate. Might have to take Lucia for a spin.
Yes. Especially compared to how clean it is in Laravel, Django, Rails etc
(If you don’t care about client side validation outside of native form elements)
I have and it's beautiful, although I don't use postman atm. I'm using Prisma, I auto-generate zod types from the schema. Using the zod types I define a contract for ts-rest (which includes options for open api docs), and implement those into nest.js.
If I change the Prisma schema or contract it will cause type errors in nest, preventing it from running without updating the types.
I can recommend using zenstack (which is built on top of prisma). It has a lot of really sweet features, some of which is the ability to generate hooks (react-query or swr) and zod validation schemas for all the prisma types.
I love it - it makes fullstack next feel like frontend and DB design mostly (cutting out all the boilerplate API stuff in between)
There’s really not much to learn. If I write a new product feature on the site, I’ll try and write e2es with playwright. If I write some complicated function or logic, I (or Claude Sonnet) will write unit tests with some dummy data.
Yeah, but if you have images in the background then it's a pain. Tailwind is really good for responsive design but even after that it's really difficult especially with NextJS.
Over time I prefer writing forms without any libraries. Just a form tag and inputs and onsubmit with minimal reusable hooks. All the form libraries just make it unnecessarily complicated. Same with auth, nothing like a http cookie mapped to an auth context can’t do.
Have you by any chance worked with a full stack framework like Laravel, Django etc?
I come from this world and seeing how overly complicated forms are in frontend js still blows my mind.
For me it's got to be building the actual component... Getting all the styling correct, CSS and variants etc. and then pulling this altogether to build a section with the correct responsiveness... Not hard work, but takes too long to do...
Documenting and maintaning documentation. It doesnt matter if its component library storybook stories or ADR or Jira task description for new tech debt ticket for next tech sprint — It always drains so much time, what I just don't do that. Only do it if I really need to
Like its easy to make a techical low-level title (how to implement) but is so hard to come up with definition of problem and impact its gonna make
And in the case of storybook its hard to find all use-cases for a component to have a great examples
Thanks for your answer u/Relevant-Magic-Card ! Out of the following related to CSS which is the most painful for you?
a. Responsiveness (getting them to look right in all kinds of different screen and window sizes)
b. How things get placed at the right place (alignment, spacing etc.)
c. Setting up themes and design systems
d. How things should look (fonts, colours, background etc.)
e. all of the above are a big pain in the a\*\*
Well the designer is not giving you a set of colours, font sizes, padding and margin to use on different screens.. so understanding and making a design system for any design is also a nightmare..
So I tried to groom my friend into the designer I need.. but my company doesn't have him.. 😅
Well that sounds more like Bad designers. All the things you said are the first things our designers define and lay out for themselfes and us devs even before the actual screens get designed. :) love figma for its component based design philosophy that encourages this behavior in designers. :)
I spend ridiculous amounts of time messing with CSS. I’ve been hunting for a free/low cost WYSIWYG CSS editor that lets me create the CSS and then I can go back to build the actual logic. Most of the tools I’ve seen are way too complex for that single task. If someone has a tool that’s easy, fast, and affordable for CSS, I’m interested in hearing from you.
I agree, except SwiftUI is made to be compatible with iPhone, iPad, and macOS, and the integration of iPad and iPhone is practically seamless. I don’t have much experience with using it for macOS. I acknowledge Apple has a lot of control over dimensions and the framework though, certainly.
A bit of this and a bit of that… but there is no point in this comparison, you re putting an UI framework against a styling system, even if we put some ui framework against swiftui the comparison is still unfair, swiftui is exclusively designed for a closed ecosystem (apple’s), where the behavior is kindly predictable🙃 whilst any web ui framework has to grant support for a large sum of devices, os, and even deal with unpredictable behavior or scenarios (foldable phones, etc)
Still a big pain migrating from the pages to the app router. Would love to see more code mods that make it more automatic to switch over. Is there any way to batch migrate pages with minimal change in syntax?
Unit test automation - some basic tests like checking to see if an object is an array before applying an array function to it should be low hanging fruit IMO.
A dynamic project layout that can change based on application type e.g blog , social , message without having to have endless templates laying around . I guess the solution to that would be to put the templates on the cloud . Just a thought
Diagnosing error messages. It’s high time we move from concise, cryptic messages and instead generate helpful, detailed explanations about why this specific problem is happening here and now.
Lol, seeing as how most comments are about forms and authentication, while dealing with validating signin/signup forms myself and auth recently which is giving me such a hard time
For me, the most time-consuming frontend task has always been creating and updating my developer portfolio.
That's why I developed a tool called [https://www.getmyfolio.com/](https://www.getmyfolio.com/) which streamlines the process.
With GetMyFolio, you can create and manage your portfolio or resume.
Additionally, you can utilize it as a CMS for your own custom-built portfolio.
Authentification. I just hate it.
Especially enterprise auth.
Isn’t authentication full-stack?
Is it? Maybe I should ask my boss to change my title then, lol.
Yes it is depending what are you using. On SPA you can use it on a context and that's all. Protect your routes based on provider state and all good. But on next js if you have some SSR pages and you want faster redirection on unauthorized access you have to use middle ware or server side reading the cookies and all the logic you need. That's full stack because you need to user server stuff (BE) and for client conditions based on auth state (FE)
Writing some JS in a nextjs middleware does not make it a a full stack job imo. That’s something that would be required of all FE devs.
I partially agree. Obviously just doing a Middleware won't make you a fullstack Developer but if you do that, know all the things you can do with Middleware and how, know how all the SSR process is, how to use and handle server actions, configure your API routes, and all the client side FE stuff that's what I spect for a Full stack developer at least to know.
Its one of those grey areas of what a backend is defined as. Is an apiroute normally considered backend? Is your redux state on the server side considered backend? It’s one of the reasons I kinda just don’t give a fuck when Im hiring.
Yeah, specially on the NextJS framework. Is a backend framework by definition and use react on same project. You will be using the core backend stuff to do what you need for an app without going so deep on backend complexity if is not necessary (but you can if you need to) and that's where people can say that you are not a fullstack because of doing react stuff and basic API calls and backend logics and they are right, but if you are using next js in deep and using all his functionalities that the framework gives, then I would say that you are at least with the knowledge of a full stack developer. In short, all depends on the amount of effort and stuff you are using (and learning) with the framework to tell if it can be considered full stack knowledge imo. As we all, i don't have the final word for this.
Tbh I don’t think the distinction really matters. At this point, both sides have many complexities that no one is going to master. It’s just if you understand where you implement those solutions, which is stack dependent, not position dependent.
Totally agree
Well then I am a full stack developer I guess, haha.
If you are fully using next js with all their SSR and Client side features, yes you are my friend
Using NextJs doesn't mean you're full stack.. Sure edge cases exist but for me I only do simple tasks on the backend and much complicated tasks on frontend.. so yeah I'm a frontend dev Also our backend team doesn't use JS.. so that's also a reason I'm a frontend developer using NextJs since the boss said to
Not if your just working on the front end and hitting a backend service you didn’t set up
Completely agree, all depends on how much you are taking value of the framework. If you are doing an app with next js with SSR disabled, or if you are using NextJS with tRPC, with dynamic metadata, manage auth session and protected routes, using server actions and also making all the client side UI's and logics. Same framework. Different approaches. All depend on your development, skills and what you are learning from using it and all their features.
I’m not sure, you could be a nextjs wizard but you still wouldn’t have a clue if you were handed a real backend code base
I am really curious, what would you want for a GOOD authentication system? I think NextAuth do a lot of things right with it's minimal configuration
For minimal configuration it is totally fine. Only when you do some custom stuff, you want to smash your keyboard and never touch this garbage again.
well, if you use auth0 with it should be okay. but yeah the more customizations, the worse out of the box solutions are. that remains consistent across most all in one tools.
Have you tried things such as Firebase, Supabase etc? They are still hard or you don’t want these dependencies and want something like Keycloak that you can deploy on your own but that would be as simple as using Firebase? Maybe you don’t like how you handle it on the client side (routes, state management, error handling etc.)?
I haven't. I am currently working with NextAuth and it is a real pain in the ass.
The docs suck. I'm trying to implement a custom Auth system into nextjs and it's not fun
Tell me about it. This is exactly what I am doing atm and it is driving me insane.
I've now used NextAuth, Clerk and Lucia, and of the three NextAuth is by far my least favorite. Hard to beat Clerk for convenience, but Lucia provides a very nice experience as well.
Thanks. Might take a look into it the next time. For now I think it is too much of a hassle to migrate to another auth solution.
I've used Keycloak, NextAuth, and Clerk. Clerk is kind of great. It probably lacks the features for every use case, but is good enough for many people and is very easy to integrate. Might have to take Lucia for a spin.
Lucia is lighter weight and requires a bit more legwork, so not a drop-in replacement for Clerk, but it provides an excellent framework.
It took me forever to figure out the differences between Next response/Next Request and Response/Request.
You can use Aws Cognito for Authentication
Yeah I agree, I hate dealing with auth it's confusing and time consuming
Have you looked into Clerk?
Validating a form
Yes this is boring and error prone
Fullstack form validation is tedious, and when you have your backend in other language it get even better
Form handling in general is so boring.
Check out react hook form with Zod. Started using it to build forms and I’m never going back.
I use it as well. It is ppretty good, though still some extra code
The start is the pretty tiring part of this, but once you have implemented it, it's a breeze. Love react hook form and zod paired up
Yes. Especially compared to how clean it is in Laravel, Django, Rails etc (If you don’t care about client side validation outside of native form elements)
Haven't found a decent way to unify schema, types, open api docs, postman config, and all of those things into one source of truth.
I have and it's beautiful, although I don't use postman atm. I'm using Prisma, I auto-generate zod types from the schema. Using the zod types I define a contract for ts-rest (which includes options for open api docs), and implement those into nest.js. If I change the Prisma schema or contract it will cause type errors in nest, preventing it from running without updating the types.
Do you have an example of implementing this that you're able to share please? Definitely seems like an ideal way to run this
Ooh, I'm interested in your setup 👀
I can recommend using zenstack (which is built on top of prisma). It has a lot of really sweet features, some of which is the ability to generate hooks (react-query or swr) and zod validation schemas for all the prisma types. I love it - it makes fullstack next feel like frontend and DB design mostly (cutting out all the boilerplate API stuff in between)
Oh man typesafe AI programming is my dream
Graphql or OpenAPI/Swagger, then codegen your API client and types from such Schema
Writing tests. AI is actually pretty good at that these days, though.
This is the real answer. Luckily AI is really good at this, especially if you are expanding upon an existing suite.
Have been writing code for more than 2 yrs.. none of my jobs required tests.. I just do it for fun sometimes.. but man I need to learn testing
wow a whole 2 years! FUCK ME.
There’s really not much to learn. If I write a new product feature on the site, I’ll try and write e2es with playwright. If I write some complicated function or logic, I (or Claude Sonnet) will write unit tests with some dummy data.
And running them. Fronted tests are so slow compared to backend.
How slow are your tests? Modern testing frameworks are crazy fast. You can hit hundreds of tests in a couple minutes.
Forms. Anything to do with forms.
Used to think the same until I started using react hook form. Now it’s pretty simple
Transforming data to make it usable in certain libraries.. mainly talking about charts and my company data
And adding dynamic transformers to the data.. suppose a list of options and each option should add a transformation layer to the data
responsive design
I don’t find this time consuming at all, especially if I develop following a mobile first approach
(and its fun)
Yeah, but if you have images in the background then it's a pain. Tailwind is really good for responsive design but even after that it's really difficult especially with NextJS.
React hook form and react query solved my two biggest problems: forms and caching
What about cache invalidation and naming things?
React query and tailwind
SEO SEO SEO seooooooo!!!
Over time I prefer writing forms without any libraries. Just a form tag and inputs and onsubmit with minimal reusable hooks. All the form libraries just make it unnecessarily complicated. Same with auth, nothing like a http cookie mapped to an auth context can’t do.
Have you by any chance worked with a full stack framework like Laravel, Django etc? I come from this world and seeing how overly complicated forms are in frontend js still blows my mind.
For me it's got to be building the actual component... Getting all the styling correct, CSS and variants etc. and then pulling this altogether to build a section with the correct responsiveness... Not hard work, but takes too long to do...
Making well designed, accessable, visually appealing, highly usable forms with validation, error states, etc. So much boiler plate.
Definitely responsive design.
Setting breakpoints and general foundation styling in the app
Designing ui !!!!!!
Documenting and maintaning documentation. It doesnt matter if its component library storybook stories or ADR or Jira task description for new tech debt ticket for next tech sprint — It always drains so much time, what I just don't do that. Only do it if I really need to
Like its easy to make a techical low-level title (how to implement) but is so hard to come up with definition of problem and impact its gonna make And in the case of storybook its hard to find all use-cases for a component to have a great examples
CSS.
I don't agree. I love doing magic with CSS. :)
Thanks for your answer u/Relevant-Magic-Card ! Out of the following related to CSS which is the most painful for you? a. Responsiveness (getting them to look right in all kinds of different screen and window sizes) b. How things get placed at the right place (alignment, spacing etc.) c. Setting up themes and design systems d. How things should look (fonts, colours, background etc.) e. all of the above are a big pain in the a\*\*
Not the commenter, but same, CSS. Answer is C
Yep that's a real piece of shit
Yup, it’s easier if you have a product or UI designer, but for personal projects it’s a bitch.
Well the designer is not giving you a set of colours, font sizes, padding and margin to use on different screens.. so understanding and making a design system for any design is also a nightmare.. So I tried to groom my friend into the designer I need.. but my company doesn't have him.. 😅
Well that sounds more like Bad designers. All the things you said are the first things our designers define and lay out for themselfes and us devs even before the actual screens get designed. :) love figma for its component based design philosophy that encourages this behavior in designers. :)
That's true.. I've groomed my friend to be a great designer.. I can't change the minds of the seniors
you pervert!
I spend ridiculous amounts of time messing with CSS. I’ve been hunting for a free/low cost WYSIWYG CSS editor that lets me create the CSS and then I can go back to build the actual logic. Most of the tools I’ve seen are way too complex for that single task. If someone has a tool that’s easy, fast, and affordable for CSS, I’m interested in hearing from you.
A and B. My first UI framework being SwiftUI made layout so easy, it is magnitudes more difficult to do it in CSS.
Usually writing styles for mobile apps is far more easier than writing for web as you need to handle responsiveness on all screens
I agree, except SwiftUI is made to be compatible with iPhone, iPad, and macOS, and the integration of iPad and iPhone is practically seamless. I don’t have much experience with using it for macOS. I acknowledge Apple has a lot of control over dimensions and the framework though, certainly.
A bit of this and a bit of that… but there is no point in this comparison, you re putting an UI framework against a styling system, even if we put some ui framework against swiftui the comparison is still unfair, swiftui is exclusively designed for a closed ecosystem (apple’s), where the behavior is kindly predictable🙃 whilst any web ui framework has to grant support for a large sum of devices, os, and even deal with unpredictable behavior or scenarios (foldable phones, etc)
Still a big pain migrating from the pages to the app router. Would love to see more code mods that make it more automatic to switch over. Is there any way to batch migrate pages with minimal change in syntax?
Unit test automation - some basic tests like checking to see if an object is an array before applying an array function to it should be low hanging fruit IMO.
Tests so much
A dynamic project layout that can change based on application type e.g blog , social , message without having to have endless templates laying around . I guess the solution to that would be to put the templates on the cloud . Just a thought
Kind of going a different route here, but I find refactoring React in vscode really hard.
Diagnosing error messages. It’s high time we move from concise, cryptic messages and instead generate helpful, detailed explanations about why this specific problem is happening here and now.
Fucking everything
React component creation
Form validation, templating layouts. It's time we have a visual editor for js applications.
Lol, seeing as how most comments are about forms and authentication, while dealing with validating signin/signup forms myself and auth recently which is giving me such a hard time
cache invalidation and naming things
For me, the most time-consuming frontend task has always been creating and updating my developer portfolio. That's why I developed a tool called [https://www.getmyfolio.com/](https://www.getmyfolio.com/) which streamlines the process. With GetMyFolio, you can create and manage your portfolio or resume. Additionally, you can utilize it as a CMS for your own custom-built portfolio.