Skip to content
OverviewSolutions
23
Comments
8
Bryan Sanchez
@0-BSCode

All comments

  • Bryan Sanchez•590
    @0-BSCode

    Awesome work, Tyler! Your async await code looks good. For future projects, I would suggest getting into organizing your React project's file structure. You can read more about it here. Although for simple projects like this one it may not be needed, I think it's a good idea to get into the habit of organizing your files early on so that when you eventually get into large projects it's easier to structure them.

    Keep up the good work! Cheers🎉

    Marked as helpful
  • Bryan Sanchez•590
    @0-BSCode

    Awesome work! Besides the background color of the filter buttons (nothing a little CSS can't fix🤣), I don't find any noticeable difference between the design and your solution. With regards to your usage of useEffect, I don't see much wrong with it. I would recommend that you load in the data in App.js since that's where most of your components will be called. This way, if you need to send the data to multiple components, you can just get the data in App.js and then send it to your components through there.

    I would also suggest that you place your components in their own separate folders instead of saving them as files directly under the components directory. For example, for your Filter component, in the components directory, you can create a sub-directory called Filter and, within that directory, save your file as index.jsx. So, when you want to import it, you only need to specify up to the Filter directory because react will automatically use any index file in that directory as the component. You can read more about it here.

    Another thing I like about this approach is you can place any other file related to this component in the same directory. Going back to the example, in the Filter directory, you'll be able to have an index.jsx file for the component itself and a style.css file for the styling of the component. Of course, using this approach comes down to personal preference but I use this so that all the files I need regarding a specific component are all in one place. This would work really well if you plan to use CSS Modules down the line😃

    Keep it up! Cheers🎉

    Marked as helpful
  • Bryan Sanchez•590
    @0-BSCode

    Looks great! The dimensions of the card are a bit off but that can easily be solved by tweaking the dimensions. When it comes to naming conventions, I personally use the BEM CSS naming convention. It's a simple set of guidelines that help you with standardizing your class names so that they're organized. I've been using this for a ton of my own solutions and it's been a great help. Hopefully it helps you too!

    Cheers🎉

    Marked as helpful
  • Bryan Sanchez•590
    @0-BSCode

    Nice work! Love the breathing effect you placed on the title. Haven't really touched Tailwind but I think you may be able to use querySelectorAll to select your buttons by using the class names you provided them. This will return a list of all the buttons and you can use the id attribute to figure out which button to activate and which ones to reset. You can also read through this thread from Stack Overflow.

    When it comes to using Vanilla CSS, I'd recommend using the BEM CSS naming convention. I've used this a lot and I can say it really helps with simplifying and organizing your styles.

    Hope this helps👋 Cheers! 🎉

    Marked as helpful
  • Bryan Sanchez•590
    @0-BSCode

    Nice work! With regards to your query, I'd highly recommend reading up on CSS Trick's articles on grid and flexbox. I usually find myself going back to these sites whenever I find myself forgetting how to use them (which is a lot🤣).

    To get better at using them, I'd suggest doing more challenges that focus more on layout such as the Four Card Feature Section or the Testimonial Grid Section. These are really good for testing your layout skills.

    Looking at your code, a good practice I'd recommend you get into is using Bem CSS, which is a naming convention that helps organize your CSS. I use this personally in my challenges and it's a simple guideline that goes a long way!

    Keep it up! Cheers🎉

    Marked as helpful
  • Bryan Sanchez•590
    @0-BSCode

    Awesome work! With regards to your question, another way you could center the card in the page is giving your html element a display of grid and setting align-items: center`. Although, the method you mentioned is also something I use regularly. Cheers!

    Marked as helpful
  • Bryan Sanchez•590
    @0-BSCode

    Hi! Really great work😃 Regarding your first question, I'd suggest creating a separate directory for each of your components so that they're easier to organize. In this folder, you can create one directory for each component used in your project and you can place the code and styling for said component here. You can read more about it here. Cheers! 🎉

    Marked as helpful
  • Bryan Sanchez•590
    @0-BSCode

    Hi!

    Really amazing work with this one! I think your SASS is pretty organized. I'd recommend using something like the BEM CSS naming convention so that your classes are organized and easy to keep track off. BEM also builds really well off of SASS. You can read more about it here.

    Cheers!🎉

    Marked as helpful