https://github.com/sayed725/bitebank-client
This is a user-friendly food sharing website where there is some CRUD (adding food,getting food, update food and deleting food) operations on several places. Besides that, users can also request for available food and manage requested foods.
https://github.com/sayed725/bitebank-client
expressjs firebase mongodb nodejs reactjs tailwind-css
Last synced: 3 months ago
JSON representation
This is a user-friendly food sharing website where there is some CRUD (adding food,getting food, update food and deleting food) operations on several places. Besides that, users can also request for available food and manage requested foods.
- Host: GitHub
- URL: https://github.com/sayed725/bitebank-client
- Owner: sayed725
- Created: 2025-01-08T09:25:30.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-12T11:56:02.000Z (over 1 year ago)
- Last Synced: 2025-04-12T22:56:57.678Z (about 1 year ago)
- Topics: expressjs, firebase, mongodb, nodejs, reactjs, tailwind-css
- Language: JavaScript
- Homepage: https://a-11-bite-bank.web.app/
- Size: 67.2 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Bite Bank
Welcome to this project.This is a user-friendly food sharing website where there is some CRUD (adding food,getting food, update food and deleting food) operations on several places. Besides that, users can also request for available food and manage requested foods.
---
### Live link to the deployed project
- live link: [https://a-11-bite-bank.firebaseapp.com/)
- Required PDF Link: [https://drive.google.com/file/d/1mVlCHLtUjccfoKTJd5Y-Qgbm9-n-anOp/view?usp=sharing)
### Top features of this website/project
- There is a beautiful slides showcasing images of some top foods on Banner.
- User Login / Register Authentication and jwt Security.
- User can add food from add food section .
- On clicking the View Details Button navigated the logged-in user to the Food Detail page where they can explore more about their Food Info.
- On Food Details section there is a Request button where user can request their food to prepare.
- On Manage my food section user can view food they added & they can edit, delete also.
- On My Request section user can view their requested food and some food details.
- Their is a search functionality on available food page where user can search for by foods title.
- Their is a sort and layout toggle button in available food section where user can sort and toggle layout also.
---
## Tech Stack
### Frontend:
- React.js with React Router
- Tailwind CSS
- React-hook-form
- React-select
- React-share
- Npm Date-fns
- Npm React-Icons.
- Npm Framer Motion.
- Npm Axios
- Npm Jwt & Cookie Parser
- Npm Tanstack Query
- Npm React Tostify
- Npm Dot Env
### Backend:
- Node.js with Express.js
- MongoDB
- JWT for authentication
### Deployment:
- Frontend: Firebase
- Backend: Vercel
---
## NPM Packages Used
1. **Frontend**:
- `react-router-dom`
- `@tanstack/react-query`
- `react-hook-form`
- `react-select`
- `react-share`
- `react charts`
- `react-icons`
- `react-hot-toast`
- `sweetAleart2`
- `react-stripejs`
- `react-helmet`
- `axios`
- `axios`
2. **Backend**:
- `express`
- `dotenv`
- `jsonwebtoken`
- `bcryptjs`
- `cors`
---
## 📷 Project Images Highlights
### 📷 Home Page `"/"` Image
### 📷 Post Details Page `"/food-Details"` Image
### 📷 ManageFood `"/managefood"` Image
### 📷 Available Food `"/availablefood"` Image
### 📷 User add food `"/add-food"` Image
---
## ⚙️ Installation & Setup
### Client Setup
1. Clone the repository:
```bash
git clone https://github.com/sayed725/BiteBank-Client.git
cd BiteBank-Client
```
2. Install dependencies:
```bash
npm install
```
3. Set up the environment variables in a `.env.local` file:
```env
VITE_apiKey=your_firebase_apiKey
VITE_authDomain=your_firebase_authDomain
VITE_projectId=your_firebase_projectId
VITE_storageBucket=your_firebase_storageBucket
VITE_messagingSenderId=your_firebase_messagingSenderId
VITE_appId=your_firebase_appId
VITE_API_URL=your_server_api_link
VITE_STRIPE_PUBLIC_KEY=your_stripe_Publishable_Key
```
4. Run the development server:
```bash
npm run dev
```
5. Open [http://localhost:5173/](http://localhost:5173/) in your browser.
### Server Setup
1. Clone the repository:
```bash
git clone https://github.com/sayed725/BiteBank-Server.git
cd BiteBank-Server
```
2. Install dependencies:
```bash
npm install
```
3. Set up the environment variables in a `.env` file:
```env
DB_USER=your_db_user_name
DB_PASS=your_db_user_password
JWT_SECRET=jwt_secret_code
STRIPE_SECRET_KEY=your_stripe_Secret _Key
```
4. Run the development server:
```bash
npm start
```
---