Rock, Paper, Scissors game using NextJs ,Tailwindcss

Community feedback

• 

  Jack Weru Kioni•240

  @JawekiPosted 12 months ago

  Hey, I should say I like your solution. I also have some recommendations:

  1 Next.js vs. React App (Vite): Since the app is a single-page application and doesn't require backend logic or APIs, using React App (Vite) would be more efficient and performant compared to Next.js. Next.js adds additional complexity and bundle size for server-side rendering, which isn't necessary for this particular app.

  2 For the layout, in the main try to make all the content to fit in one screen. For example in the parent most element use h-[100vh], then let all other elements emulate from that measurement.

  3 I would recommend you use a simpler method to store the users score, such as local-storage. In the briefing section of the project, they say the users score should be available even when they refresh the page. also, you can use redux. Moreover, browser cookies might do the job, only that you have to decide to keep like a no-expiry time on the cookie, and let your code update the cookie, after a score.

  4 Your Component reloads after a user confirms to play again. So I would recommend using a simpler structure such as state management at the parent component like of stepone and steptwo, that decides which component is being displayed, then pass the setDispalyed prop, to the stepone and steptwo, for updating when a user click. Then the use conditional rendering to determine which component to render:

  function App () {
  const [displayed, setDisplayed] = useState(1);
  /* other code */
  return (
  <main>
  {displayed === 1 && <Stepone setDisplayed={setDisplayed} /> }
  {displayed === 2 && <Steptwo setDisplayed={setDisplayed} /> }
  </main>
  )}
  

  Hey great work anyways. I will share my solution when am done. I probably will use local-storage to save my score, since it has faster data process time than redux and cookies, whose data process involves serializing data before save or read. Also local storage will maintain my score even across browser reloads.

  // example of local storage:
  
  localStorage.setItem('score', 0);
  function updateScore(newScore) {
    localStorage.setItem('score', newScore);
    // Update the score display on the page
  }
  

  Marked as helpful

  1

  ---

  

  speedsterz•280

  @speedsterzPosted 12 months ago

  @Jaweki Thank you, I learned some good points from your words. The reason I used NextJs was because of the practice of using Nextjs, although this project was not suitable for learning this framework. Thank you for taking the time to check my code, since I am learning things by myself, there may be many tools and methods, The ones I use are not the right method, so the tips you say are useful for me

  0