Skip to content
OverviewSolutions
12
Comments
12

Arash Asghari

@AriArash44220 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Arash Asghari•220
    @AriArash44

    Great job on the project! The UI is well-implemented and closely matches the design, and the code is clean and well-structured.

    One suggestion I have is to consider a more organized file structure within the src folder. For example, splitting page components and utility components into separate subfolders inside the components folder. This approach can significantly improve codebase maintainability, especially as the project scales.

    Overall, excellent work—keep it up!

  • Arash Asghari•220
    @AriArash44

    I checked out your project, and overall, it's really well-executed! The UI closely follows the original design, and the tip calculation works perfectly. Using Tailwind CSS, TypeScript, and React is a great choice for this kind of project—your tech stack is solid!

    A Few Suggestions for Improvement:

    • Restricting Alphabetical Input: To enhance usability, you might want to prevent users from entering non-numeric characters in the input fields. A simple regex like .replace(/[^0-9]/g, "") would help.
    • Custom Error Messages: If you don't like to restricting alphabetical inputs, Instead of the generic “Can't be zero” error message for all scenarios, consider providing more context-aware validation messages to improve the user experience.
    • Disabled Button Styling: You could use Tailwind’s disabled: modifier to change the reset button’s appearance when the user hasn’t filled the inputs yet. This would offer a clearer visual cue.
    • Tablet Screen Handling: I appreciate that you accounted for middle screen sizes, but the higher breakpoint seems a bit large for standard tablet dimensions. At those sizes, using the desktop UI might provide a better experience.

    Overall, great work! Keep it up.

    Cheers!

    Marked as helpful
  • P
    Shixu Luo•330
    @ShixuLuo
    What specific areas of your project would you like help with?

    Any advice is welcome!

    Time tracking dashboard

    #tailwind-css
    1
    Arash Asghari•220
    @AriArash44

    Your design is very similar to the original concept, and I love how you structured the UI—especially your handling of mid-range screen sizes. Overall, this is a fantastic implementation!

    For better project structure, I suggest using external scripts instead of writing JavaScript inside the HTML file. This follows the separation of concerns principle and improves maintainability.

    Additionally, applying cursor: pointer to hover states could enhance the website’s UX by making interactive elements more intuitive for users.

    Overally, Great work! 🚀

  • P
    Erik S. Carlsten•290
    @ecarlste
    What are you most proud of, and what would you do differently next time?

    I liked how easy it was to produce a linear gradient background using tailwind. Since I was only using it in one place I simply used classes provided along with custom color classes I defined.

    If I had to use the same gradient in multiple components I would make a custom class for the gradient in the @theme section.

    What challenges did you encounter, and how did you overcome them?

    For this particular challenge, I didn't run into anything I hadn't seen before and I didn't encounter any challenges while building the solution.

    What specific areas of your project would you like help with?

    I'd like feedback on my use of Semantic HTML more than anything.

    Responsive Newsletter Sign Up w/ NextJS/tailwind/zod/react-hook-form

    #next#react-hook-form#tailwind-css#typescript#zod
    1
    Arash Asghari•220
    @AriArash44

    Your project is really well done! I appreciate how you’ve incorporated metadata into the document, which enhances accessibility and SEO. The use of React Hook Form, Tailwind CSS, and other tools is a great choice—they contribute to a smooth development process and are promising for scalability.

    I also love how you've structured the project into different components, making it modular and easy to work with. Your approach to responsiveness, especially accommodating mid-range screen sizes, is impressive and ensures a seamless user experience across devices.

    One small suggestion for future improvements: structuring the project into directories like layouts or pages, and grouping the success page and signup page together, might make the structure more maintainable for larger-scale projects.

    Overall, fantastic job! 🚀 Keep up the great work.

    Marked as helpful
  • Arash Asghari•220
    @AriArash44

    Overall, this is a solid implementation! One suggestion for improving the active state handling is to utilize the MUI Tooltip component.

    The Tooltip component allows you to wrap a child element that toggles between active and inactive states seamlessly. Additionally, it accepts a title attribute, which can receive JSX to dynamically render inside the tooltip.

    This approach could improve both usability and visual clarity like the design files, making the interactive elements more intuitive.

  • Alperen Aksoy•150
    @aksoyalpi
    What are you most proud of, and what would you do differently next time?

    modular architecture thanks to react and scss

    What challenges did you encounter, and how did you overcome them?

    publishing the react website with github pages, but now i got it => you have to create custom workflow with github actions.

    Responsive CSS Grid with react and Sass

    #react#sass/scss
    1
    Arash Asghari•220
    @AriArash44

    The grid works well and is nicely responsive! One small UI/UX suggestion: the card colors don’t match the design closely, and low contrast might make text harder to read—especially for those with vision difficulties. Adjusting the contrast could improve readability.

View more comments