Latest solutions
Password generator app using tailwindcss, react, Next.js 15
#framer-motion#next#shadcn#tailwind-css#reactPSubmitted 5 days ago-
Please share any feedback or improvement suggestions regarding overall component design.
-
I would appreciate feedback on state management approaches (including local state, Zustand, Context, etc.).
-
Tip calculator using tailwindcss, react, Next.js 15
#next#react#tailwind-css#zod#shadcnPSubmitted 7 days ago-
Please share any feedback or improvement suggestions regarding overall component design.
-
I would appreciate feedback on state management approaches (including local state, Zustand, Context, etc.).
-
Time tracking dashboard using tailwindcss, react, Next.js 15
PSubmitted 14 days ago-
Please share any feedback or improvement suggestions regarding overall component design.
-
I would appreciate feedback on state management approaches (including local state, Zustand, Context, etc.).
-
Meet landing page using tailwindcss, next.js
#next#react#tailwind-cssPSubmitted 28 days agoCould you please check if the component structure is appropriately divided? If there’s a better way to structure the components, I’d appreciate your feedback.
Testimonials grid section using tailwindcss, next.js
PSubmitted about 2 months ago- Are there any parts of the current code that could be made more semantic?
- Are there any unnecessary CSS styles that could be removed?
- Is there a way to write the CSS in a cleaner or more maintainable way?
If you notice anything else that could be improved, feel free to let me know.
Latest comments
- @Fikerte-TP@BlonoBuccellati
I’d like to share a few thoughts.
- When the
<input>
receives focus, the UI’s height increases—likely because a border is being added on focus. To prevent that, use an outline instead to avoid this layout shift. An outline is not included in the element’s box size. - The reset button isn’t being disabled based on conditions; consider adding the disabled attribute to the
<button>
to prevent it from being clickable when it shouldn’t be.
Hope this helps!
- When the
- P@mehmetcagriekiciP@BlonoBuccellati
nice
- @MoriNo23What are you most proud of, and what would you do differently next time?
- Proper Use of min-height in Layouts
"How can I use min-height effectively to prevent layout issues? I learned it’s useful for ensuring a container doesn’t shrink too much, but I’m unsure how to balance it with other properties (like height or flex-grow) to avoid unexpected expansion."
Key points:
What challenges did you encounter, and how did you overcome them?You recognize its importance for responsive containers. You want to avoid conflicts with other layout rules. You’re seeking practical examples (e.g., min-height in Flexbox/Grid).
Optional: Code Structure Feedback
"Are there ways to simplify my form validation logic or CSS structure? I’d appreciate feedback on making my code more maintainable."
Key points:
Open-ended request for optimization. Targets readability/scalability.
P@BlonoBuccellatiI’d like to share a few thoughts.
About
height
andmin-height
I generally avoid using
height
in layouts, and instead rely onmax-width
, padding, and flow-based layouts. Setting a fixedheight
can easily cause content to overflow or become clipped, especially on smaller screen sizes.As you mentioned,
min-height
is useful when you want to ensure a container keeps a minimum size — such as for modals. In this specific UI, I would usemin-height
for the modal buttons on mobile view, to ensure they are always placed near the bottom of the viewport. For that, I usemin-h-screen
in Tailwind CSS, which is equivalent tomin-height: 100vh
.
About the structure
It seems the GitHub repository only includes the compiled source code, so unfortunately I wasn’t able to review the layout structure itself.
On form validation logic
I recommend using custom hooks to isolate form logic, such as validation, input state, and submission handling. This improves readability and reusability — especially as your forms become more complex.
On simplifying CSS
There are a few key principles I follow to keep CSS maintainable:
-
Mobile-first design: Start by designing for the smallest screen first. It often leads to simpler layout logic. I recommend this article:
How to Take the Right Approach to Responsive Web Design -
Typography tokens: I like managing typography using tokens or utilities. Here's an example using Tailwind v4:
@utility typo-header { font-family: var(--font-roboto); font-weight: var(--font-weight-bold); font-size: clamp(2.5rem, 1.556rem + 4.05vw, 3.5rem); line-height: 100%; letter-spacing: 0; }
Hope this helps!
Marked as helpful - @ban-tit
- P@devmd1997What are you most proud of, and what would you do differently next time?
Learning how to properly use the positioning elements really helped out when my components kept resizing.
What challenges did you encounter, and how did you overcome them?The toughest part was trying to get the background overlay to look similar to the design. I tried my best with the background overlay styles but it didn't look exactly like the design.
What specific areas of your project would you like help with?I would like to learn more about how to overlay a color over a background image. It was tough to do with the z indexes.
P@BlonoBuccellatiGreat job! I noticed a couple of things that might be worth considering:
- It looks like the buttons don’t have any hover styles applied.
- Using clamp() for font sizing might help make the typography more fluid and responsive across different screen sizes.
Just sharing some thoughts — hope this helps!
- @yrjebP@BlonoBuccellati
Great job! Sorry, I can't review this without seeing the full code.