/foodies-app

A foodies app that allows to view meals recipes, share meals, and be part of a foodies community.

Primary LanguageJavaScript

foodies-app 🍱

Developed by Grace Chen Abudi 👩🏽‍💻

📣 Overview:

🔎 Intro:

This is a Full-Stack application developed with NextJS, showcasing a foodies app that allows to view meals recipes, share them, and be part of a foodies community.

🧰 Tech Stack:

  • NextJS
  • ReactJS
  • JavaScript
  • SQL & SQLite3 Database
  • CSS Modules
  • Responsive Layout
  • Slugify
  • XSS Protection

🛠️ Techniques & Tools:

  • Custom Components

  • Dynamic Routes

  • Images Slideshow

  • Next Client Component Hook:

    • usePathname: Is a hook that lets you read the current URL's pathname.

  • React Router Dom Components:

    • NavLink: Is used for navigation between pages.

  • Loading

  • React Components:

    • Suspense: Is a built-in React component which lets us temporarily render a fallback UI while its children are still loading.

  • Handling Errors + Not Found Page

  • React Hooks:

    • useRef: Is a hook that lets you reference a value that's not needed for rendering.

    • useFormStatus: Is a hook that provides status information of the last form submission.

    • useFormState: Is a custom hook that allows you to subscribe to each form state, and isolate the re-render at the custom hook level.

      Note: It has its scope in terms of form state subscription, so it would not affect other useFormState and useForm. Using this hook can reduce the re-render impact on large and complex form applications.

  • Server Actions

  • Server Side Validation

  • revalidatePath: Allows you to purge cached data on-demand for a specific path.

  • Static & Dynamic Metadata

Note: Uploaded images could be stored in the cloud (AWS S3, Vercel Blob or somewhere else).

🔗 Additional Link:

If you want to strengthen your knowledge and skills of React, Redux, NextJS and more... along the Best Practices, Feel free to check this course on Udemy by Maximilian Schwarzmüller:

Visit the Course 👉🏽 HERE !

Shoutout to Maximilian Schwarzmüller for all of the lectures, the exercises, and the React course in Udemy. Mahalo, Thank you! 🌺