Bitebook

salil-01
1

A delightful and innovative full-stack application that combines the power of Angular, Flask, and Tailwind CSS

#angular #angular-material #css3 #flask #html5 #jwt-authentication #ngx-spinner #ngx-toastr #python3

Description

Bite Book is a full-stack web application that allows users to explore various delicious food items, view their details, and place orders for their favorite dishes. The application is designed to provide a seamless and user-friendly experience for food enthusiasts to discover and order their desired meals.

This project was developed as a learning experience to explore new technology stacks, including Angular, Flask, and Tailwind CSS. As a beginner, I was not familiar with these technologies, but with the help of generative AI and the guidance provided, I was able to learn and implement them effectively within a short period of time.

Features

User Registration and Login: Users can create an account and log in to access personalized features.
Menu Exploration: Users can browse through a wide variety of dishes available in the menu.
Dish Details: Each dish in the menu has detailed information, including its name, price, and a brief description.
Place Orders: Authenticated users can place orders for their desired dishes.
Admin Dashboard: Admin users have access to an admin dashboard where they can manage the menu, view orders, and perform various administrative tasks.
Review and Ratings: Users can leave reviews and ratings for dishes they have ordered.

Technologies Used

Frontend: Angular, HTML, ES6, TypeScript
Backend: Flask (Python), Relational DB (MySQL)
Styling: Tailwind CSS, CSS, Angular Material
Authentication: JWT (JSON Web Tokens)

Deployment

The BiteBook App is deployed and accessible at https://bitebook.netlify.app/

Installation and Setup

Install Node.js and npm:
- Download and install Node.js from the official website: https://nodejs.org/en/download/
- npm (Node Package Manager) will be installed along with Node.js.

Clone the Bite Book App repository:

git clone https://github.com/salil-01/BiteBook
cd BiteBook

Set up the Flask backend:

Navigate to the BitebBook/server directory:
```
cd server
```

Create a virtual environment (optional but recommended):

python3 -m venv myenv
source myenv/bin/activate   # On Windows:
myenv\Scripts\activate      # On Linux / MacOS:

Install Flask and other dependencies:
```
pip install -r requirements.txt
```

Set up the database and initialize tables (assuming you have PostgreSQL installed):

createdb your_database_name
python manage.py db init
python manage.py db migrate
python manage.py db upgrade

Create a .env file in the backend directory and add any sensitive data, such as database credentials, API keys, etc.:

secretKey = your_secret_key
port = your_port
OPENAI_API_KEY = your_openai_api_key
user_name = your_username(mysql)
password = your_password(mysql)
host = your_host(mysql)
databasename = your_databasename(mysql)

Run the Flask development server:
```
python app.py
```
Set up the Angular frontend:
- Navigate to the BiteBook/client directory:
```
cd ../client
```
- Install Angular CLI (if not already installed):
```
npm install -g @angular/cli
```
- Install frontend dependencies:
```
npm install
```
- Update the backend URL in src/environments/environment.ts:
```
export const environment = {
  production: false,
  backendUrl: 'http://localhost:5000', // Update this URL with your Flask app's URL
};
```
- Save the file after making changes.
Run the Angular app:
```
npm run ng serve
```
- The app should now be accessible at http://localhost:4200.
Open your browser and navigate to http://localhost:4200 to see the Bite Book App in action.

Usage

Open your web browser and navigate to http://localhost:4200 to access the Book Bite App frontend after completing necessary installation or you can access it on web at https://bitebook.netlify.app/.
Register as a new user or log in using your existing credentials.
Explore the menu to view the available dishes and their details.
Place an order for your favorite dish.
If you are an admin user, log in to the admin dashboard to manage the menu and view orders.

Project Structure

.
├── client
│   └── src
│       └── app
│           ├── components
│           ├── services
│           ├── constants
│           ├── guards
│           ├── pages
│           └── routing
└── server
    ├── app.py
    └── requirements.txt