@ZenitsuAg
Latest solutions
Interactive card details form
#react#tailwind-css#viteSubmitted about 1 month agoAll sorts of suggestions will be appreciated.
Conference Ticket Generator
#react#tailwind-css#viteSubmitted about 1 month agoThe image of vertical lines at top.
I tried, it's not applying, I didn't even understand completely how I applied other ones.
Please try to look into this.
Tip Calculator
#react#tailwind-css#viteSubmitted about 2 months agoPlease take 5 minutes, and give my code read, and suggests.
Mortgage Calculator component
#react#tailwind-css#viteSubmitted about 2 months agoAny other way do thing instead of converting actual formulas into js.
Add commas after every 3 digits in inputs.
any kind of suggestion is appreciated.
Product cart list component
#react#tailwind-css#vite#typescriptSubmitted about 2 months agolook at the code, one function in App component, it was doing everything, its also updating the counter,
if you look at my functions to update the counter, they look a little different,
its gemini's code, its saying that when you click of increase button, it tell the App (hey, app update the quantity by 1), believe me gemini says exactly like that, and (i'm like what the ...??) tell me how it works, and it keeps saying that it does work like that,
i think it become some kind of automatic function which works under the hood, can anyone explain me how it works or where i can find my answers.
Result summary component
#react#tailwind-css#viteSubmitted 2 months agotell me, when we install tailwind using vite by the process on their website, then why do we need to install other things like config.js files.
why does the tailwind states half the process, if it won't applies styles after deployment.
i need to disable my anti-virus, delete node and reinstall it putting various commands in windows powershell, vscode and git terminals, still it won't run npx command to create config.js files. the gemini also bashing its virtual head to a virtual wall.
Latest comments
- @Utkarsh9571
Awesome!!!!!!!
- @amikoelvisWhat are you most proud of, and what would you do differently next time?
Proud Of: Comma Formatting: Nailed input formatting with Intl.NumberFormat for commas (e.g., 1,000,000), keeping raw numbers in Zustand.
const formatDisplayValue = (value: number, allowDecimals: boolean = false) => { if (value === 0) return ''; return allowDecimals ? value.toString() : numberFormatter.format(value); };Do Differently:
- Real-Time Validation: Add instant feedback on input changes, not just on submit.
Challenges and Solutions:
- Comma-Formatted Inputs: Challenge: Displaying commas (e.g., 1,000,000) while storing raw numbers required syncing UI and state.
Solution: Used Intl.NumberFormat for display, parsed inputs with replace(/,/g, '') for the store.
What specific areas of your project would you like help with?const handleNumberChange = (e, setter) => { const rawValue = e.target.value.replace(/,/g, ''); setter(Number(rawValue) || 0); };I’d appreciate community feedback on Real-Time Validation: How can I efficiently implement instant input validation (e.g., check amount > 0 as users type) without performance issues?
const handleNumberChange = (e, setter, field) => { const rawValue = e.target.value.replace(/,/g, ''); const numValue = Number(rawValue) || 0; setter(numValue); setErrors((prev) => ({ ...prev, [field]: numValue <= 0 })); };Responsive mortgage repayment calculator with React and typescript
#react#tailwind-css#typescript#vite#zustand@Utkarsh9571it's awesome brother, I don't know anything about what you are asking, but it looks fine to me, can you look at calculator too and give suggestion.
- @beasta07What challenges did you encounter, and how did you overcome them?
Used Context for the first time , So used chat gpt to add the syntax and some logic which i didn't know (Any other approaches i could have taken that would have been better for my progression?) , i know what the machine did and will try to not use it for similar tasks next time
What specific areas of your project would you like help with?I would love to know if how i wrote the components or the codes could be better optimized , strucuture anything? I am taking any recomendatiosn or suggestions
@Utkarsh9571bhai, i don't know much, i started learning few months back, but i want to point out that,
-
did you forget to update the name and logo of website, in index.html, you can see (vite) written on the website and its logo.
-
also, when i clicked on start new order, it didn't clear the cart, it updated the counter and add to cart button, but the product was still in the cart.
that's it, can you check my project too, it's the latest one and give suggestions.
-
- @amikoelvisWhat are you most proud of, and what would you do differently next time?
I'm most proud of successfully building a fully responsive and accessible results summary component using React and Tailwind CSS. I implemented data fetching, dynamic styling, ARIA roles for accessibility, and improved keyboard navigation.
Next time, I’d plan the asset structure more carefully to avoid path-related deployment issues and test the deployment environment earlier in the process.
What challenges did you encounter, and how did you overcome them?One of the main challenges was loading local JSON data and asset images correctly in a Vite + React setup. Initially, the icons failed to load because they were referenced via relative paths in the JSON file, which doesn't work as expected in Vite. I overcame this by moving the icons to the
publicdirectory and updating the JSON file to use public URLs instead, ensuring they loaded correctly at runtime.Another challenge was ensuring accessibility and responsiveness. I addressed this by incorporating semantic HTML, ARIA roles, keyboard focus styles, and responsive layout utilities from Tailwind CSS.
What specific areas of your project would you like help with?I would like help with the following areas of my project:
-
Optimizing Accessibility Further: While I added ARIA roles and improved semantic structure, I'd appreciate a review to ensure it's fully accessible for screen readers and keyboard users.
-
Improving Asset Handling: I want to better understand best practices for managing and referencing images or other static assets when working with local JSON and Vite.
-
Performance Optimization: Suggestions for making the app more efficient—especially when scaling or preparing for deployment—would be helpful.
-
Design and UI Feedback: I'd love feedback on how to make the UI more intuitive, engaging, and visually polished across all screen sizes.
@Utkarsh9571it's very wide than the design, maybe narrow it down, everything looks fine to me.
-
- @BunchydoWhat are you most proud of, and what would you do differently next time?
I'm proud of how I structured the layout using containers to align elements side-by-side, just like the Moon image on the left and the text content on the right. It made the layout feel clean, organized, and scalable. Using a parent container as a flex container and wrapping the image and content in their own divs made the styling process much easier.
If I were to do it differently next time, I’d plan my containers and class naming more clearly from the start. Early on, I ran into issues because I was styling individual elements without wrapping them properly in containers, which caused alignment issues later on.
What challenges did you encounter, and how did you overcome them?The biggest challenge was aligning content side-by-side while keeping it responsive across devices. Initially, I tried positioning items directly instead of using containers, which broke the layout at smaller screen sizes.
I overcame this by:
Creating a parent flex container to control the horizontal layout.
Wrapping the image and text content in their own containers.
Using media queries to stack the layout on smaller screens.
Using flex-direction: column-reverse at one point, then switching to better container ordering using order in flexbox.
What specific areas of your project would you like help with?How to best handle responsive layout shifts — especially when switching from row to column without breaking alignment or causing spacing issues.
Suggestions for better class naming conventions and structure — especially for complex nested containers.
Any tips for making images scale naturally inside flex containers without overflowing or becoming distorted.
How to manage layout logic cleanly in CSS vs. JavaScript — I sometimes used JS to switch layouts based on screen size. Should that be avoided?
@Utkarsh9571i don't know man how to answer any of your queries, they're making me make a comment on your solution, you know how they do it, keep up the work.
Marked as helpful - @Enisco29What are you most proud of, and what would you do differently next time?
...
What challenges did you encounter, and how did you overcome them?...
What specific areas of your project would you like help with?...
@Utkarsh9571awesome man
