Advice generator app

Community feedback

• 

  Fazza Razaq Amiarso•2,340

  @fazzaamiarsoPosted over 1 year ago

  Hi @suhjiwon95! Great work!

  I have some quick tips for you

  • To improve user experience, you can fetch an initial advice so the UI doesn't feel empty. You can also insert an Empty State UI.
  • When naming in Javascript, especially Frontend, it's primary convention is to use camelCase. If I'm not mistaken, snake_case is Python's convention.

  const advice_id = data.slip.id; 
  
  const adviceId = data.slip.id; 👍
  

  • You can also do Object destructuring.

   const { advice } = data.slip;
  

  I hope it helps! Cheers!

  Marked as helpful

  0

  ---

  

  Jiwon Suh•210

  @suhjiwon95Posted over 1 year ago

  Thank you for your suggestion! @fazzaamiarso

  What exactly the object destructuring will do?

  0

  

  Fazza Razaq Amiarso•2,340

  @fazzaamiarsoPosted over 1 year ago

  @suhjiwon95 It's essentially extracting properties of an Object. It's also more efficient when you want to get multiple properties from an Object. You can also destructure an Array.

  // example object
  const person = { firstName : "John", lastName : "Smith", age : 23, country : "USA" } }
  
  // use destructuring
  const { firstName, lastName } = person;  ✅
  
  // 😮‍💨 can be tedious to re-assign
  const firstName = person.firstName;
  const lastName = person.firstName;
  

  A common use case is to extract a Component's Props in React. Here's a more comprehensive guide

  I hope it answers your question!

  Marked as helpful

  1

  

  Jiwon Suh•210

  @suhjiwon95Posted over 1 year ago

  Wow this is far more advanced JS for me at this point 🤣 But I will definitely check it out! @fazzaamiarso

  0
• 

  Jonathan•20

  @jchu51Posted over 1 year ago

  Hi @suhjiwon95,

  congrats on completing the challenge. 🎉

  few minor suggestions It's a best practice to call API endpoints using the async/await pattern with promises. To handle potential failures, always include try-catch blocks. For a better user experience, consider adding a loading status or a failure message. While data is being fetched, display a loading indicator or text in the box. If the fetch fails, a message such as 'Failed to generate, please retry' would be beneficial."

  It's advantageous to explore various frontend frameworks like React, Vue, and Angular. Additionally, if you're utilizing VSCode, consider installing 'prettier' for enhanced formatting.

  1

  ---

  

  Jiwon Suh•210

  @suhjiwon95Posted over 1 year ago

  Thank you for the suggestions. @jchu51

  It’s always those small details make things better. I’m still learning to catch up on those details and industry conventions!

  So I really appreciate those kind of suggestions.

  0