Share and Savor - A Food Sharing Platform

Welcome to Share and Savor, a comprehensive platform dedicated to sharing food among people. Our aim is to create a community where individuals can connect and share their culinary creations with others.

Live Preview

You can visit our live site at Share and Savor.

Backend Repo

• Share and Savor Backend Repository.

Installation

To run the website locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/zahidtdx61/Share-and-Savor-Frontend.git

2. Navigate to the project directory:

   cd Share-and-Savor-Frontend

3. Install dependencies:

   npm install

4. Make an .env file and add these credentials:

   VITE_apiKey=<get_this_from_firebase>
   VITE_authDomain=<get_this_from_firebase>
   VITE_projectId=<get_this_from_firebase>
   VITE_storageBucket=<get_this_from_firebase>
   VITE_messagingSenderId=<get_this_from_firebase>
   VITE_appId=<get_this_from_firebase>
   VITE_API_URL=<add_you_backend_api_address>

5. Start the development server:

   npm run dev

Features

1. User Registration and Authentication

• Users can securely sign up using their email address or quickly sign in using their Google or GitHub accounts through Firebase integration.
• Authentication is managed and verified by our backend services to ensure secure access to user-specific functionalities.

2. Food Sharing

• Signed-in users have the ability to share their food creations with the community.
• Users can upload images, provide descriptions, and specify dietary preferences or restrictions for their shared dishes.
• Other users can browse and explore the shared food items, leave comments, and interact with the community.

3. See Available Food

• Users can browse and search for available food items shared by other users.
• They can view details such as images, descriptions, and dietary preferences or restrictions.
• This feature helps users find and connect with others who are willing to share their food.

4. Update or Delete Own Shared Food

• Signed-in users can update or delete their own shared food items.
• This allows users to make changes to their shared dishes or remove them if necessary.

5. Request Food

• Users can request specific food items from other users.
• They can send a request to the owner of the food item, expressing their interest in receiving it.
• This feature facilitates communication and coordination between users for food sharing.

Technologies Used

Frontend

• React: Frontend development framework for building user interfaces.
• React Router: For declarative routing within the React application.
• React DOM: Enables rendering of React components in the DOM.
• @mui/joy: MUI's Joy component library.
• Firebase: Backend-as-a-Service platform for hosting and managing application data and authentication.
• Axios: HTTP client for making API requests.
• Tankstack Query: Library for managing state and data fetching in React applications.

NPM Packages Used

• @mui/joy: MUI's Joy component library.
• react-router-dom: Library for declarative routing within the React application.
• react-hook-form: Library for building forms in React with easy form validation.
• @tanstack/react-query: Library for managing state and data fetching in React applications.
• axios: HTTP client for making API requests.
• swiper: Modern touch slider library for building interactive carousels and sliders.
• react-datepicker: Customizable date picker component for React.
• useAsyncEffect: Custom hook for handling asynchronous effects in React components.
• lottie-react: Used for rendering Lottie animations in React components.
• react-icons: Library for popular icon packs as React components.
• react-helmet-async: Library for managing document head contents in React applications.
• react-hot-toast: Toast notifications library for React applications.
• react-tooltip: Library for creating tooltips in React components.
• prop-types: Runtime type checking for React props and similar objects.
• eslint: Pluggable JavaScript linter.
• tailwindcss: Utility-first CSS framework.
• postcss: Tool for transforming CSS with JavaScript.
• autoprefixer: PostCSS plugin to parse CSS and add vendor prefixes.
• vite: Next generation frontend tooling.

Contribution

We welcome contributions from the community to enhance and improve Share and Savor.