@Shukhratov3082Submitted 2 months ago
P
Adam Haniff
@AdamHaniffAll comments
- @AdamHaniffPosted 2 months ago
• In the mobile site, consider putting the desserts and the cart inside of a flex container and having the container direction be a column. This will make the cart be underneath the desserts and not side by side.
• Consider giving the desserts a max-width property so that when the page expands there is only three columns for the desserts and not more. You can set this up using CSS grid as well.
0 - @jvssvjSubmitted 2 months agoWhat are you most proud of, and what would you do differently next time?
If you had to do something different, I would probably spend more time planning and implementing cart data storage, such as using localStorage or another solution to persist the data between user sessions. 💭
@AdamHaniffPosted 2 months ago• When the modal is displayed, the position of it should be fixed and centered in the screen so that when the user scrolls, the modal remains in the center.
• Maybe consider making the modal disappear when the user clicks on the overlay so the user is able to edit their order.
Marked as helpful0 - @DDOL-dolSubmitted 2 months ago@AdamHaniffPosted 2 months ago
• To make your site more interactive for the user, maybe change the cursor to a pointer when the 'add to cart' button is hovered. You can do the same for the increment and decrement buttons as well. You can do this for the remove items button as well.
• When the 'confirm order' button is hovered, maybe consider not changing the button's background color to white because the background is already white. You can do this for the 'start new order' button too.
• Maybe consider allowing the user to click on the overlay so that the modal disappears and allow the user to edit their order. If the user wanted to just increase the quantity of one item in their order, they would have to start all over again.
• If the user adds all 9 items to their cart, the cart is not scrollable. It stays in place so the user never gets to confirm the order.
Marked as helpful0 - @robcrockSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I'm proud of pushing through the production grade build of this form with shadcn/ui and react-hook-form. There were plenty of opportunities to take short cuts, but I'm glad I stuck with it and made a high quality build.
What challenges did you encounter, and how did you overcome them?I thought this was going to be an easier form to build than it turned out to be. Because there was not submit button I need to use the watch method, which I hadn't done before. I need to customize the errors and also coerce the types with zod.
What specific areas of your project would you like help with?If anyone has feedback on better ways to leverage react-hook-form with zod and shadcn/ui I am all for it.
@AdamHaniffPosted 3 months ago• I know the inputs take in numbers, but you should set the input type to text to get rid of the up and down arrows.
• I'm not sure why you put default values for the bill, tip %, and number of people. When a site first loads, the app should look like it has never been touched by a user before.
• Also, maybe try to add in some logic where if the user has already selected a tip % and they click that same percentage again, it gets deselected.
0 - @Hackerbot24Submitted 3 months agoWhat are you most proud of, and what would you do differently next time?
Completing this task and making it more advance by doing this: Input validation with error messages. Animations for smoother transitions between states. Localization support for different currencies and number formats. A dark mode toggle for enhanced user preference options.
What challenges did you encounter, and how did you overcome them?Nothing much but the problems I encounter I keep trying to get it done
What specific areas of your project would you like help with?I am open to learning
@AdamHaniffPosted 3 months ago• The tip percentages in the bottom row look taller than the tip percentages in the top row. Maybe you can fix this for a more consistent look.
• I know the inputs take in numbers, but you should set the input type to text to get rid of the up and down arrows.
• I like that you added in a currency converter. Maybe when changing currencies the dollar sign should change to that currency when calculating the tip and total.
• Also, in the dark mode some of the text is hard to see so maybe consider changing the font color of these text.
Marked as helpful0 - @Shakil-aSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
Most proud:
- starting to refactor my logic to be mor reusable, follow dry principles and be readable
what i would do differently:
- figure out multiple ways in terms of the logic and then find the best solution from that to follow
challeneges i faced:
- Refactoring the solution into smaller funtions and how i overcame this is having the mindset of test driven development and making the functions and logic easier to test.
areas i would like help in:
- how to make my project more responsive
- possibly there was a better solution for this project
- any bad practises and standards i need to take out
@AdamHaniffPosted 3 months ago• I think your logic for determining the total/person is a little off.
• You should also try and center the icons in the bill and number of people inputs in the center.
• You can maybe try adding hover states to make your app more interactive.
0
