Skip to content
OverviewSolutions
0
Comments
10
htmlHxcker
@htmlHxcker

All comments

  • htmlHxckerβ€’70
    @htmlHxckerPosted about 3 years ago

    Hi, Awesome work on this challenge, I understand that it's a bit complex and so you did a lot with this so good job on that. I did notice a few bugs though, which while they don't break the functionality of the app could make the usability of the app a smoother experience. Here are the things I noticed.

    1. On Devices with a width less than 320px (Mobile S in Chrome DevTools) the blue background doesn't take up 100% of the screen and instead gets cut off towards the bottom, this also happens when results are displayed.
    2. Sometimes, if I double click on a covered tile, it automatically opens up the solution (To be honest I didn't want to tell you about this one just because it seemed like a fun way to hack the game LOL)
    3. Speaking of Tiles; If I clicked too fast I found that I could get 3 tiles to be opened all at once, inversely, sometimes if I click too fast it closes other tiles and opens just one tile(The last tile I clicked).
    4. You did a good job! Now I have to give a disclaimer, I didn't go through your code because I am also working on this challenge (I in fact had to use my mentor points to view your solution out of curiosity) and didn't want to cheat but from what I can see as an end-user, this is very polished and well done, the points above are things you could work on if you feel like since they don't necessarily break the solution, Hopefully, if I complete my solution then I can look through your code and maybe you could look through mine too, Cheers!.
    Marked as helpful
    3
  • Folarin Akinloyeβ€’1,240
    @folathecoderSubmitted about 3 years ago

    Hi Devs πŸ±β€πŸ‘“!

    This is a project I worked on to practice react and react routing. It was fun to build because I had the opportunity to experience how to build reusable and scalable web components like a professional despite the challenging design. It was a good learning experience!

    I am currently learning TypeScript and Next JS to build large-scale production-ready applications.

    Kindly go through my solution.

    I need help with the following: 1.) Accessibility 2.) Folder structure 3.) Check my styled components code 4.) Check the way I pass props 5.) Is my commenting technique OK? 6.) Test the contact form!

    Thanks so much! πŸ˜Žβ€πŸ‘Œ

    React, Styled Components, React Router, React Helmet, & FormSpree API

    2
    htmlHxckerβ€’70
    @htmlHxckerPosted about 3 years ago

    Hi Fola, really nice work here, In fact, I had to look very closely to find errors :), anyways here are the things I noticed:

    1. For the file structure: You have a global folder in the Components folder which houses Global components but then there's another folder that houses Global styles, don't you think it'll be better if the global style was in the same folder as the global components?
    2. Some pages take a lot of time to load their Images as much as 4 seconds which end up causing content shifts when the image loads, I think this is because you wait for data to be loaded, do you think you could load all the images once the page loads for the first time before the user starts navigating to other pages as this happens when I go to other pages e,g the about page, Perhaps you could use a preloader too.
    3. On the contact page, If I input a phone number in the international format i.e +1 (408) 735-7638 I get the error: "Phone should be a number!" This is kinda weird, upon inspecting I found that: I. You used a type attribute set to text instead of tel and, ii. You're using isNan to validate the numbers, I think you could fix this one by using RegExp as you did for email. Here's a function to that effect:
      let formatted = (' ' + phoneNumberString).replace(/\D/g, ' ');
  let match = formattedmatch(/^(1|)?(\d{3})(\d{3})(\d{4})$/);
  if (match) {
    let intlCode = (match[1] ? '+1 ' : '');
    return [intlCode, ' (', match[2], ') ', match[3], '-', match[4]].join(' ');
  }
  return null;
}

    Gotten from https://stackoverflow.com/questions/8358084/regular-expression-to-reformat-a-us-phone-number-in-javascript

    That's as many faults as I could find, I have to say the project is very polished and the code is very easy to read so props for that.

    Marked as helpful
    2
  • htmlHxckerβ€’70
    @htmlHxckerPosted about 3 years ago

    Hi Tamir, awesome work, I love the speed and how there's a loading progress bar above the page, that really makes it look very professional. Secondly, I think you really did well with the animations, they're subtle but lovely, I did notice one thing though: If the user is signed in and tries to check out from this URL https://audiophile-e.netlify.app/cart it seems the checkout button doesn't work, I don't know if this is peculiar to me as I didn't notice errors in the console and Network tab, also If I were to click Checkout from the Cart icon at the top menu, it works as expected, all in all, you did really well with this project.

    1
  • htmlHxckerβ€’70
    @htmlHxckerPosted about 3 years ago

    Awesome work on this, I didn't notice any obvious errors and it looks very nicely done, the CSS class naming is very professional and easy to understand. Talking about CSS, I think if you have the time you could remove the comments so the rendering engine of the browser doesn't have to go through it which could in turn boost performance and page speed, I also love how you wrote comments breaking the Styles into logical sections, all in all, you did extremely well.

    Marked as helpful
    1
  • htmlHxckerβ€’70
    @htmlHxckerPosted about 3 years ago

    Hello there! Nice work on this project, it's really awesome, one issue though is that if I open up the Rules Modal, I can't close it, (after going through your code, I discovered that there is no event listener for this, so maybe you could start from there) and I got stuck on that immediately I opened up the app, I love how you animate the elements and give it this soothing feel, you really did well on that

    1
  • htmlHxckerβ€’70
    @htmlHxckerPosted about 3 years ago

    First, I think you should go to the Index.html file in your public directory that comes with create-react-app and Change the title and Favicon, I also think Lazy loading would be very wonderful in this case and again it may be overkill but if you do decide to look into it, Here's a package that could help: https://www.npmjs.com/package/react-loading-skeleton.

    Regarding Fetch, I saw that you make multiple Fetch requests which in turn slows down the app a lot, what I think you could do is save the fetched data to state so that if I for instance click Afghanistan, and then click back, it doesn't have to re-fetch the app.

    Regarding Responsiveness, On Mobile, it looks a bit weird and there's a horizontal scroll that obscures the Dark mode toggle. All in all, you really did well with this and what I've pointed out are just the places I saw you needed imporvement.

    Marked as helpful
    0
  • htmlHxckerβ€’70
    @htmlHxckerPosted over 3 years ago

    Very clean and semantic code, nice job, the only thing I noticed is that on some mobile devices, the Header: "Join our Community" part cuts off, you could use this app https://responsively.app to preview it on different screen sizes.

    0
  • Fahad Khanβ€’180
    @fahadkhanpakistanSubmitted over 3 years ago

    This site is developed by ReactJS & had used several small libraries for enhancing the performance. But the theme toggle feature is not available due to my own laziness πŸ˜…. Please suggest me if needed. Thanks buddy! keep helping eachother.

    Responsive, React, CSS, Axios

    1
    htmlHxckerβ€’70
    @htmlHxckerPosted over 3 years ago

    I think the most noticeable design difference here is that: there are 5 nations per row which in turn makes the Flags look badly resized, if you could make it 4 per row that would be awesome, secondly, I think you have some errors rendering your list, seeing as you mentioned React, I'll assume you're mapping the data you get from the API, check out your list structure and then you should be all set, other than that Nice work!

    0
  • Zaidβ€’225
    @ZaidMarrieSubmitted over 3 years ago

    This challenge was fun to complete and I enjoyed it as I was required to create app illustration. I think I did well but I know that it can be better, so any suggestions and/or feedback is welcome.

    Chat App CSS Illustration using Flexbox

    2
    htmlHxckerβ€’70
    @htmlHxckerPosted over 3 years ago

    I understand that you added chat functionality but on mobile it doesn't seem to work, secondly it seems like you used input with "type" set to "search" instead of "text", changing this would help a lot.

    Marked as helpful
    1
  • htmlHxckerβ€’70
    @htmlHxckerPosted about 4 years ago

    Nice

    0