Latest solutions
Dictionary App with React, Tailwind, Context & Dark Mode
#react#tailwind-cssPSubmitted 2 months ago- I'd love feedback on my use of the Context API — is there a cleaner or more efficient way to organize global state for UI preferences?
- How can I optimize performance and avoid unnecessary re-renders across context consumers?
- Any suggestions on improving accessibility for the font dropdown and dark mode toggle?
Mortgage repayment calculator solution
#react#tailwind-cssPSubmitted 3 months agoI would love the feedback of others on how I can improve this and what I can do to make it better.
Responsive Multipage Web Application in ReactJS
#react#react-router#tailwind-cssPSubmitted 3 months agoI’d love to get feedback on the following areas:
- Error Handling: I would like to improve my form validation and error handling. Specifically, I'd like advice on implementing better UI feedback for users, particularly with multiple field validations.
- Responsive Design: Although I've tested the design on multiple screen sizes, I'd appreciate suggestions on improving responsiveness, especially on larger screens (e.g., ensuring elements are well-aligned and look sharp).
- Optimization: I’m interested in any advice on optimizing my React app for better performance, particularly in terms of load time and smooth transitions when navigating between pages.
Responsive Planets Fact Application in ReactJS
#react-router#tailwind-cssPSubmitted 3 months ago
-
Optimizing dynamic classNames with TailwindCSS:
Currently, I'm dynamically generating some classes likebg-${planet}
for button backgrounds. I would love feedback on better patterns for handling dynamic Tailwind classes safely, especially during production builds (without needing large safelists intailwind.config.js
). -
Improving performance for image loading:
I'm directly rendering planet images based on the selected section. I'd appreciate suggestions on how to implement lazy loading or image optimization to improve performance, especially for slower network connections. -
Error handling and redirects:
I added a basic check for invalid planets, but I would like guidance on best practices for clean 404 handling — for example, should I add a dedicatedNotFound
component and route, or handle it dynamically inside the layout? -
Project structure improvements:
Feedback on how to better organize components, routes, and data fetching for larger scalability (like if I wanted to add moons, stars, or satellites later). -
SEO optimization ideas:
Right now, the page title and meta description are static. I'd love tips on how to dynamically update SEO metadata (like "Mercury - Overview") based on the active planet and section.
✅ This way, reviewers or other developers can give you very targeted and useful feedback!
-
Latest comments
- @TamarawGuyP@19Rohan97
Awesome work! You've replicated the design exceptionally well — your attention to detail and execution really stand out. It's evident that you understand the layout structure and styling principles well. Keep up the great work!
✅ One Suggestion – Simplify with Universal Selector
*
In your CSS, I noticed you've explicitly listed out every single element (like
html
,body
,div
,h1
,p
, etc.) for resetting default styles. While this is thorough and ensures cross-browser consistency (especially for older projects), it’s also quite verbose and can be simplified in modern workflows.
🔁 Recommendation: Use the Universal Selector
Instead of:
html, body, div, span, applet, object, iframe, ... (and many more)
You can use:
* { margin: 0; padding: 0; box-sizing: border-box; }
This does the same job more efficiently by:
- Removing default
margin
andpadding
from all elements - Setting a consistent
box-sizing
model (border-box
) which is easier to manage when working with padding and widths
🕹️ Optional for Older Browser Compatibility
If you're specifically targeting older browsers or legacy layouts, it’s still valid to use a detailed reset like the one you provided. It follows the Eric Meyer reset pattern, which was popular before modern CSS tools became mainstream.
However, for most current web development scenarios, especially in a learning or modern portfolio project, the universal
*
selector or a CSS Reset/Normalize file is enough.
🧠 Pro Tip
For even better practice, combine the universal selector with
::before
and::after
to cover pseudo-elements:*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
This ensures full consistency in how box dimensions are calculated — even for decorative elements like icons or overlays.
- Removing default
- @LalalalooWhat are you most proud of, and what would you do differently next time?
I'm really proud that i was able to replicate the design.
What challenges did you encounter, and how did you overcome them?I didn't know much about git or git-hub, since i am a beginner, but this project taught me. After hours of videos, i finally got it.
What specific areas of your project would you like help with?The entire code. Any feedback would be helpful
P@19Rohan97Awesome work! You've replicated the design exceptionally well — great attention to detail and execution. It’s clear you’re developing a solid understanding of layout and responsiveness. Keep it up!
📱 Suggestion: Embrace Mobile-First Approach
I noticed that in your CSS, you’ve used
max-width
media queries, which means you're working from a desktop-first mindset and scaling down for smaller devices.Instead, I recommend switching to a mobile-first approach, which is the current best practice in responsive design.
✅ Why Mobile-First Is Better:
- Performance: Mobile devices often have slower connections. Serving them a lightweight layout first improves load speed.
- Progressive Enhancement: You start with the most basic version (mobile) and then enhance it for larger screens.
- Maintainability: Writing base styles for mobile and layering
min-width
media queries for tablets and desktops is easier to scale and debug.
💡 Example:
Instead of this (desktop-first):
.element { font-size: 24px; } @media (max-width: 768px) { .element { font-size: 16px; } }
Go for this (mobile-first):
.element { font-size: 16px; } @media (min-width: 768px) { .element { font-size: 24px; } }
This way, you're building from the smallest viewport up — and letting styles grow with the screen size.
Let me know if you want help refactoring your current CSS to follow this approach — I'd be happy to assist!
Marked as helpful - @uconnwomensbballWhat specific areas of your project would you like help with?
Looking for a solution to getting the remove/add buttons level and at the same place on every extension. Based on how much text the extension has, the remove/add buttons and toggle bar will be higher or lower. Just changing "justify" (e.g. between, around) does not fix issue.
P@19Rohan97Feedback for Tailwind Card Implementation
Heyy!! 👋
You did awesome. I love the Tailwind implementation — seriously great work! 🎉
I checked your code and noticed why the alignment of the bottom part of the card is not equal across all the cards.
Here’s the relevant code snippet:
<div class="bg-slate-900 border flex flex-col items-center justify-between mx-2 my-2 p-3 px-4 rounded-3xl w-74"> <div class="flex mt-3 mb-9"> <img src="logo-tab-master-pro.svg" class="mr-4 w-20 h-20"> <div class="flex-col"> <h1 class="text-2xl font-semibold">TabMaster Pro</h1> <p class="text-xl">Organizes browser tabs into groups and sessions.</p> </div> </div> <div class="flex items-center justify-between w-full"> <button id="5" class="remove-btn text-xl bg-slate-900 px-4 py-2 rounded-3xl border hover:bg-orange-600 hover:text-stone-950">Add</button> <label class="inline-flex items-center cursor-default pointer-events-none"> <input type="checkbox" value="" class="slide-btn sr-only peer"> <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-500 rounded-full peer dark:bg-gray-700 peer-checked:bg-red-500 transition-colors duration-300 cursor-default pointer-events-none"></div> <div class="absolute w-5 h-5 bg-white rounded-full transform peer-checked:translate-x-full transition-transform duration-300 ml-1 mt-0.5 cursor-default pointer-events-none"></div> </label> </div> </div>
What went wrong?
- You correctly gave
flex-col
to the main container, butflex-col
alone only setsflex-direction: column
. - You forgot to add
flex
itself to the main container. - Because of that, the space between the top and bottom parts is not distributed properly.
How to fix it?
✅ Make sure the main container has both
flex
andflex-col
:<div class="flex flex-col ...">
✅ Also, ensure the bottom container (the one with the buttons) has
w-full
so it stretches properly:<div class="flex items-center justify-between w-full">
Awesome job once again! Just these tiny adjustments and your cards will look 🔥 perfectly aligned!
- You correctly gave