Artofe

Quick Overview

Artofe — yours way into coffee! Authentic Coffee Arabica

The Telegram bot with a discount system built for the better user experience in a cafe.

Tech Stack

Front-end: React + Vite, Redux, SASS & SCSS, Tailwind CSS, shadcn/ui, Telegram Web Apps.
Back-end: Express.js, MySQL.

Dependencies

• Install Git on your machine to clone the Github repository.
• Install Node.js on your machine to build and run the application locally.

Clone Repository

Create a new directory where you want to deploy the application, then clone the Github repository into it:

git clone https://github.com/artndev/artofe-bot.git .

Navigate to the project directory:

cd root

Change the working branch from master (production branch) to dev-public (public development branch) due to the specialties of the production and development environments:

git checkout dev-public

Configure Environmental Variables

Open the .env.local file located in the /client directory and fill in the required environmental variables:

# Your Stripe credentials can be found at:
# https://dashboard.stripe.com/test/dashboard
# https://dashboard.stripe.com/test/settings/user
VITE_STRIPE_PUBLISHABLE_KEY=...
VITE_STRIPE_ACCOUNT_ID=...

Open the .env.local file located in the /server directory and fill in the required environmental variables:

# Table schemas can be found in server\src\schemas folder
# They are needed to create the same environment as mine

# Your bot token can be obtained via @BotFather:
# https://t.me/BotFather
BOT_TOKEN=...

# Your Stripe credentials can be found at:
# https://dashboard.stripe.com/test/dashboard
STRIPE_SECRET=...

# UUIDv4 secrets used for access to secured destinations
JWT_SECRET=...

PORT=8000

# Your DB credentials
MYSQL_HOST=...
MYSQL_PORT=...
MYSQL_USER=...
MYSQL_PASSWORD=...
MYSQL_DBNAME=...

Useful Links

• UUIDv4 generator

Configure Ngrok

Authorize in the ngrok dashboard to fetch your authorization token in order to create a reverse proxy for running the application locally.

Open the ngrok.yaml file located in the /server directory and fill in the required data:

version: '3'
agent:
  authtoken: <your-authtoken>

Fetch a free domain from the ngrok dashboard to make the server running on it.

Open the package.json file located in the /server directory and fill in the required data:

"scripts": {
  "remote": "ngrok http --url=<your-domain> 8000 --config ngrok.yaml"
},

Push front-end to a web hosting platform, such as Vercel, Netlify or Heroku, to keep it up-to-date with any back-end changes.

Open the config.json file located in the /server/src directory and fill in the required data:

{
  "CLIENT_URL": "<your-front-end-domain>",
  "SERVER_URL": "<your-back-end-domain>"
}

Open the config.json file located in the /client/src directory and fill in the required data:

{
  "SERVER_URL": "<your-back-end-domain>"
}

Run Application with Node.js

Return to the root directory:

cd ../../

Use the command below to run the application with Node.js:

npm run start

Access Application

Once the application is ready, it will be available at https://t.me/your-bot-username.