https://github.com/rza-o/share-a-meal-fullstack-client
Welcome to the Share-a-Meal! This project focuses on connecting donors and recipients to reduce food waste and share meals
https://github.com/rza-o/share-a-meal-fullstack-client
express firebase javascript mongodb react tailwindcss
Last synced: 3 months ago
JSON representation
Welcome to the Share-a-Meal! This project focuses on connecting donors and recipients to reduce food waste and share meals
- Host: GitHub
- URL: https://github.com/rza-o/share-a-meal-fullstack-client
- Owner: Rza-O
- Created: 2024-12-30T15:12:45.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-11T20:06:19.000Z (over 1 year ago)
- Last Synced: 2025-02-11T20:42:24.766Z (over 1 year ago)
- Topics: express, firebase, javascript, mongodb, react, tailwindcss
- Language: JavaScript
- Homepage: https://share-aa-meal.web.app/
- Size: 4.53 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Share-a-Meal
Welcome to the **Share-a-Meal** frontend repository! This project focuses on connecting donors and recipients to reduce food waste and share meals with those in need. Built with a robust tech stack, this project ensures smooth user experiences, dynamic interactions, and powerful functionality.
---
## 🌐 Live Demo
Explore the live application here: [Share-A-Meal](https://share-aa-meal.web.app)
---
## 📋 Purpose
The **Share-a-Meal** app aims to:
- Minimize food wastage by enabling donors to share surplus food.
- Simplify the process of connecting donors with recipients.
- Foster a community-driven effort to feed the less fortunate.
---
## 🔑 Key Features
- **Authentication:** Secure login and registration using Firebase.
- **Food Listings:** Add, view, and manage available food items.
- **Search and Sort:** Search functionality with sorting options for ease of use.
- **Request Management:** Make and cancel requests for meals.
- **Responsive Design:** Fully optimized for all devices.
- **Smooth Animations:** Added seamless animations using Framer Motion.
---
## 🌐🔙 Server Repository
Explore the live application here: [Share-A-Meal-Server](https://github.com/Rza-O/share-a-meal-fullstack-server)
---
## 🛠️ Tech Stack
### Core Technologies
- **React:** For building reusable UI components and managing the app's state.
- **React Router DOM:** For seamless navigation and routing.
- **Firebase:** For authentication and deployment.
- **Axios:** For API requests with `withCredentials` enabled.
- **Tailwind CSS:** For modern, responsive, and utility-first styling.
- **Framer Motion:** For smooth animations.
- **TanStack React Query:** For efficient server-state management.
### Additional Utilities
- **React Hook Form:** For handling forms efficiently.
- **Lottie React:** For adding engaging animations.
- **Date-FNS:** For date manipulation and formatting.
- **Clsx:** For conditional class names.
- **Tailwind Merge:** For merging Tailwind classes intelligently.
- **Lucide React:** For using modern, customizable icons.
- **React Hot Toast:** For notifications.
- **React Loader Spinner:** For loading indicators.
- **Match Sorter:** For intuitive search results.
- **Sort-By:** For sorting data.
- **LocalForage:** For client-side storage.
### Dependencies
- **react** "^18.3.1"
- **react-dom** "^18.3.1"
- **firebase** "^11.1.0"
- **react-router-dom** "^7.1.0"
- **tailwind-merge** "^2.6.0"
- **framer-motion** "^11.15.0"
- **axios** "^1.7.9"
- **motion** "^11.15.0"
- **tailwindcss-animate** "^1.0.7
- **@radix-ui/react-slot** "^1.1.1"
- **@tanstack/react-query** "^5.62.8"
- **class-variance-authority** "^0.7.1"
- **clsx** "^2.1.1"
- **date-fns** "^4.1.0"
- **localforage** "^1.10.0"
- **lottie-react** "^2.4.0"
- **lucide-react** "^0.469.0"
- **match-sorter** "^8.0.0"
- **react-datepicker** "^7.5.0"
- **react-helmet** "^6.1.0"
- **react-hook-form** "^7.54.2"
- **react-hot-toast** "^2.4.1"
- **react-icons** "^5.4.0"
- **react-loader-spinner** "^6.1.6"
- **sort-by** "^1.2.0"
### Dev Dependencies
- **@eslint/js** "^9.17.0
- **@types/react** "^18.3.17
- **@types/react-dom** "^18.3.5
- **@vitejs/plugin-react** "^4.3.4
- **autoprefixer** "^10.4.20
- **daisyui** "^4.12.22
- **eslint** "^9.17.0
- **eslint-plugin-react** "^7.37.2
- **eslint-plugin-react-hooks** "^5.0.0
- **eslint-plugin-react-refresh** "^0.4.16
- **globals** "^15.13.0
- **postcss** "^8.4.49
- **tailwindcss** "^3.4.17
- **vite** "^6.0.
---
## 🚀 Installation & Setup
Follow these steps to set up the project locally:
1. Clone the repository:
```bash
git clone https://github.com/your-username/share-a-meal-frontend.git
```
2. Navigate to the project directory:
```bash
cd share-a-meal-frontend
```
3. Install dependencies:
```bash
npm install
```
4. Create a `.env` file and configure it with your Firebase credentials.
5. Start the development server:
```bash
npm run dev
```
6. Open [http://localhost:5173](http://localhost:5173) to view the app.
---
## 🙌 Acknowledgements
Special thanks to the Programming-Hero and all the instructors who always been there for our development journey!
## Contact
For questions or feedback, please reach out at [shahreza.dev@gmail.com](mailto:shahreza.dev@gmail.com).