The problem Rasoi Saathi solves

Reduces food waste for individuals and businesses.
Supports local communities by connecting surplus food to shelters.
Improves food management through expiry tracking and meal suggestions.
Contributes to environmental sustainability by lowering carbon footprint.
Raises awareness and educates users on sustainable food practices.

Challenges we ran into

1. Date or Time Mismatches

• Problem:

  new Date()

  or

  Date.now()

  causes mismatches between server and client render.
• Solution: Fetch date on the server and pass it as a prop.

2. Dynamic or Random Values

   • Problem:

     Math.random()

     or dynamic values change between server and client render.
   • Solution: Use

     useEffect

     for client-side dynamic values to avoid initial mismatch.

3. Client-Specific Logic (

   window

   or

   document

   )
   • Problem: Using browser-specific code (

     window

     ,

     localStorage

     ) in SSR.
   • Solution: Move logic inside

     useEffect

     to ensure it runs only on the client.

4. External Dynamic Data

   • Problem: Data fetched on the client differs from server-side render.
   • Solution: Fetch data in

     getServerSideProps

     or

     getStaticProps

     to ensure consistency.

5. Invalid HTML Nesting

   • Problem: Improper HTML structure causes mismatches.
   • Solution: Ensure valid and consistent HTML structure across server and client renders.

6. Browser Extensions

   • Problem: Extensions alter HTML before React loads.
   • Solution: Test in an incognito window or disable extensions.