Skip to content
OverviewSolutions
13
Comments
13
Arash Asghari
@AriArash44

All comments

  • Arash Asghari•230
    @AriArash44

    Great job on the design and accessibility — the interface feels clean, intuitive, and well-considered.
    As a suggestion for future improvements, you might consider refactoring your code into reusable components or modules. It'll boost maintainability and make scaling the project much smoother down the line. Keep up the awesome work!

  • Arash Asghari•230
    @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•230
    @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•230
    @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•230
    @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•230
    @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•230
    @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.

  • Arash Asghari•230
    @AriArash44

    Your code structure is clean, making it easy to understand and maintain. The UI closely matches the design, which is a great achievement.

    Good job! Keep up the great work!

  • Stefano Lezzi•350
    @Steno-95
    What challenges did you encounter, and how did you overcome them?

    I found it to be easier to code at the start with a mobile first approach but found it harder to work with when fitting it to the desktop size, probably because i usually do the desktop first approach, i suppose more practice will solve it.

    Responsive Product Page Card Component using React and Tailwindcss

    #react#tailwind-css
    1
    Arash Asghari•230
    @AriArash44

    Great job! The designs and codes are coming along well. There’s room for refinement, specially in UI, but in overall that’s great

  • Arash Asghari•230
    @AriArash44

    Your project is well-structured and overall well-executed. It maintains clarity and organization, making it easy to follow.

    There are some slight differences in details compared to the original design, but they don’t significantly impact the overall quality.

    One area for improvement would be using semantic HTML tags for better accessibility. This would enhance usability for screen readers and improve the overall accessibility of the project.

  • Arash Asghari•230
    @AriArash44

    Great job on your project! You've done an excellent job using semantic HTML, which enhances accessibility and structure, and your design closely matches the original, which shows great attention to detail.

    One small suggestion for improvement: the main element could be vertically centered to create a more balanced layout. You can achieve this with pure CSS by using:

    display: flex;
justify-content: center;
align-items: center;
height: 100vh;
  • Arash Asghari•230
    @AriArash44

    Good job! It’s almost like the design, but it needs to be vertically centered. You can use CSS Grid or Flexbox with some properties to achieve that.

  • Arash Asghari•230
    @AriArash44

    In my opinion, the project is almost well-structured, and the live site looks 100% accurate compared to the design. great job on that!

    I think the structure could be improved by grouping all style files into a separate folder, or alternatively, organizing components into separate folders alongside their corresponding stylesheets (in this case, having Card.jsx and Card.scss in the same folder).

    For accessibility, adding an <h1> element or wrapping the main content in a <main> tag could enhance the document structure.

    One small thing I noticed: the live site URL in the README.md seems to be invalid, so you might have forgotten to update it with the actual deployed link.

    Overall, amazing work!

    Marked as helpful