@frbarbreSubmitted over 1 year ago
I'm beginning to getting a real hang of Zustand, this time I decided to try using it with Typescript, which IMO has a pretty confusing syntax. However I managed, and learned alot!
P
dk
@jenna1kAll comments
- @jenna1kPosted about 1 month ago
Great job on the project with Zustand and Typescript! It looks good but just to enhance the overall balance, consider putting hover effect on cards and fixing size difference on sidebar when search result appears.
0 - @Abuu998Submitted 2 months agoWhat specific areas of your project would you like help with?
i would like to hear your feedback on the app
@jenna1kPosted 2 months agoGreat work! all the features are implemented effectively and well-structured.
One small thing, I recommend managing icons in the assets folder instead of embedding raw SVG files directly in the JSX or SVG components for consistency.
By managing icons in a dedicated assets folder and exporting them from an index.js, you maintain a consistent structure across your project. This makes it easier to import icons and ensures that all icons are easily accessible and organized.
Marked as helpful1 - @aouintihouariSubmitted 2 months ago@jenna1kPosted 2 months ago
Great job! I think for more flexible layout that adapts well across different screen sizes, better items stretch to fill container without relying on fixed widths.
0 - @amjadsh97Submitted 4 months agoWhat are you most proud of, and what would you do differently next time?
I learned how to manage complex application state effectively using useReducer and the React Context API. and I plan to develop a more complex application to further hone my skills.
@jenna1kPosted 2 months agogreat job!
I manually tested the game and found it doesn't reset scores when restart button clicked
0 - @Princy-patelSubmitted 8 months agoWhat specific areas of your project would you like help with?
This project helped me improve my skills in API integration and React Router.
@jenna1kPosted 2 months agogood job!
some sugggestions:
- Handling Fewer Search Results When the search results are fewer than expected, the layout can sometimes break or appear unbalanced, especially if the CSS is not designed to handle such cases. To mitigate this: Flexbox or Grid Layouts: Use CSS Flexbox or Grid to create a more adaptable layout. These layout models allow for better control over item alignment and spacing, which can help maintain a cohesive look even with fewer items. Minimum Height: Set a minimum height for the container holding the search results. This prevents the layout from collapsing when there are fewer items.
- for image sizes, consider using rem or px units. This will make your layout more responsive and less dependent on the viewport height.
- User Experience When Clicking Outside Open Select Options When a select dropdown is open and the user clicks outside of it, it can cause confusion and a poor user experience in certain situations
1 - @rocioizqSubmitted 2 months agoWhat are you most proud of, and what would you do differently next time?
I am very proud of everything I am learning and implementing, I really liked this project.
What challenges did you encounter, and how did you overcome them?I found the formulas for the calculations to be a challenge
What specific areas of your project would you like help with?any feedbacks is welcome
- @sksksk2024Submitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I'm so proud that now I've successfully deployed It in minutes, not hours. Next time I'll definetly do the CSS and the whole React coding process!!!🔥🔥
@jenna1kPosted 2 months agogreat job overall! ensure that error messages are cleared or updated appropriately when the user changes their input. This enhances the user experience by providing immediate feedback and preventing confusion caused by lingering error messages.
Marked as helpful1 - @MuhammadSamiAhmadSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
Using the API Context for the first time for state management
What challenges did you encounter, and how did you overcome them?Importing the images from the data.json file, I created an images.js file to export the images in a form suitable for the react components to render it, with it's different screen sizes.
@jenna1kPosted 2 months agoI think it is good ux when user click outside of modal the orders remains
for improvement,
- fixed image size on grid
- mobile responsive
- and it would be good to reset state when 'start new order' button clicked
overall, good structure and good implement.
great job!
0 - @AnaCarol2001Submitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I'm most proud of the CSS-only animation of this project. But, for next time, I would like to use a CSS framework and an animation library.
I'm also glad I discovered how to use the Context Hook to guarantee the correct heading levels and a reusable heading component through the React learn docs and an article from up your a11y.
What challenges did you encounter, and how did you overcome them?The sequence animation was the biggest challenge of this project. To overcome it, I used the CSS variables and the calc function on the animation-delay property to make the sequence work.
What specific areas of your project would you like help with?Any tip about how to better structure a React project? Besides that, I would appreciate any feedback.
@jenna1kPosted 3 months agoclean implementation and impressive animation!
Using index.js files in the components and assets folders has a few benefits:
- Cleaner imports: You can import components and assets directly from the folder name instead of specifying the index.js file. For example: import Button from '@components/Button'; instead of import Button from '@components/Button/Button';.
- Easier refactoring: If you need to rename a component or asset, you only need to update the index.js file instead of changing the import statements throughout your codebase.
- Consistent naming: Using index.js maintains a consistent naming convention across your project.
- Encapsulation: The index.js file can be used to export only the necessary components or assets from the folder, providing a layer of encapsulation.
Marked as helpful1
