@halelite
What specific areas of your project would you like help with?
Any feedback would be appreciated.
Latest solutions
Advice generator FM
#tanstack-query#typescript#vite#reactSubmitted 4 months agoi have invalidated the query when clicking the button to generate a new advice, but whenever i clicked the button too fast, the returned result from the api always seems to be cached, therefore not changing the advice.
export const useApiQuery = ( queryKey: [string, unknown?], enabled: boolean, ) => { return useQuery({ queryKey, queryFn: async () => { const response = await fetchAdvice(); return response }, enabled, retry: 0, refetchOnWindowFocus: false, staleTime: 0, }); };tried setting the staletime to 0 but the cache still persist. the network tab show that the browser tries to refetch the api, but it doesn't invalidate the cache inside the disk-cache, so how do i invalidate the cache on demand regardless of what tools i'm using?
Product list challenge
#shadcn#tailwind-css#typescript#vite#framer-motionSubmitted 4 months agoi'm using vite as react-wrapper/compiler for most of my project, and when i'm previewing all of my static assets (prod) , all of them usually broken unless i put it in root public, why is this always be the case?
form challenge
#react#shadcn#typescript#vite#framer-motionSubmitted 4 months agoi think i should be creating my own toast instead of using library made toast like shadcn
multi step form challenge
#framer-motion#redux#tailwind-css#typescript#viteSubmitted 11 months agoany feedback is greatly appreciated
rock paper scissor challenge
#framer-motion#react#tailwind-css#vite#typescriptSubmitted 11 months agoi use a lot of values inside the useContext, which works, but i feel it made my context bloated. i can split the values into multiple context, but i fear that it will make my main.tsx into context wrapper hell, and i also try to avoid using over complicated state management like redux for this simple project. how can i simplify the context without sacrificing code readability?
Latest comments
- @azzykesuma
congratulations on finishing the project, well done!, maybe i can try giving some comments that may help you in the next project
- try mobile first approach when implementing fm challenge , meaning that instead of using
max-widthfor a baseline for responsive, try usingmin-width, that way you can structure your code better, as you have a mental image for various breakpoints like@media screen and (min-width: 768px)is designed for tablet screen and above, whereas below it, it targets the mobile screen. using tailwind will make this whole process easier ,as you just need to specify the base class and the breakpoints example<div className='flex flex-col md:flex-row'>...</div>will make your div has a flex col on mobile to tablet, and row on desktop. - i think you need to check this block of code
window.addEventListener('resize', () => { if(window.innerWidth <= 376) { setIsMobile(true); } else { setIsMobile(false); } }) }); useEffect(() => { if(isMobile) { if(menuActive) { ref.current.style.display = 'flex'; } else { ref.current.style.display = 'none'; } } else { ref.current.style.display = 'flex'; } }, [menuActive]);this code make it so that, when i first resize the screen to mobile size, it automatically open the navs. i think instead of dynamically display or hide the mobile navs, instead you can modify the button to open and close the mobile menu. that way, you don't have to check whether the menu is active or not.
keep on coding!
Marked as helpful - try mobile first approach when implementing fm challenge , meaning that instead of using
- @ally-glenday@azzykesuma
congratulations on completing the challenge! you can use localstorage to set the email for the purpose of this challenge https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage then, get the localstorage value, and inject it into DOM
but in the real job scenario, i think you need to store it in some sort of database
Marked as helpful - @davuboy@azzykesuma
congratulations on finishing the challenge! some friendly advice
- on mobile screen (360px) , the main and main-container class is overflowing, i believe it's caused by the fixed with of 450px you set on the main tag. I would recommend setting the lower width, or not setting the width at all at this screen size as it will overflow.
- you can scale down the image qr by adding some additional div to contain the width of the image and give padding to said div, or you can set the width manually.
- @slothXgod@azzykesuma
i don't think it's cheating nor it's a bad idea at all with the rise of tools that could help us code like chatgpt, github copilot, it's actually very hard not to try those tools in real life working scenario, as long as you could solve the issue you are facing in your code, and could satisfy the client requirements, that's is a job well done, regardless of what tools you are using
Marked as helpful - @zachtix@azzykesuma
congratulation on finishing the project! some friendly feedback for you
- if you want to make the card centered vertically and horizontally, setting flex to a body and justify-content and align-items center might be the way, although you need to be careful implementing this when you have multiple items inside the body and they will be all centered.
- the p tag is somewhat hard to see (having low contrast level), maybe you can change the color to other darker color so that it can be displayed nicely
overall, well done on completing the project!
Marked as helpful - @Pricbnll@azzykesuma
about flex and grid, it depends on the scenario. usually i use flex if the layout is rather simple and don't need tweaking about the exact width of each flex item, you can use that using flex basis but i didn't really like it. as for grid, you can use it on the components that require each grid item to have specific width, the exact example is header nav , where usually there is logo, nav links and icons.
Marked as helpful
