Ahmed-Abou-Emran / food-recipe-app-admin

Food Recipes React Application

Food Recipes is a web application that serves as a platform for managing and sharing food recipes. It features two portals: a user portal and an admin portal, each equipped with complete authentication functionalities, including registration, login, forget password, and change password.

Table of Contents

• Food Recipes React Application
  • Table of Contents
  • Demo
  • Introduction
  • Features
  • Usage
  • Technologies and Packages Used

Demo

Demo Link

Introduction

Foodie Recipes is a versatile food recipe application with user and admin portals. The user portal allows users to view recipes added by admins, add recipes to their favorites, and remove them. The admin portal, on the other hand, provides administrators with the capability to add, edit, and delete food categories and recipes. Admins can also manage system users, deleting non-admin users as needed.

Features

• User Portal:

  • View recipes added by admins.
  • Add recipes to favorites.
  • Remove recipes from favorites.

• Admin Portal:

  • Add, edit, and delete food categories.
  • Add, edit, and delete food recipes.
  • Delete system users (non-admin).

• Data Management:

  • Both admin and users can filter data in the pages.
  • Pagination is implemented for efficient navigation.

Usage

1. Upon logging in, users are directed to the user portal where they can explore and interact with recipes.
2. Users can add recipes to their favorites and remove them as desired.
3. Admins have access to the admin portal, allowing them to manage food categories, recipes, and system users.
4. Filtering data and pagination options are available for both portals to streamline information retrieval.

Technologies and Packages Used

• react-hook-form: A powerful form management library for React, used for handling registration, login, and other form functionalities.

• radix-ui: A library providing accessible components, enhancing the overall accessibility of the user interface.

• styled-components: A CSS-in-JS library used for styling React components, ensuring a consistent and visually appealing design.

• axios: A promise-based HTTP client for making API requests, vital for fetching and managing data in the application.

• react-hot-toast: A lightweight toast library for displaying notifications, contributing to a user-friendly experience.

• react-router-dom: A routing library for managing navigation within the application, supporting dynamic page transitions.

• React Context API and Custom Hooks:

  • Utilized for centralizing logic and state management.
  • Custom hooks are employed to efficiently share data and functionality across different components.