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
Log in with GitHub
OverviewSolutions30Comments49

All comments

  • P
    Curtis• 860

    @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.

    Responsive memory game using React/Material UI/TypeScript

    #material-ui#typescript#react

    1

    Chukwudobe Micah Chinedu• 700

    @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

    audiophile solution built with Next + Typescript

    #next#react#typescript#framer-motion

    8

    Chukwudobe Micah Chinedu• 700

    @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• 860

    @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.

    Connect Four game using React, TypeScript, and MUI

    #material-ui#react#typescript#animation

    4

    Chukwudobe Micah Chinedu• 700

    @chukwudobe-Micah

    Posted

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

    Marked as helpful

    1
  • Chukwudobe Micah Chinedu• 700

    @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%.

    Responsive Webpage

    1

    Chukwudobe Micah Chinedu• 700

    @chukwudobe-Micah

    Posted

    Nice work but never use var. Use const instead.

    Marked as helpful

    0
  • Chukwudobe Micah Chinedu• 700

    @chukwudobe-Micah

    Posted

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

    0
  • Ezequiel Córdova Sotomayor• 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.

    Huddle landing page with curved ❤

    #accessibility#bem#sass/scss#animation

    3

    Chukwudobe Micah Chinedu• 700

    @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 Chinedu• 700

    @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.

    E-commerce sneakers shop | Updated version

    #accessibility#react#typescript#tailwind-css

    2

    Chukwudobe Micah Chinedu• 700

    @chukwudobe-Micah

    Posted

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

    0
  • Nemanja Dragun• 340

    @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 :)

    Rock, paper, scissors game with BONUS task made with Nuxt 3 + Tailwind

    #nuxt#sass/scss#tailwind-css#typescript#animation

    2

    Chukwudobe Micah Chinedu• 700

    @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 Chinedu• 700

    @chukwudobe-Micah

    Posted

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

    1
  • Tryt4n• 940

    @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.

    E-commerce page with SwiperJS

    #bem#sass/scss#accessibility

    1

    Chukwudobe Micah Chinedu• 700

    @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
  • Gab• 150

    @gp0710

    Submitted

    I'm struggling with rendering the layout for the desktop site. I've left the cards in once single row for now. Any tips for getting the middle 2 cards to stack on top of each other?

    Four Card Feature Challenge

    1

    Chukwudobe Micah Chinedu• 700

    @chukwudobe-Micah

    Posted

    CSS grid is more suited for this than flex box.

    Marked as helpful

    0
  • Nemanja Dragun• 340

    @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 :)

    Rock, paper, scissors game with BONUS task made with Nuxt 3 + Tailwind

    #nuxt#sass/scss#tailwind-css#typescript#animation

    2

    Chukwudobe Micah Chinedu• 700

    @chukwudobe-Micah

    Posted

    Maybe make it 3 points for the bonus round?😩 I bearly reached 2 after playing several times.

    0
  • Chukwudobe Micah Chinedu• 700

    @chukwudobe-Micah

    Posted

    Change your @media (max-width: 375px) to @media (max-width: 700px) so the mobile styles will be available on most phones, not just 375px phones.

    1
  • Samuel Braun• 60

    @web-dev-sam

    Submitted

    Took me 8 hours to do the animations 🥴 but was worth it in the end. The code is basically a mess since this is the first time working with Nuxt.

    Any feedback is much appreciated 😋

    Animated Planets Fact Site built with NuxtJS

    #animation#nuxt#tailwind-css

    3

    Chukwudobe Micah Chinedu• 700

    @chukwudobe-Micah

    Posted

    Sorry if I'm asking too much questions, this is my first month practicing what I've learnt in js and I really love animations, so I'm a little curious.

    0
  • Samuel Braun• 60

    @web-dev-sam

    Submitted

    Took me 8 hours to do the animations 🥴 but was worth it in the end. The code is basically a mess since this is the first time working with Nuxt.

    Any feedback is much appreciated 😋

    Animated Planets Fact Site built with NuxtJS

    #animation#nuxt#tailwind-css

    3

    Chukwudobe Micah Chinedu• 700

    @chukwudobe-Micah

    Posted

    I just learnt something new the requestAninationFrame (). I will definitely be using this. I understand 80% how the planet animation works. But I must say that I don't really understand how you achieved the background animation. I'm not a premium FEM member but I'm 60% sure FEM provided a picture as a background in the assets of this project. So you created your own circles? That much circles!!??? I searched for the <circle> tag I've seen that it's an SVG element but how do you make those svgs which you created through Js your body background? I tried checking your code but I couldn't for some reasons, if you created a repo for this project on GitHub I'll appreciate if you can share the link, GitHub is a little more accessible.

    0
  • Samuel Braun• 60

    @web-dev-sam

    Submitted

    Took me 8 hours to do the animations 🥴 but was worth it in the end. The code is basically a mess since this is the first time working with Nuxt.

    Any feedback is much appreciated 😋

    Animated Planets Fact Site built with NuxtJS

    #animation#nuxt#tailwind-css

    3

    Chukwudobe Micah Chinedu• 700

    @chukwudobe-Micah

    Posted

    You said you did the animations yourself, please how!!???? This is awesome. Really nice work.👏🏽

    1
  • Chukwudobe Micah Chinedu• 700

    @chukwudobe-Micah

    Posted

    Just how did you do this?😱 This Is too good, love your solution.❤️

    0
  • m• 140

    @mhz-777

    Submitted

    Mobile first design Rock Paper Scissors game made using React.js and Typescript.

    First time using typescript so there was a little bit of a learning curve to it but for the most part it's starting to make more sense.

    Anyways check it out!

    Rock Paper Scissors using React.JS and Typescript

    #react#typescript#vite

    1

    Chukwudobe Micah Chinedu• 700

    @chukwudobe-Micah

    Posted

    I must say that I love you your solution.👏🏽❤️

    1
  • Chukwudobe Micah Chinedu• 700

    @chukwudobe-Micah

    Posted

    I don't see people on this platform use intersection observer, I was planning on using it when I start major Js challenges. I'm happy to see someone finally used it, really nice work here!👏🏽👏🏽❤️

    1
  • Daniel• 140

    @dannz0

    Submitted

    I definitely feel like my HTML/CSS ended up messy, kinda tried to get to the JS part quicker than usual.

    1. What should be the H1 on a product page like this? The company itself or the product title?

    I am very keen to hear some inputs on the JavaScript part! Looking forward to any input, help or improvements I can make! Thank you mentors!

    Ecommerce page | First 'bigger' project all on my own

    1

    Chukwudobe Micah Chinedu• 700

    @chukwudobe-Micah

    Posted

    Nice work but write media queries for mobile to complete the work.

    0
  • Chukwudobe Micah Chinedu• 700

    @chukwudobe-Micah

    Posted

    Wow, I must say. This is so nice, your ux is so nice. The update, post and everything works so well. Really nice work.👏🏽 I might have to ask you a couple questions when it's my time to do this.😅

    1
  • Eduard Ionescu• 510

    @EduardIonescu

    Submitted

    Hi, this challenge was pretty tough.

    • The first page loads quite slowly, so maybe it could be better to only show 50 countries and have a Load more button at the bottom.
    • The data has a lot of information that I don't use, so maybe just grabbing only what I need would've been somewhat better.

    Other than that, I'm happy with how the app works. getStaticProps and getStaticPaths make the individual country pages load fast, but I've had some issues in development when I tried to use getStaticProps in the homepage.

    Rest Countries API using NextJS

    #accessibility#fetch#next#react#tailwind-css

    2