Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • P
    Curtis 930

    @webguy83

    Submitted

    Did everything I could to get it closely resembling the Figma mockups. There was heavy use of Material UI components and theming all throughout the app. I opted not to use the React context API for state management and instead just dealt with some prop drilling. I was sort of 50/50 on it but reading the React docs they recommend all alternatives and using it as a last case scenario when things get very complex. This helps with needless renders and better performance overall. For the icons I loaded a bunch of random ones in from the MUI Icon library. Definitely I recommend people use TypeScript when working with MUI and React. Helps a ton when developing!

    Hope to hear all the feedback and recommendations.

    @chukwudobe-Micah

    Posted

    This is another very nice game, only thing I'll say is missing is highscore functionality. Maybe store highscore in local storage so user can only keep track of their progress for a nicer user experience. Regardless, this is beautiful!

    Marked as helpful

    0
  • Yazdun 1,310

    @Yazdun

    Submitted

    Hey everyone ! This is my first Guru challenge and It's a little bit different from the original design, For example I completely changed the desktop hero section and I created a sidebar for the cart, which was supposed to be a modal.

    I also decided to use more reddish color as the primary color, The original orange color didn't look alive enough to me 😁

    I'm open to feedbacks and let me know of your thoughts about this solution. Thanks in advance

    @chukwudobe-Micah

    Posted

    I noticed you use blurred photos a lot, so when they're viewed you change to the original photo which helps performance. How do you get the blurred photos?

    1
  • P
    Curtis 930

    @webguy83

    Submitted

    This was definitely the challenge that gave me the toughest test so far and I tried to get this close to near perfect as possible according to the Figma diagrams. I implemented all the bonus features that were required including a CPU that I have a ranking system used to determine where it should place the chip. To do the sliding animation I used MUI (Material UI) library and the Slide component which takes care of all the dirty work for animation. No need for CSS keyframes thank god so I highly recommend working with a UI library to save much time! Much of the work involved animating the SVG graphics and it was one of my first experiences working with SVG. The huge advantage of this was not having to worry about responsiveness as it scaled perfectly.

    Not sure how I would do this without TypeScript. It was a big time savior for me and so important when working with React.

    The main challenging part for this app is to build the CPU AI and have it reasonably smart. I came up with a ranking system to determine which of the 7 columns to place it's chip. There are many approaches to this but I found one that worked for me. I put a link in my GitHub readme on a good algorithm online as a starting point in which I implemented a much more advanced approach to his version.

    The CPU I think I made moderately challenging. I wasn't able to win often against my own AI as I always lost more than I won but then again I just suck at the game :D. Hope you do better than I do and good luck!

    If any improvements to the CPU are to be made please let me know.

    @chukwudobe-Micah

    Posted

    This is so nice, I've lost to computer so many times.

    Marked as helpful

    1
  • @chukwudobe-Micah

    Posted

    Nice game, love the UI. Just beautiful. But cpu isn't playing to win, it's just playing at random.

    2
  • lepamoore 170

    @lepamoore

    Submitted

    Hey, obviously it isn't the cleanest code. But it's my first page on which I can confidentially say it's full responsive as I see it. If you see any bugs or if you have any tips or hints for me, please comment. Thank you !!!

    Edit: You get the best user experience when you have your browser zoom on 100%.

    @chukwudobe-Micah

    Posted

    Nice work but never use var. Use const instead.

    Marked as helpful

    0
  • @chukwudobe-Micah

    Posted

    Man, I have to ask. How did you do that hamburger animation? Is there a library for it?

    0
  • ezecoder 870

    @3eze3

    Submitted

    Hello everyone, I had a problem with the fonts, well anyway I think I got a good result, and if you have any comments to improve my accessibility and my css code, I would be very grateful.

    @chukwudobe-Micah

    Posted

    Nice solution, you should try making your curved SVG take as much width as it's related section is taking, and also remove the space beneath it.

    0
  • @chukwudobe-Micah

    Posted

    I'm guessing you didn't deploy the right folder.

    1
  • Jo89 😈 380

    @AhmadYousif89

    Submitted

    Hi There 👋

    This is my second upload for this challenge, I just added new features to the application and I thought it might be a good idea to post these updates to hear your thoughts and listen to your valuable feedback 🤗.

    update summary

    • added the product's favorite logic (the ability to like and add a sneaker to the favorite list)
    • the ability to search inside the favorite list by the product name.
    • added the order list logic and the order page to preview the order details after checkout.
    • added the logic to track the user viewing history per product (for now it's just the main product so only one product can be added to the history).
    • some minor styling changes.
    • the app state is persisted over sessions locally.

    that's all for now, please feel free to leave any feedback or suggestions that you might find helpful to the app, Thanks.

    @chukwudobe-Micah

    Posted

    Man, I must say your design is really good.👏🏾

    0
  • @ndragun92

    Submitted

    It was sort of a challenge to integrate the bonus tasks with not extending the main code that much. Also responsive was quite a challenge considering that I tried to avoid code duplication.

    It is always good to get any recommendations or feedback/suggestions on how others would approach things

    I have integrated my custom idea for the bonus task. This means that the bonus task automatically applies as soon as you reach 5 points in the game.

    I did not test it on iPhone devices yet

    Also since I am not that good with animations I tried my best :)

    @chukwudobe-Micah

    Posted

    Hello, can you please share with me how you changed your Audio to files which you can use in vscode? I'm trying to do that but not really getting it.

    0
  • @chukwudobe-Micah

    Posted

    Hey Cheosphere, it's been a while you've been here. Hope you're good?

    1
  • Tryt4n 960

    @Tryt4n

    Submitted

    Carousel and lightbox build with SwiperJS. Smooth swiping images by clicking, swiping, arrows buttons, arrows keys, touching. Possibility of zooming image in lightbox or mobile version of page. In image carousel are used data-hash thanks to which the order of viewing photos is saved in the history. Shopping cart is updating in every time when the product is added. Accessibility by attributes: aria, role, tabindex, disabled, etc.

    Any feedback apprecaite.

    @chukwudobe-Micah

    Posted

    Hey, nice solution. I tried using swiper Js on my solution too but I couldn't use it properly so I just had to drop it and had to code the swiper myself. Can you please share the tutorial link you used to learn how to use it?not you used a tutorial to learn it. You can check my solution on my page if you'd like. Thanks in advance!

    0