@TeleVenueBot – a Mini App that provides a demo flow for booking venue. User is presented with a venue listing where they can browse and see all venues, then book a venue by filling necessary information.
For a detailed step-by-step guide of the app development see TUTORIAL.md
- React - Documentation
- Vite - Documentation
- TailwindCSS - UI & CSS framework Documentation
- React Hook Form - Form state Documentation
- React Router - Url navigation Documentation
- Axios - Http requests Documentation
- NextUI - UI components Documentation
- Python 3.9 (3.8+ should work too)
- FastAPI - Async web framework Documentation
- Aiogram - Async Telegram Bot API framework Documentation
- Pydantic - Validation Library Documentation
- SQLAlchemy 2.0 - ORM Documentation
- Alembic - Alembic Documentation
- SQLite - Database
.
├── server/
│ ├── migrations # alembic migrations
│ ├── scripts # helper scripts
│ ├── src/
│ │ ├── api # api stuff
│ │ ├── bot # bot stuff
│ │ ├── models # db models
│ │ ├── schemas # data schemas
│ │ ├── utils # other
│ │ ├── app.py # main app file
│ │ └── config.py # app config
│ ├── alembic.ini
│ ├── requirements.txt
│ ├── main.py
│ └── ...
└── frontend/
├── public
├── src
│ ├── components # reusable components
│ ├── hooks # custom hooks
│ ├── pages # pages
│ ├── services # api services
│ ├── index.css
│ └── index.jsx
├── example.env
├── index.html
└── ...
- Clone project
git clone https://github.com/NickNaskida/TeleVenue.git - Navigate to project directory
cd TeleVenue
- Create a new bot using BotFather
- Type
/newbotand follow the instructions - Copy the bot token and save it somewhere. We will need it later
... Use this token to access the HTTP API: <your_bot_token> ...
Telegram mini app requires a public url (https) to work. We will use ngrok to expose our local server to the internet.
- Download & install ngrok from here
- Edit ngrok configuration file
sudo ngrok config edit - Copy and paste this configuration. Remember to specify your
auth token. You can get your auth token from dashboard hereversion: "2" authtoken: <your_auth_token> # change this to your auth token tunnels: front: addr: 3000 proto: http back: addr: 8000 proto: http - Save and exit the file:
Ctrl + X, thenY, thenEnter - Check configuration
ngrok config check - Start ngrok
ngrok start --all - Copy and save somewhere the forwarding url for
frontandback. We will need them later.
- Copy
example.envfile to.envinfrontenddirectorycd frontend cp example.env .env - Edit
.envfile and paste thebackurl from ngrok inVITE_BASE_API_URLvariableVITE_BASE_API_URL=<back_url> - Copy
example.envfile to.envinserverdirectorycd ../server cp example.env .env - Edit
.envfile and paste thefrontandbackurl from ngrok inFRONT_BASE_URLandBACK_BASE_URLvariables respectively. Also paste your bot token inBOT_TOKENvariable. Plus setSECRET_KEYto any random stringSECRET_KEY=<secret_key> # change this to random long string in production BOT_TOKEN=<your_bot_token> # change this to your bot token that you obtained from botfather FRONT_BASE_URL=https://*********.ngrok-free.app # change this to your front url from ngrok BACK_BASE_URL=https://*********.ngrok-free.app # change this to your back url from ngrok
- Navigate to
frontenddirectorycd frontend - Install dependencies
npm install - Start the application
npm run dev
- Navigate to
serverdirectory in separate terminalcd server - Create virtual environment
python3 -m venv venv - Activate virtual environment
source venv/bin/activate - Install dependencies
pip install -r requirements.txt - Run migrations
alembic upgrade head - Start the application
python main.py
- if you get missing modules error when running the app, make sure you have installed all dependencies in
frontendfoldernpm install
- Virtualenv issues
- Make sure you activate virtual environment before installing dependencies and running the app
- If you get
ModuleNotFoundErrorwhen running the app, make sure you are in virtual environment and you have installed all dependencies
- Python Version issues
- The project was developed with Python 3.10 but 3.8+ should work too
- Make sure you have python 3.8+ installed
- Also make sure you have installed everything from
requirements.txtfilepip install -r requirements.txt- These are base packages that I believe every FastAPI + Aiogram app will need.
- Migration conflicts and errors
- Sometimes your migrations may conflict with each other. To fix this, you can delete sqlite database file and versions folder. After that just run migrations again.
alembic revision --autogenerate -m "init" alembic upgrade head
- Sometimes your migrations may conflict with each other. To fix this, you can delete sqlite database file and versions folder. After that just run migrations again.
- Models aren't seen by alembic. No tables get created.
- In this case make sure you inherit from
PkBasemodel in your models. - Also if you define another base model, you should import it and any other model(s) in
migrations/env.pyfile
- In this case make sure you inherit from
Cross-Origin Resource Sharing (CORS) is a security feature implemented by web browsers to protect against unauthorized requests from different domains. When developing a web application, you might encounter CORS issues when your front-end code, hosted on one domain, tries to make requests to an API or server on a different domain. To enable these cross-domain requests safely, you need to configure CORS settings in your FastAPI app.
For instance, in this example app I already specified CORS settings in server/src/app.py file. CORS origins will auto include FRONT_BASE_URL.
# backend/src/app.py
def create_app():
# ...
app.add_middleware(
CORSMiddleware,
allow_origins=[settings.FRONT_BASE_URL], # Include your urls here to allow CORS issues
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"],
)
# ...- If you get
Unauthorizederror when trying to send messages to your bot, make sure you have specified the correct bot token in backend.envfile
- To enable inspect for web app, press settings icon 5 times and turn on
Debug Web App
This project is licensed under the MIT License - see the LICENSE file for details