build-resturant-telegram-mini-app-with-stitch-ai-studio

Build a Restaurant Telegram Mini App with Google Stitch and Google AI Studio

AI-assisted development becomes much easier to understand when we use it
to build a real application.

In this tutorial, we will create a Restaurant Telegram Mini App
using Google Stitch, Google AI Studio, GitHub, Visual Studio Code,
deployment tools, and Telegram.

Rather than generating everything with one enormous prompt, we will
build the application incrementally and test every important stage.

Our final goal is a restaurant application that customers can open
online or directly inside Telegram.

The application will eventually allow customers to:

• view the restaurant
• browse the menu
• search for dishes
• view dish details and prices
• reserve a table
• enter their contact information
• receive a reservation confirmation
• use the application on desktop and mobile
• open the application inside Telegram

This article assumes that you have already read Google AI App
Development Fundamentals — Stitch, AI Studio, GitHub & Deployment,
where we introduced the technologies used in this project.

1. What Are We Going to Build?

Our project will be called:

Restaurant Telegram Mini App

For development purposes, we can initially use the restaurant name:

Test Restaurant

The name can easily be changed later for a real customer.

The project will progress through several stages:

Google Stitch

↓

UI/UX Design

↓

Google AI Studio

↓

Functional Web Application

↓

GitHub

↓

Visual Studio Code

↓

Testing and Improvements

↓

Deployment

↓

Public HTTPS URL

↓

Telegram Bot

↓

Telegram Mini App

The important point is that we are not simply asking AI to create a
website.

We are following a complete application-development workflow.

2. Project Requirements

Before opening an AI development tool, we should define what we want to
build.

This prevents the AI from making too many assumptions.

Main Application Sections

Our first version should contain:

• Home
• About
• Menu
• Dish Details
• Reservation
• Contact

Later versions can include additional functionality.

Menu Features

The menu should eventually support:

• starters
• main courses
• desserts
• drinks
• food images
• dish descriptions
• prices
• menu search
• dish detail view

Reservation Features

The reservation form should eventually contain:

• customer name
• email
• phone number
• number of guests
• date
• available time
• special requests
• reservation confirmation

Language

The application should eventually support:

• English
• Swedish

We will initially design the application in English and add multilingual
functionality later.

3. Why Mobile-First Design Is Important

This project will eventually run as a Telegram Mini App.

Many customers will therefore use it from a smartphone.

For that reason, our design should be mobile-first.

That means we should prioritize:

• readable text
• large buttons
• touch-friendly controls
• simple navigation
• fast interaction
• responsive images
• uncluttered screens

The application should still look professional on desktop computers, but
the mobile experience has priority.

4. Step 1 — Open Google Stitch

Open a modern web browser such as Google Chrome or Microsoft Edge and go
to:

Google Stitch: Go to
https://stitch.withgoogle.com/ and
click Try Stitch in the upper-right corner (in the first time). Sign
in with your Google account if requested; you will then enter the Stitch
workspace, at the upper-right you have two choices:

• + Start with your design — start from an existing
  design/image.
• + Blank project — create a new empty project.

For our Restaurant Telegram Mini App, click + Blank project. and in
the uper left you see New project with edit button click to it and give
the project name, for me i give the name:
restaurant-telegram-mini-app

After creating the Restaurant Telegram Mini App project, Stitch
opens the design workspace. “What would you like to change or
create?”, in the next step you will use to generate the first design.

5. Step 2 — Create the First Restaurant Design

We will begin with one structured prompt.

Do not ask Stitch to create the database, email system, Telegram
integration, and every other feature yet.

At this stage, our objective is design.

Copy the following prompt into Google Stitch prompt field labeled (
“What would you like to change or create?”), paste the following
prompt, and then click the ↑ arrow on the right to generate the
first design.

Google Stitch Prompt — Version 1

Create a modern, elegant, mobile-first restaurant web application.

Restaurant name: Test Restaurant.

The application should be designed primarily for smartphones and
should also work beautifully as a future Telegram Mini App.

Create the following sections:

Home:

• Elegant restaurant hero section
• Restaurant name
• Short welcome message
• Book a Table button
• View Menu button

About:

• Short restaurant introduction
• Elegant food or restaurant imagery
• Brief description of the restaurant experience

Menu:

• Categories for Starters, Main Courses, Desserts and Drinks
• Food cards containing image, dish name, short description and
  price
• Search interface
• Selecting a dish should provide access to more detailed
  information

Reservation:

• Customer name
• Phone number
• Email
• Number of guests
• Date
• Reservation time
• Special requests
• Reserve Table button

Contact:

• Address
• Telephone
• Email
• Opening hours
• Map placeholder

Language:

• Prepare the interface so that English and Swedish can be
  supported.

Design requirements:

• Premium Scandinavian restaurant style
• Modern and elegant
• Mobile-first responsive design
• Large touch-friendly buttons
• Clear typography
• High-quality food imagery
• Simple navigation
• Suitable for use inside a Telegram Mini App
• Avoid overcrowding the interface
• The desktop version should also look professional and responsive.

Wait design process is finished, when it finished Stitch shows in the
left side what have been created and in the right side shows design.

6. What Should Happen After the Prompt?

Stitch should now interpret our requirements and create an initial
restaurant interface.

Do not immediately accept everything that AI generates.

Examine the result carefully.

Look at:

• header
• navigation
• hero section
• typography
• colors
• menu presentation
• food cards
• reservation form
• contact section
• mobile layout

Ask yourself:

Would I be comfortable showing this design to a restaurant customer?

If the answer is no, we improve it before continuing.

This is one of the most important principles in AI-assisted development:

Generate → Review → Improve → Test

not:

Generate → Accept Everything

7. Step 3 — Refine the Stitch Design

We should make improvements using smaller prompts.

For example:

Make the restaurant design feel more premium and elegant. Reduce
unnecessary visual elements and use more whitespace.

Another prompt could be:

Improve the mobile navigation. Make all important controls easy to use
with one hand on a smartphone.

Another:

Make the menu cards more visually appealing. Use larger food images
and make the dish name and price immediately visible.

And another:

Improve the reservation form for mobile users. Use large input
controls and clear labels.

Notice that these prompts are focused.

We are not regenerating the entire application every time.

8. Step 4 — Test the Design Before Moving On

Before leaving Stitch, check the major screens.

Home

Does the visitor immediately understand that this is a restaurant?

Are View Menu and Book a Table easy to find?

Menu

Are food items easy to browse?

Are prices visible?

Reservation

Can a smartphone user comfortably complete the form?

Contact

Can the visitor quickly find:

• address
• phone
• opening hours

Mobile Experience

Does everything fit comfortably on a narrow screen?

If something does not look right, correct it in Stitch before moving to
application development.

9. Development Checkpoint 1

At this point we should stop and record what Stitch actually created.

For this tutorial, we will document:

• the final Stitch prompt
• screenshots of the generated design
• changes we requested
• problems we encountered
• the final accepted UI

This gives us our first project milestone:

Version 1 — Restaurant UI Design

We should not continue until this version looks good.

10. Step 5 — Export the Stitch Design to Google AI Studio

Once you are satisfied with the restaurant design in Google Stitch, the
next stage is to turn the visual design into a working application.

In the Stitch project workspace, look at the upper-right corner. You
should see controls including:

• Preview/Run
• Export
• Share

For this project, we want to continue development in Google AI
Studio.

Select the Restaurant Screens

Click Export.

If no screens are currently selected, Stitch displays:

No screens selected

Select the screens that you want to use in the application.

Because we want to continue with the complete restaurant project, we can
select all the screens by pressing:

Ctrl + A

After selecting the screens, the Export panel displays the available
export formats.

Depending on the current version of Stitch, you may see options such as:

• AI Studio
• Figma
• MCP
• Netlify
• Lovable
• Bolt
• .zip
• Code to Clipboard
• Project Brief

Some options may be marked Preview, and the available choices may
change as Google continues developing Stitch.

Export to AI Studio

Select:

AI Studio

Stitch explains that AI Studio will open and that the required HTML and
image files will be transferred/downloaded in the background. If many
screens are selected, this process may take a minute or two.

Now click:

Build with AI Studio

This is an important step. We are not creating another restaurant
application from scratch. Instead, we are handing the screens and
assets from our existing Stitch project to Google AI Studio.

Our development workflow is now:

Google Stitch → Export to AI Studio → Build Application → Test &
Improve → GitHub → VS Code → Deployment → Telegram Mini App

11. Step 6 — Build the Exported Stitch Design in Google AI Studio

After clicking Build with AI Studio in Google Stitch, Google AI
Studio opens automatically.

If Google asks you to sign in, use your Google account.

AI Studio opens its application-building environment and prepares a new
build request based on the screens and assets that we exported from
Stitch.

Check the Exported Stitch Files

Before starting the build, look at the files attached to the AI Studio
request.

You should see several files representing parts of the Stitch project,
such as:

• PNG images
• JPEG images
• SVG assets
• HTML files
• Other design-related files

These files are important because they give AI Studio visual and
structural information about the application we designed in Stitch.

AI Studio also automatically prepares an initial instruction similar to:

Build me an app with screens that look like this. You can hotlink
images from the html

This confirms that AI Studio is using the exported Stitch screens as
references for generating the application.

Do Not Create Another New App

You may notice + New app under the BUILD section in the AI
Studio menu.

Do not use + New app for this project at this stage.

We already started the application in Google Stitch and exported its
screens directly to AI Studio.

Creating another app separately and entering another restaurant prompt
would start a separate AI Studio project instead of continuing from the
design that we already created in Stitch.

Our workflow is:

Stitch Design → Export to AI Studio → Build → Test → Improve

Start the Initial Build

Check that the exported Stitch files are visible in the AI Studio build
request.

At this point, do not remove the automatically attached files or replace
the initial instruction.

Click the Build button.

AI Studio will now analyze the exported Stitch screens and assets and
begin generating the application.

Wait for the Build to Finish

During the build process, you may see AI Studio creating and modifying
many source-code files.

For example, AI Studio may generate:

• .html — HTML files used by the web application
• .css — application styling and visual presentation
• .ts — TypeScript files containing data, types, utilities, and
  application logic
• .tsx — React components written using TypeScript and JSX
• .json — application configuration and metadata

Do not worry if you did not create these files yourself.

This is one of the important differences between Stitch and AI
Studio.

Stitch helped us create the visual design and user experience.

AI Studio is now interpreting that design and generating the actual
application source code.

The build may take several minutes, particularly when many Stitch
screens and images have been exported.

Allow AI Studio to finish before making additional changes.

When the build is complete, AI Studio indicates that the application is
ready and displays the generated application under Preview.

Review the Action History

After the build, AI Studio may display an Action history showing
which files Gemini created or modified.

For example, our restaurant application generated files such as:

• metadata.json
• index.html
• src/index.css
• src/types.ts
• src/data/restaurantData.ts
• React components such as Header.tsx and Navigation.tsx

You do not need to understand every generated file at this stage.

The important point is that we have moved beyond a visual prototype. AI
Studio has now generated a real application structure containing source
code that we can later inspect, modify, test, and store in GitHub.

Review the AI Studio Build Summary

AI Studio may also provide a written summary explaining what Gemini
created.

For our restaurant project, AI Studio reported that it had built the
Test Restaurang & Matsal application and described features
including:

• Scandinavian restaurant styling and typography
• Home screen and restaurant hero section
• Seasonal menu
• Dish search and filtering
• Table reservation flow
• About and restaurant information
• Contact and location information
• English and Swedish language controls
• Guest and reservation-related interface elements

Your own build summary may be slightly different depending on the Stitch
screens, prompts, assets, and the version of AI Studio being used.

The summary is useful because it tells us what Gemini intended to
implement.

However, there is an important rule:

Do not assume that a feature works simply because AI Studio lists it
in the build summary.

For example, AI Studio may mention:

reservation confirmation, real-time search, Telegram
integration, or guest reservations.

At this stage, some of these may only be frontend interfaces,
demonstrations, or simulated interactions.

They do not necessarily mean that we already have:

• A production database
• A real reservation backend
• Email confirmation
• Telegram Bot integration
• Persistent customer data
• A production booking system

We will add and verify those capabilities step by step later.

Preview the Initial Application

Now look at the Preview area.

AI Studio should display the running application that it generated from
the Stitch design.

Do not immediately give AI Studio another large prompt or start adding
more features.

First, explore what has already been generated.

Check areas such as:

• Home page
• Navigation
• Menu
• Menu categories
• Food images
• Dish information
• Search and filters
• Reservation interface
• Contact information
• About page
• Mobile navigation
• Buttons and controls
• English and Swedish language switching
• Overall visual design

Click the navigation buttons and interact with the application just as a
restaurant customer would.

Compare AI Studio with the Stitch Design

The generated AI Studio application does not have to reproduce every
Stitch screen pixel-for-pixel.

Stitch provided the design foundation and visual references, while
AI Studio interpreted those references and converted them into
application code.

AI Studio may therefore make some design or implementation decisions of
its own.

This is normal.

What matters is that the application maintains the intended restaurant
experience and gives us a good technical foundation that we can continue
improving.

At this point, our project has moved from:

Designing the application in Google Stitch to: Building and
testing the application in Google AI Studio

12. Step 7 — Test the Initial AI Studio Application

Before giving AI Studio additional development requirements, we should
test the application it has already generated.

This is an important part of AI-assisted development.

AI Studio may already have created more functionality than we expected
from the initial Stitch export. Instead of immediately asking Gemini to
rebuild or add features, we first need to determine:

What already works? What works only partially? What is still
missing?

For now, do not modify the generated code and do not give Gemini
another development prompt.

We are going to use the Preview area in Google AI Studio and test
the generated application just as a restaurant customer would.

Where Do We Test the Application?

Look at the Preview panel on the right side of Google AI Studio.

This is the running version of the application that AI Studio generated
from our Stitch design.

You do not need to open another application or browser window for this
initial test.

At the bottom of our generated restaurant application, we have the main
navigation:

• Home
• Menu
• Book Table
• About
• Contact

We will test these sections one by one.

Do not try to fix problems immediately. First, identify and record them.
After testing the complete application, we can give AI Studio a more
precise development prompt.

Test 1 — Home

Start with Home.

You are probably already on this screen when the application first
opens.

Scroll slowly from the top of the Home page to the bottom.

Check:

• Does the restaurant hero image load correctly?
• Is the restaurant name displayed correctly?
• Is all text readable?
• Does the page fit correctly on the mobile-sized screen?
• Are any elements overlapping or cut off?
• Are buttons large enough to use comfortably?
• Are images displayed correctly?
• Is the visual style consistent?
• Is English and Swedish text being mixed unexpectedly?

Also inspect important Home buttons such as:

Book a Table

and:

Explore Seasonal Menu

Do not assume that a button works simply because it appears on the
screen. We will test the actions as part of our application testing.

Test 2 — Menu

At the bottom of the Preview, click:

Menu

Check whether the Menu screen opens correctly.

Then inspect:

• Menu categories
• Dish names
• Dish descriptions
• Food images
• Prices
• Search
• Category filters
• Dietary filters, if available
• Dish details
• Tasting-menu information, if available

Try the interactive controls.

For example, if there is a search box, search for one of the displayed
dishes.

If there are category buttons such as Starters, Main Courses,
Desserts, or Drinks, click them and check whether the displayed
dishes change correctly.

If clicking a dish opens additional information, test that as well.

Test 3 — Book Table

Next, click:

Book Table

Check whether the reservation interface opens correctly.

Inspect whether you can select or enter information such as:

• Number of guests
• Reservation date
• Reservation time
• Seating option, if available
• Customer name
• Phone number
• Email
• Special requests, if available

Use test information, not real customer information.

For example:

Name: Test Customer Email: test@example.com

Try submitting the reservation and observe what happens.

If AI Studio displays a confirmation and booking reference, make a note
of it.

However, remember that a confirmation screen does not necessarily mean
that the reservation has been permanently stored. We have not yet
intentionally implemented and verified a production database.

Test 4 — About

Click:

About

Check that the About screen opens correctly.

Inspect:

• Restaurant description
• Images
• Chef or restaurant information
• Typography
• Page layout
• Expandable sections, if available
• Mobile presentation

If AI Studio has generated interactive elements, test those as well.

Test 5 — Contact

Click:Contact and Check:

• Restaurant address
• Telephone number
• Email
• Opening hours
• Map or location information
• Contact buttons
• Telegram-related controls, if present
• Any expandable FAQ sections

Again, click interactive controls where appropriate and note anything
that does not work as expected.

Test the English and Swedish Languages

After testing the main sections, test the language controls:

EN / SV

First select EN and navigate through several screens.

Then select SV and repeat the test.

Check whether:

• Headings change language
• Navigation changes language
• Buttons are translated
• Menu information changes
• Reservation labels change
• Contact information remains correct
• English and Swedish are not unintentionally mixed

Our initial generated Home screen, for example, contained both Swedish
and English text. This is exactly the kind of issue that this test
should identify.

Test the Mobile Experience

Because our application will eventually be used as a Telegram Mini
App, mobile usability is particularly important.

While testing each section, check:

• Text readability
• Button size
• Navigation
• Scrolling
• Image sizing
• Form controls
• Spacing
• Bottom navigation
• Whether content extends outside the screen
• Whether important actions are easy to reach

The application should be comfortable to use on a smartphone, not merely
able to shrink to a mobile screen.

Keep a Simple Test List

As you test the application, make a simple list of what works and what
needs improvement.

For example:

Working

• Home screen loads
• Main navigation works
• Menu opens
• Food images display
• Reservation form opens
• Mobile bottom navigation works

Needs Improvement

• English and Swedish are mixed
• Restaurant name is inconsistent
• A menu filter does not work
• Reservation validation is incomplete
• Some buttons do nothing
• Confirmation needs improvement

Your results will probably be different. The purpose is to create a list
based on the actual generated application.

Do Not Fix Problems One by One Yet

If you discover a problem, resist the temptation to immediately send
Gemini a new prompt for every small issue.

Complete the initial test first.

We want to understand the state of the entire application before making
changes.

Once we know what works and what does not, we can give AI Studio a clear
and focused development request while telling it to preserve the parts
that already work.

This gives us a much safer AI-assisted development cycle:

Build → Preview → Test → Identify Problems → Give Requirements →
Rebuild → Test Again

13. Step 8 — Give AI Studio the Development Requirements

Now that we have tested the initial application, we know what already
works and what needs to be corrected.

This is a better time to give AI Studio additional development
instructions.

Instead of asking Gemini to rebuild the entire application, we should
provide a specific list of improvements while telling it to preserve
the parts that already work.

Use the Test Results as Development Requirements

During our initial test, we discovered several issues:

• Some English and Swedish text is mixed.
• The restaurant name is inconsistent.
• The reservation date is incorrect.
• The reservation date cannot be changed properly.
• Reservation navigation needs improvement.
• Done / Klart does not correctly start a new reservation.
• The purpose of View Flow in the tasting menu is unclear.
• Telephone and email actions on the Contact page are not functional.
• Email reservation confirmation has not yet been implemented.

Instead of fixing these problems one at a time, we can give AI Studio a
clear development prompt based on our test results.

AI Studio Development Prompt — Version 1

In Google AI Studio, look at the bottom-left area below the Gemini
conversation. You should see an input box labeled:

“Make changes, add new features, ask for anything”

Click inside this box. This is where we can give Gemini additional
instructions for modifying the existing application.

Paste the following development prompt:

Continue developing the existing Test Restaurang application.

Preserve the current visual design, mobile-first layout, navigation,
menu structure, images, typography, and functionality that already
works.

Do not redesign the application.

Make the following corrections and improvements:

1. Restaurant name

Use Test Restaurang consistently throughout the entire
application. Remove “& Matsal” from the restaurant name.

2. English and Swedish

Correct the EN/SV language switching throughout the application.

When EN is selected, all interface text should be in English.

When SV is selected, all interface text should be in Swedish.

For example:

EN: Welcome to Test Restaurang

SV: Välkommen till Test Restaurang

Check all pages, navigation labels, buttons, reservation controls,
menu text, confirmation text, and other interface labels for language
consistency.

3. Reservation date

Fix the reservation date handling.

The application must use the actual current date instead of a
hard-coded example date.

Allow the customer to navigate through available future reservation
dates.

Do not allow reservation dates in the past.

4. Reservation navigation

Make the reservation flow easy to navigate.

Allow the customer to move forward and backward through the
reservation steps where appropriate without losing previously entered
information.

5. Done / Klart

After a reservation reaches the confirmation screen, clicking Done
or Klart should close the completed reservation and return the
customer to the beginning of the reservation process.

Reset the reservation form so another reservation can be created.

6. Tasting menu

Replace the unclear View Flow label with:

View Tasting Menu in English

and an appropriate Swedish translation when SV is selected.

When the customer selects it, display the six courses included in the
tasting menu with the course name and a short description.

7. Contact actions

Make the telephone action functional so that selecting the telephone
number can initiate a phone call on supported devices.

Make the email action functional so that selecting the email address
can open the user’s email application.

8. Preserve existing functionality

Do not remove or unnecessarily change features that already work.

Keep the existing menu, search, filters, dish information, mobile
navigation, reservation interface, About page, Contact page, and
responsive layout unless a change is required to fix one of the issues
above.

Do not add a production database, authentication system, backend API,
or real reservation email service yet.

First implement these frontend corrections and then make the updated
application available for testing.

Why We Use a Detailed Prompt

Compare the prompt above with simply telling AI Studio:

Fix the app.

The detailed prompt tells the coding agent:

what is wrong → what behavior we expect → what should remain
unchanged

This reduces the chance that Gemini changes parts of the application
that already work correctly.

Why We Are Not Adding the Database or Email Service Yet

At this stage, we are deliberately concentrating on the frontend and
reservation workflow.

Before connecting a database, email service, backend API, or Telegram
integration, we want to make sure that:

• Navigation works
• Languages work correctly
• Dates work correctly
• Reservation steps work
• Forms behave correctly
• Confirmation works
• Mobile usability is good

This makes problems much easier to identify and correct.

Let AI Studio Make the Changes

Submit the development prompt and allow AI Studio to modify the
application.

While it works, you may again see Gemini creating or editing .ts,
.tsx, .css, and other project files.

Wait until AI Studio reports that the updated application is ready.

Do not assume that all requested changes were implemented correctly
simply because the build completed.

Our next task is to test the updated application again.

14. Step 9 — Test the Improvements

After AI Studio finishes applying the development prompt, it provides an
Action history showing the files that were changed and a summary of
the improvements it attempted to implement.

In our project, AI Studio reported that it:

• Standardized the restaurant name to Test Restaurang
• Corrected the EN/SV language switching
• Replaced the hard-coded reservation date with a dynamic current-date
  system
• Added forward and backward navigation to the reservation process
• Added a reservation review step
• Changed Done / Klart so that it resets the reservation flow
• Added functional telephone and email links
• Preserved the existing application design and functionality

AI Studio also created or modified several application files, including
React/TypeScript components such as the reservation view, menu view,
contact view, header, and tasting-menu modal.

However, the AI Studio summary tells us what Gemini attempted to
implement. We should still verify each change ourselves.

Retest Only the Changed Areas

Return to the Preview and test the problems we identified earlier.

Restaurant Name

Check several screens.

The restaurant should now consistently be called:

Test Restaurang

There should no longer be references to:

Test Restaurang & Matsal

English and Swedish

Select EN.

Check Home, Menu, Book Table, About, Contact, and the reservation
confirmation.

All interface text should be English.

Then select SV and repeat the test.

All interface text should be Swedish.

Pay particular attention to the Home heading that previously remained:

Välkommen till Test Restaurang & Matsal

when English was selected.

Reservation Date

Open Book Table.

The reservation calendar should begin with the actual current date
rather than the previously hard-coded October date.

Check that:

• Today’s date is correct
• Future dates can be selected
• Past dates cannot be selected
• Day and month information is correct
• EN/SV changes the date labels appropriately

Reservation Flow

Complete a test reservation.

Verify that you can move:

Table & Time → Guest Details → Review

and also move backward without losing the information you already
entered.

Do not use real personal information during testing.

Done / Klart

Complete the test reservation until the confirmation appears.

Click:

Done in English

or:

Klart in Swedish.

The confirmation should close, the reservation form should reset, and
the application should return to the beginning of the reservation
process ready for a new booking.

Tasting Menu

Open Menu and find the six-course tasting menu.

The unclear View Flow label should have been replaced with a clearer
action such as:

View Tasting Menu

Click it.

Verify that the application displays the six courses with their names
and descriptions.

Also test the Swedish version.

Telephone and Email

Open Contact.

Test the telephone action. On a supported device or browser, it should
use a telephone link.

Test the email action. It should open the configured email application
using an email link.

At this stage, this is not the same as automatically sending a
reservation-confirmation email. That functionality will be implemented
later.

Some Problems May Still Remain

Our second test showed that several requested improvements were
implemented successfully, but not everything worked correctly.

For example:

Working:

• The reservation date now starts with the correct current date.
• Telegram contact functionality works.

Still needs correction:

• After the current date, the reservation date selection unexpectedly
  jumps to November.
• The customer cannot properly navigate forward and backward through
  reservation dates/months.
• The telephone action still does not work.
• The email action still does not work.

This demonstrates an important principle when working with AI coding
agents:

Do not assume that a change works simply because the agent reports
that it implemented it. Always test the actual application.

When a problem remains, give the coding agent another small, focused
correction prompt instead of asking it to rebuild the entire
application.

AI Studio Correction Prompt — Version 2

Now go back to the bottom-left input:

Make changes, add new features, ask for anything

and use this smaller prompt:

Continue working on the existing Test Restaurang application.

Preserve the current design and all functionality that is already
working. Do not redesign the application.

The previous changes improved the application, but the following
problems remain after testing:

1. Reservation date selection

The reservation date correctly begins with today’s actual date, but
the following available dates incorrectly jump to November.

Fix the date selector so future dates continue chronologically from
the current date.

The customer must be able to navigate forward through future dates and
months and back to earlier available dates/months, but never select a
date before today.

Add clear previous and next navigation controls to the date selector.

The month and year heading must update correctly as the customer
navigates.

Preserve the selected reservation information when navigating between
dates.

2. Telephone action

The telephone action on the Contact screen is still not functional.

Implement it as a real clickable tel: link using the restaurant
telephone number so that supported devices can open their phone/dialer
application.

3. Email action

The email action on the Contact screen is still not functional.

Implement it as a real clickable mailto: link using the restaurant
email address so that the user’s configured email application can
open.

This is only a contact email link. Do not implement automatic
reservation-confirmation email yet.

4. Preserve working functionality

Telegram contact functionality is currently working correctly. Do not
change or remove it.

Preserve the existing restaurant name, EN/SV language functionality,
menu, reservation flow, navigation, responsive layout, and other
features that are already working.

Do not add a database, backend API, authentication, or production
email service.

Make only the corrections described above and make the updated
application available for testing.

Then let Gemini finish.

Test → Find Problem → Give Precise Instruction → Rebuild → Retest

Final Frontend Retest

After applying Correction Prompt — Version 2, we tested the
application again.

The reservation date selector and navigation now work correctly.

The Telegram contact action also works correctly.

The telephone action invokes the device/browser telephone-link handling.
On a desktop computer, this may display a list of applications capable
of handling telephone calls rather than immediately making a call. On a
smartphone, a tel: link would normally open the phone application.

The email action still requires verification. A mailto: link depends
on the browser and operating system having an email application or mail
handler configured. If nothing happens, this does not automatically mean
that the application code is incorrect.

Once these frontend corrections pass our tests, we can continue to the
next development stage.

15. Step 10 — Connect the Project to GitHub

Our application is now working in Google AI Studio. The next step is to connect it to GitHub.

This gives us version control, stores the source code in a repository, and prepares the project for development in Visual Studio Code.

Our workflow is now:

Google Stitch → Google AI Studio ↔ GitHub → Visual Studio Code → Backend → Deployment → Telegram Mini App

Open GitHub Sync in Google AI Studio

Stay inside the existing Test Restaurang project.

In the top-right area of Google AI Studio, click: Settings (gear) the GitHub

The GitHub sync panel opens.

If GitHub has not yet been connected, AI Studio asks you to sign in to GitHub.

Follow the sign-in process and authorize Google AI Studio.

Install and Authorize Google AI Studio on GitHub

GitHub may open a page called:

Install & Authorize Google AI Studio

Make sure your correct GitHub account is displayed.

GitHub then asks which repositories Google AI Studio may access.

The available options include:

All repositories

or:

Only select repositories

For our tutorial, we selected:

All repositories

This was useful because AI Studio was going to create a new repository that did not yet exist.

Review the requested permissions and click:

Install & Authorize

GitHub redirects you back to Google AI Studio.

If AI Studio Reports Insufficient Permissions

During our test, the connection did not work immediately. Google AI Studio displayed:

Failed to create GitHub repository, Insufficient permissions to create the GitHub repository.

If you receive this message, do not repeatedly create or delete repositories.

Instead, verify the GitHub authorization.

Open GitHub, click your profile picture, and go to:

Settings → Applications

Here you will find several tabs, including:

Installed GitHub Apps

and:

Authorized GitHub Apps

Check Authorized GitHub Apps

First open:

Authorized GitHub Apps

Look for:

Google AI Studio

This confirms that your GitHub account has authorized Google AI Studio.

In our case, Google AI Studio appeared here, but the repository connection was still not working correctly.

We used Revoke to remove the existing authorization and then went through the Google AI Studio authorization process again.

Use Revoke only when the existing authorization appears to be incorrect or the connection continues to fail. Normally, you should not need to do this.

Check Installed GitHub Apps

Next open:

Settings → Applications → Installed GitHub Apps

Look for:

Google AI Studio

After reconnecting, Google AI Studio appeared correctly in our Installed GitHub Apps list.

Click:

Configure

Under Repository access, verify which repositories Google AI Studio can access.

For our tutorial, we selected:

All repositories

The configuration also showed that Google AI Studio had the required read and write permissions for code and repository operations.

Save the configuration if GitHub asks you to do so.

Complete the Authorization

Return to Google AI Studio and continue the GitHub connection.

GitHub may display another authorization screen showing that Google AI Studio wants permission to:

• Verify your GitHub identity
• Know which resources you can access
• Act on your behalf

Click:

Authorize

After authorization, you should be redirected back to Google AI Studio.

Create the Repository from Google AI Studio

Now return to:

Google AI Studio → GitHub sync

Click:

Create new repository

For our project, we used:

Repository name:

restaurant-telegram-mini-app

Repository description:

Restaurant Telegram Mini App built with Google Stitch and Google AI Studio.

Visibility:

Public

Then click:

Create GitHub repository

Do not manually create a repository with the same name first. In this workflow, Google AI Studio creates the repository and establishes the synchronization automatically.

Push the Project to GitHub

After the repository is created, Google AI Studio displays the files that are ready to be pushed.

In our project, AI Studio reported 24 changed files.

For the first commit, we used:

Initial Test Restaurang application from Google AI Studio

Then click:

Push changes to GitHub

When synchronization finishes, AI Studio displays:

GitHub & Google AI Studio are currently in sync

Our repository is connected to the:

main

branch.

Verify the Files on GitHub

Open the repository from the GitHub Sync panel.

Our repository is:

restaurant-telegram-mini-app

We verified that GitHub contained the application source code, including:

src/
.env.example
.gitignore
index.html
metadata.json
package.json
tsconfig.json
vite.config.ts

We could also see our first commit:

Initial Test Restaurang application from Google AI Studio

This confirms that the project has been successfully transferred from Google AI Studio to GitHub.

GitHub Connection Complete

We now have the connection we wanted:

Google AI Studio ↔ GitHub

This is more than simply storing a copy of the project on GitHub. AI Studio’s GitHub Sync allows the project and repository to stay synchronized as development continues.

Our next stage is therefore:

GitHub → Visual Studio Code

We will clone the repository to our computer, open it in VS Code, inspect the generated React/TypeScript project, install its dependencies, and run Test Restaurang locally before beginning the backend development.

16. Why We Use GitHub

GitHub gives us:

• source-code history
• backup
• commits
• version tracking
• collaboration
• easier deployment
• local development

Most importantly, it prevents our application from existing only inside
an AI development tool.

Our project now becomes a normal software project.

17. Suggested Git Milestones

We should create meaningful milestones.

For example:

Initial restaurant design from Stitch

Add functional restaurant frontend

Add menu search and dish details

Add reservation validation

Add reservation confirmation

Later:

Add backend reservation API

Add database

Add Telegram Mini App integration

This makes it much easier to understand how the project evolved.

restaurant-telegram-mini-app

https://github.com/mehzan07/restaurant-telegram-mini-app.git

C:\Utvecklingprogram\AI

<span class="ͼl">cd</span> <span class="ͼl">C:</span>\<span class="ͼm">Utvecklingprogram</span>\<span class="ͼm">AI</span>

<span class="ͼm">git</span> <span class="ͼm">clone</span> <span class="ͼm">https</span><span class="ͼg">://</span><span class="ͼm">github</span>.<span class="ͼm">com</span><span class="ͼg">/</span><span class="ͼm">mehzan07</span><span class="ͼg">/</span><span class="ͼm">restaurant-telegram-mini-app</span>.<span class="ͼm">git</span>

C:\Utvecklingprogram\AI\restaurant-telegram-mini-app

<span class="ͼl">cd</span> <span class="ͼm">restaurant-telegram-mini-app</span>

<span class="ͼm">code</span> .

restaurant-telegram-mini-app/
│
├── src/
├── .env.example
├── .gitignore
├── index.html
├── metadata.json
├── package.json
├── tsconfig.json
└── vite.config.ts

<span class="ͼm">python</span> <span class="ͼm">app</span>.<span class="ͼm">py</span>

<span class="ͼm">git</span> <span class="ͼm">status</span>

19. Step 12 — Install the Development Environment and Run the Application

Before running the application, the dependencies required by the React/Vite project must be installed.
Check Node.js and npm

The first time we tried:

<span class="ͼm">npm</span> <span class="ͼm">install</span>

We verified this with:

<span class="ͼg">where</span>.<span class="ͼm">exe</span> <span class="ͼm">node</span>

We therefore installed the Node.js LTS version.

On Windows, this can be installed with:

<span class="ͼm">winget</span> <span class="ͼm">install</span> <span class="ͼm">OpenJS</span>.<span class="ͼm">NodeJS</span>.<span class="ͼm">LTS</span>

Then verify Node.js and npm.

<span class="ͼm">node</span> <span class="ͼg">--</span><span class="ͼm">version</span>
<span class="ͼm">npm</span> <span class="ͼg">--</span><span class="ͼm">version</span>

11.17.0

When we first tried:

<span class="ͼm">npm</span> <span class="ͼm">install</span>

npm.ps1 cannot be loaded.
The file is not digitally signed.

As a temporary solution, we could use:

<span class="ͼm">npm</span>.<span class="ͼm">cmd</span> <span class="ͼm">install</span>

<span class="ͼm">npm</span>.<span class="ͼm">cmd</span> <span class="ͼm">run</span> <span class="ͼm">dev</span>

<span class="ͼm">npm</span> <span class="ͼm">install</span>
<span class="ͼm">npm</span> <span class="ͼm">run</span> <span class="ͼm">dev</span>

<span class="ͼl">Get-ExecutionPolicy</span> <span class="ͼg">-</span><span class="ͼm">List</span>

CurrentUser    Undefined
LocalMachine   AllSigned

<span class="ͼl">Set-ExecutionPolicy</span> <span class="ͼg">-</span><span class="ͼm">Scope</span> <span class="ͼm">CurrentUser</span> <span class="ͼg">-</span><span class="ͼm">ExecutionPolicy</span> <span class="ͼm">RemoteSigned</span>

<span class="ͼl">Get-ExecutionPolicy</span> <span class="ͼg">-</span><span class="ͼm">List</span>

CurrentUser    RemoteSigned
LocalMachine   AllSigned

<span class="ͼm">npm</span> <span class="ͼg">--</span><span class="ͼm">version</span>

Next, we ran:

<span class="ͼm">npm</span> <span class="ͼm">install</span>

However, we discovered another issue in the application generated by Google AI Studio.

npm reported a dependency conflict between Vite and esbuild.

The generated package.json contained:

<span class="ͼk">"vite"</span>: <span class="ͼk">"^8.3.0"</span>

but under devDependencies it contained:

<span class="ͼk">"esbuild"</span>: <span class="ͼk">"^0.25.0"</span>

Vite 8.3.0 required a newer compatible esbuild version.

Instead of bypassing npm’s dependency checking with:

--force

or:

--legacy-peer-deps

We changed:

<span class="ͼk">"esbuild"</span>: <span class="ͼk">"^0.25.0"</span>

<span class="ͼk">"esbuild"</span>: <span class="ͼk">"^0.28.0"</span>

<span class="ͼm">npm</span> <span class="ͼm">install</span>

again.

The installation succeeded and npm created the local dependency environment, including:

node_modules/
package-lock.json

The node_modules directory contains the installed packages and should normally remain excluded from Git through .gitignore.

The package-lock.json file, however, should normally be committed because it records the resolved dependency versions used by the project.

Understand the Development Command

Our package.json contains this script:

<span class="ͼk">"scripts"</span>: {
  "dev": <span class="ͼk">"vite --port=3000 --host=0.0.0.0"</span>
}

Therefore, when we run:

<span class="ͼm">npm</span> <span class="ͼm">run</span> <span class="ͼm">dev</span>

npm executes:

vite --port=3000 --host=0.0.0.0

Vite then starts the development server.

This explains why we use:

<span class="ͼm">npm</span> <span class="ͼm">run</span> <span class="ͼm">dev</span>

instead of:

<span class="ͼm">python</span> <span class="ͼm">app</span>.<span class="ͼm">py</span>

The current application is a React/TypeScript frontend usi

VITE v8.3.0 ready

Local: http://localhost:3000/

We could then open:

http://localhost:3000/

The Test Restaurang application was now running directly from our local Visual Studio Code project.

Vite Warning

Vite also displayed a warning concerning __dirname in vite.config.ts.
The application nevertheless started and worked correctly.
Because this was a warning rather than a runtime failure, we decided not to change the Vite configuration at this stage. We will only modify it if it becomes necessary later.

<span class="ͼm">npm</span> <span class="ͼm">run</span> <span class="ͼm">dev</span>

http://localhost:3000/

Ctrl+C

<span class="ͼm">npm</span> <span class="ͼm">run</span> <span class="ͼm">dev</span>

<span class="ͼm">git</span> <span class="ͼm">status</span>

modified:   package.json

Untracked files:
    package-lock.json

<span class="ͼm">git</span> <span class="ͼm">add</span> <span class="ͼm">package</span>.<span class="ͼm">json</span> <span class="ͼm">package-lock</span>.<span class="ͼm">json</span>

<span class="ͼm">git</span> <span class="ͼm">status</span>

<span class="ͼm">git</span> <span class="ͼm">commit</span> <span class="ͼg">-</span><span class="ͼm">m</span> <span class="ͼk">"Fix dependencies and verify local development"</span>

<span class="ͼm">git</span> <span class="ͼm">tag</span> <span class="ͼg">-</span><span class="ͼm">a</span> <span class="ͼm">v1</span><span class="ͼj">.0.0</span> <span class="ͼg">-</span><span class="ͼm">m</span> <span class="ͼk">"Test Restaurang frontend V1 - verified locally"</span>

<span class="ͼm">git</span> <span class="ͼm">tag</span>

v1.0.0

<span class="ͼm">git</span> <span class="ͼm">push</span> <span class="ͼm">origin</span> <span class="ͼm">main</span>

<span class="ͼm">git</span> <span class="ͼm">push</span> <span class="ͼm">origin</span> <span class="ͼm">v1</span><span class="ͼj">.0.0</span>

<span class="ͼl">cd</span> <span class="ͼl">C:</span>\<span class="ͼm">Utvecklingprogram</span>\<span class="ͼm">AI</span>\<span class="ͼm">restaurant-telegram-mini-app</span>
<span class="ͼm">npm</span> <span class="ͼm">run</span> <span class="ͼm">dev</span>

http://localhost:3000/

Restaurant React UI
        ↓
Reservation Form
        ↓
Express REST API
        ↓
Server-Side Validation
        ↓
SQLite Database

Frontend: http://localhost:3000
Backend:  http://localhost:3001

server/
├── index.ts
├── database.ts
└── email.ts

React Frontend
      ↓
Express Backend API
      ↓
Server-Side Validation
      ↓
SQLite Database
      ↓
Email Service

server/index.ts

POST /api/reservations

GET /api/health

http://localhost:3001/api/health

{
  "status": <span class="ͼk">"ok"</span>,
  "message": <span class="ͼk">"Test Restaurang reservation API is running"</span>
}

data/
└── restaurant.db

server/database.ts

TR-MUCQ8B9G-8254

GET /api/reservations

http://localhost:3001/api/reservations

LOCAL DEVELOPMENT

Customer
   ↓
React Reservation Form
   ↓
Express API
   ↓
SQLite Database
   ↓
Nodemailer
   ↓
Gmail SMTP
   ↓
Customer Email

PRODUCTION

Customer
   ↓
Nordic Ember Web App / Telegram Mini App
   ↓
Railway
   ↓
Express API
   ↓
SQLite Database
   ↓
Resend API
   ↓
Customer Email

React Frontend
      ↓
Express Backend
      ↓
Nodemailer
      ↓
SMTP Server
      ↓
Customer

server/email.ts

Simple Mail Transfer Protocol

Nordic Ember running locally
        ↓
Nodemailer
        ↓
smtp.gmail.com
        ↓
Gmail
        ↓
Customer email address

server/email.ts

.env

.env.example

SMTP_HOST=smtp.gmail.com
SMTP_PORT=587
SMTP_USER=your-email@gmail.com
SMTP_PASS=YOUR_GMAIL_APP_PASSWORD
SMTP_FROM="Nordic Ember <your-email@gmail.com>"

.gitignore

.env.example  → can be committed to GitHub
.env          → must remain private

process.env.SMTP_HOST
process.env.SMTP_PORT
process.env.SMTP_USER
process.env.SMTP_PASS
process.env.SMTP_FROM

server/email.ts

Nordic Ember

Hello Mehrdad,

Thank you for your reservation at Nordic Ember.

Booking reference: TR-MUCQ8B9G-8254
Date: 2026-10-16
Time: 18:00
Guests: 6
Seating area: Main Dining Room (Matsal)

Please keep your booking reference if you need
to contact the restaurant about your reservation.

Best regards,
Nordic Ember

Reservation stored in SQLite    ✅
Confirmation email              ❌

✓ Table Reserved!

Confirmation email sent.

A confirmation email has been sent to
customer@example.com

✓ Table Reserved!

⚠ Confirmation email could not be sent.

Your reservation is still confirmed.
Please keep your booking reference.

React Reservation Form
        ↓
Vite Development Environment
        ↓
Express REST API
        ↓
Server-Side Validation
        ↓
Reservation Reference Generated
        ↓
SQLite Database
        ↓
Nodemailer
        ↓
Gmail SMTP
        ↓
Customer Confirmation Email

Reservation form                  ✅
Express API                       ✅
Server-side validation            ✅
Reservation reference             ✅
SQLite storage                    ✅
Nodemailer                        ✅
Gmail SMTP                        ✅
Customer confirmation email       ✅
Frontend delivery notification    ✅

Nodemailer
   ↓
Gmail SMTP

LOCAL
.env
   ↓
SMTP configuration
   ↓
Nodemailer
   ↓
Gmail SMTP

PRODUCTION
Railway Environment Variables
   ↓
RESEND_API_KEY
   ↓
Resend API
   ↓
Verified Restaurant Domain
   ↓
Customer

                 Nordic Ember
                      │
                      ▼
            Reservation Backend
                      │
             Check Environment
                ┌─────┴─────┐
                │           │
                ▼           ▼
             LOCAL       PRODUCTION
                │           │
           Nodemailer      Resend
                │           │
           Gmail SMTP    Resend API
                │           │
                └─────┬─────┘
                      ▼
               Customer Email

RESEND_API_KEY exists
        ↓
Use Resend

No RESEND_API_KEY
        ↓
Use SMTP / Nodemailer

Gmail App Password
Resend API Key
Telegram Bot Token

Local secrets
      ↓
.env

Production secrets
      ↓
Railway Environment Variables

v1.2.0

Railway
   +
Resend
   +
Miss Hosting DNS
   +
restaurant.softsolutionsahand.com

Nordic Ember
│
├── React + TypeScript frontend
├── Vite build system
├── Responsive restaurant interface
├── Swedish and English support
├── Menu and dish information
├── Reservation interface
│
├── Express backend
├── REST API
├── Server-side validation
├── SQLite reservation database
├── Reservation reference generation
│
└── Email confirmation
    └── Nodemailer + SMTP for local development

FRONTEND

React
   ↓
TypeScript
   ↓
Vite
   ↓
dist/

BACKEND

Node.js
   ↓
Express
   ↓
REST API
   ↓
SQLite
   ↓
Email Service

Customer
   ↓
Book Table
   ↓
React Frontend
   ↓
POST /api/reservations
   ↓
Express Backend
   ↓
Validation
   ↓
SQLite
   ↓
Email Confirmation

C:\Utvecklingprogram\AI\restaurant-telegram-mini-app

npm run build

vite v8.3.0 building client environment for production...

✓ 28 modules transformed.

dist/index.html
dist/assets/index-DCW1T9UC.css
dist/assets/index-C1AfRZaB.js

✓ built in 732ms

index-DCW1T9UC.css
index-C1AfRZaB.js

✓ built

npm run build

dist/

restaurant-telegram-mini-app/
│
├── dist/
│   ├── index.html
│   │
│   └── assets/
│       ├── index-XXXXXXXX.css
│       └── index-XXXXXXXX.js
│
├── server/
├── src/
├── public/
├── package.json
└── ...

POST /api/reservations

dist/

Frontend production files
+
Node.js / Express backend

npm run build

React frontend                    ✅
TypeScript compilation            ✅
Vite production build             ✅
Express backend                   ✅
Reservation API                   ✅
SQLite integration                ✅
Email module                      ✅
Environment variable support      ✅
Git repository                    ✅

Cloud Platform
      ↓
Install dependencies
      ↓
Build application
      ↓
Start Node.js server
      ↓
Express becomes available
      ↓
Serve frontend + API

localhost:3001

Railway
   ↓
PORT environment variable
   ↓
Express server

SMTP_HOST
SMTP_PORT
SMTP_USER
SMTP_PASS
SMTP_FROM

RESEND_API_KEY
RESEND_FROM

SOURCE CODE
      ↓
GitHub

SECRETS / PRODUCTION CONFIGURATION
      ↓
Hosting Environment Variables

process.env.RESEND_API_KEY

.gitignore

.env

Application source        → GitHub
Configuration examples    → GitHub
Passwords                 → Never
API keys                  → Never
Bot tokens                → Never
Local secret .env         → Never

.env.example

SMTP_HOST=
SMTP_PORT=
SMTP_USER=
SMTP_PASS=
SMTP_FROM=

RESEND_API_KEY=
RESEND_FROM=

Developer PC
   ↓
VS Code
   ↓
React + Express
   ↓
SQLite
   ↓
Nodemailer
   ↓
Gmail SMTP

Internet / Telegram
   ↓
Railway
   ↓
React + Express
   ↓
SQLite
   ↓
Production Email Provider

restaurant-telegram-mini-app

Local Project
     ↓
Git
     ↓
GitHub
     ↓
Railway

Edit locally
   ↓
Test
   ↓
git add
   ↓
git commit
   ↓
git push
   ↓
GitHub updated
   ↓
Railway detects change
   ↓
New deployment

VS Code
   ↓
git push origin main
   ↓
GitHub
   ↓
Railway detects new commit
   ↓
Build
   ↓
Deploy

Modify
   ↓
Test locally
   ↓
Build locally
   ↓
Commit
   ↓
Push
   ↓
Railway deploy
   ↓
Check deployment logs
   ↓
Test production

Express
   ↓
SQLite
   ↓
Database File

SQLite + persistent volume

PostgreSQL

http://localhost:...

https://our-public-application...

Finish application
      ↓
Prepare production build
      ↓
Push to GitHub
      ↓
Deploy publicly
      ↓
Test public application
      ↓
Configure Telegram Web App

VS Code
   ↓
Git
   ↓
GitHub
   ↓
Railway
   ↓
Public HTTPS Application

Customer
   ↓
Telegram
   ↓
Nordic Ember Mini App
   ↓
Railway
   ↓
Express API
   ↓
Reservation Database
   ↓
Email Confirmation

Frontend works locally                 ✅
Reservation flow works                 ✅
Backend API works                      ✅
SQLite reservation storage works       ✅
Local SMTP email works                 ✅
Customer email tested                  ✅
Production Vite build works            ✅
Environment variables supported        ✅
Secrets kept outside source code       ✅
Git repository prepared                ✅
GitHub repository available            ✅

localhost

Internet

GitHub
   ↓
Railway
   ↓
Public HTTPS URL

http://localhost:...

React + TypeScript frontend
          +
Express backend
          +
Reservation API
          +
SQLite database
          +
Email service

/api/reservations

VS Code
   ↓
Git
   ↓
GitHub
   ↓
Railway
   ↓
Nordic Ember Production Application

restaurant-telegram-mini-app

restaurant-telegram-mini-app
        GitHub
          ↓
       Railway
          ↓
   Production Service

restaurant-telegram-mini-app

GitHub Repository
       ↓
Railway downloads source
       ↓
Dependencies installed
       ↓
Application built
       ↓
Node.js server started
       ↓
Application becomes available

package.json

npm install
     ↓
npm run build
     ↓
Vite creates dist/
     ↓
Node.js / Express starts

npm run build

.env

LOCAL DEVELOPMENT

.env
 ↓
Environment Variables
 ↓
Application

RAILWAY

Railway Variables
      ↓
Environment Variables
      ↓
Application

process.env.VARIABLE_NAME

SMTP password
Gmail App Password
Resend API Key
Telegram Bot Token

server/email.ts

GitHub
   ↓
Application code only

Railway
   ↓
Production secrets

GitHub
   ↓
Source downloaded
   ↓
Build started
   ↓
Dependencies installed
   ↓
Application compiled
   ↓
Server started
   ↓
Deployment available

Deployment failed
      ↓
Open Railway
      ↓
Open service
      ↓
Open deployment
      ↓
Read deployment/runtime logs
      ↓
Identify error
      ↓
Correct locally
      ↓
Commit
      ↓
Push to GitHub
      ↓
Railway redeploys

https://restaurant-telegram-mini-app-production.up.railway.app

localhost

Developer Computer
       ↓
localhost

Internet
   ↓
Railway HTTPS URL
   ↓
Nordic Ember

https://restaurant-telegram-mini-app-production.up.railway.app

Home
Menu
Book Table
About
Contact
EN / SV
Mobile layout

Railway Website
      ↓
Book Table
      ↓
Reservation Form
      ↓
POST /api/reservations
      ↓
Express
      ↓
Validation
      ↓
Reservation Stored

Nordic Ember
     ↓
Nodemailer
     ↓
Gmail SMTP
     ↓
Customer

LOCAL DEVELOPMENT
      ↓
Nodemailer
      ↓
SMTP

RAILWAY PRODUCTION
      ↓
Resend API

Railway
   ↓
SMTP connection
   ↓
Gmail

Railway
   ↓
HTTPS API
   ↓
Resend
   ↓
Customer

Nordic Ember <booking@restaurant.softsolutionsahand.com>

Is RESEND_API_KEY configured?
          │
     ┌────┴────┐
     │         │
    YES        NO
     │         │
     ▼         ▼
   Resend    SMTP
     │         │
Production   Local

LOCAL
No RESEND_API_KEY
      ↓
Nodemailer / SMTP

RAILWAY
RESEND_API_KEY configured
      ↓
Resend

VS Code
   ↓
Modify files
   ↓
Test locally
   ↓
git add
   ↓
git commit
   ↓
git push origin main
   ↓
GitHub
   ↓
Railway detects new commit
   ↓
Automatic deployment

Deploy Crashed!

git push
   ↓
GitHub changes
   ↓
Railway notices change
   ↓
New deployment starts

Open Railway
   ↓
Check deployment
   ↓
Read logs
   ↓
Find actual cause

Railway deployment running       ✅
Public URL opens                 ✅
Home page works                  ✅
Menu works                       ✅
Book Table works                 ✅
Reservation API responds         ✅
Reservation is created           ✅
Email system checked             ✅
Mobile layout checked            ✅

Telegram Mini App works          ✅
Mobile Telegram works            ✅
Customer receives email          ✅

Railway
   ↓
React
Express
Reservation API
Application runtime

Resend

softsolutionsahand.com

                 CUSTOMER
                    │
                    ▼
          Nordic Ember Application
                    │
                    ▼
                 Railway
                /       \
               /         \
              ▼           ▼
       Reservation       Resend
          Backend          │
              │            ▼
              ▼       Customer Email
           SQLite

Telegram
   ↓
Nordic Ember Mini App
   ↓
Railway

https://restaurant-telegram-mini-app-production.up.railway.app

restaurant.softsolutionsahand.com

Website hosting DNS

Email authentication DNS

Local development application

Public cloud application

VS Code
   ↓
Git
   ↓
GitHub
   ↓
Railway
   ↓
Nordic Ember
   ↓
Public HTTPS

Customer Email Confirmation

Nordic Ember
     ↓
Nodemailer
     ↓
Gmail SMTP
     ↓
Customer

Customer makes reservation
          ↓
Nordic Ember
          ↓
Railway
          ↓
Express Reservation API
          ↓
Reservation stored
          ↓
Resend API
          ↓
Confirmation Email
          ↓
Customer

LOCAL DEVELOPMENT

Nordic Ember
     ↓
Nodemailer
     ↓
Gmail SMTP
     ↓
Customer

Is RESEND_API_KEY available?
          │
      ┌───┴───┐
      │       │
     YES      NO
      │       │
      ▼       ▼
   Resend    SMTP
      │       │
 Railway    Local

LOCAL DEVELOPMENT
No RESEND_API_KEY
      ↓
Nodemailer
      ↓
Gmail SMTP

PRODUCTION
RESEND_API_KEY exists
      ↓
Resend
      ↓
Customer Email

Railway
   ↓
SMTP Server

Railway
   ↓
Resend API
   ↓
Email Infrastructure

Nordic Ember
<booking@restaurant.softsolutionsahand.com>

Emails
Domains
API Keys
Logs

API Keys
Domains

restaurant.softsolutionsahand.com

Nordic Ember Railway

re_xxxxxxxxxxxxxxxxxxxxxxxxx

server/email.ts
      ↓
Resend library
      ↓
Resend API

Nodemailer
+
Resend

server/email.ts

sendReservationConfirmation()
          ↓
Check RESEND_API_KEY
          ↓
┌───────────────────────┐
│                       │
▼                       ▼
Resend                 SMTP
Production             Local

Send the reservation confirmation.

RESEND_API_KEY

Railway Variables

RESEND_API_KEY = re_xxxxxxxxxxxxxxxxx

process.env.RESEND_API_KEY

RESEND_FROM

Nordic Ember <booking@restaurant.softsolutionsahand.com>

process.env.RESEND_FROM

RESEND_API_KEY
RESEND_FROM

Nordic Ember
     ↓
Railway
     ↓
RESEND_API_KEY
     ↓
Resend API

process.env.RESEND_API_KEY

Production environment detected
            ↓
Use Resend

No RESEND_API_KEY
       ↓
Use SMTP

Add Railway Variable
        ↓
Railway Deployment
        ↓
Application Starts
        ↓
process.env.RESEND_API_KEY
        ↓
Resend Enabled

Email provider: Resend

Railway
   ↓
Resend

onboarding@resend.dev

Question 1:
Can Railway communicate with Resend?

Question 2:
Can we send from our own restaurant domain?

Name: Mehrdad Zandi
Email: customer test address
Guests: 4
Date: future date
Time: 20:00
Seating: Main Dining Room

Browser
   ↓
Nordic Ember on Railway
   ↓
POST /api/reservations
   ↓
Reservation stored
   ↓
sendReservationConfirmation()
   ↓
RESEND_API_KEY detected
   ↓
Resend
   ↓
Customer Email

Nordic Ember

Hello Mehrdad Zandi,

Thank you for your reservation at Nordic Ember.

Booking reference: TR-XXXXXXXX-XXXX
Date: 2026-10-04
Time: 20:00
Guests: 4
Seating area: Main Dining Room (Matsal)

Please keep your booking reference if you need
to contact the restaurant about your reservation.

Best regards,
Nordic Ember

Railway → Resend → Customer

Email provider: Resend

Railway application                 ✅
Reservation API                     ✅
Reservation stored                  ✅
RESEND_API_KEY detected             ✅
Resend selected                     ✅
Resend API communication            ✅
Customer email delivered            ✅

APPLICATION SIDE
Railway Logs

EMAIL PROVIDER SIDE
Resend Dashboard

Reservation created
       ↓
Railway says email sent
       ↓
Check Resend
       ↓
Check delivery status

Nordic Ember
From: onboarding@resend.dev

Nordic Ember
From: booking@restaurant.softsolutionsahand.com

softsolutionsahand.com

restaurant.softsolutionsahand.com

booking@restaurant.softsolutionsahand.com

Resend
   ↓
provides DNS records

Miss Hosting
   ↓
hosts/manages DNS for softsolutionsahand.com

DNS
   ↓
proves domain ownership/authentication

Is this Railway application authorized
to use our Resend account?

Is this Resend account authorized
to send email for this domain?

RESEND_API_KEY
      ↓
Railway ↔ Resend authentication

DNS records
      ↓
Domain ↔ Resend authentication

Customer
   ↓
Nordic Ember
   ↓
Railway
   ↓
Express
   ↓
Reservation Database
   ↓
Resend API
   ↓
Customer Email

Nordic Ember
<onboarding@resend.dev>

Nordic Ember
<booking@restaurant.softsolutionsahand.com>

LOCAL DEVELOPMENT
      ↓
Nodemailer
      ↓
Gmail SMTP
      ↓
Customer

PRODUCTION
      ↓
Railway
      ↓
Resend API
      ↓
Customer

restaurant.softsolutionsahand.com

Nordic Ember
    ↓
Railway
    ↓
Resend API
    ↓
Customer Email

Nordic Ember <onboarding@resend.dev>

Nordic Ember <booking@restaurant.softsolutionsahand.com>

softsolutionsahand.com

Resend
    ↕
DNS
    ↕
Miss Hosting
    ↕
softsolutionsahand.com

booking@some-company.com

booking@restaurant.softsolutionsahand.com

restaurant.softsolutionsahand.com

softsolutionsahand.com

restaurant.softsolutionsahand.com

booking@restaurant.softsolutionsahand.com

softsolutionsahand.com
        │
        └── restaurant.softsolutionsahand.com
                    │
                    └── booking@restaurant.softsolutionsahand.com

restaurant.softsolutionsahand.com

Domains

restaurant.softsolutionsahand.com

findflight.softsolutionsahand.com
        ↓
PythonAnywhere

Domain
   ↓
Website

Domain
   ↓
Email Authentication
   ↓
Resend

findflight.softsolutionsahand.com

findflight.softsolutionsahand.com
        ↓
webapp-2897254.pythonanywhere.com

DNS
   ↓
Website Hosting

DNS
   ↓
Email Authentication / Email Delivery

softsolutionsahand.com

resend._domainkey.restaurant.softsolutionsahand.com.

TXT

send.restaurant.softsolutionsahand.com.

CNAME

send.forge.rmta.net

rsend.restaurant.softsolutionsahand.com.

CNAME

rsend-euw1.forge.rmta.net

restaurant.softsolutionsahand.com
│
├── resend._domainkey.restaurant...
│       TXT
│       ↓
│       DKIM public key
│
├── send.restaurant...
│       CNAME
│       ↓
│       send.forge.rmta.net
│
└── rsend.restaurant...
        CNAME
        ↓
        rsend-euw1.forge.rmta.net

resend._domainkey

TXT

DomainKeys Identified Mail

Nordic Ember
      ↓
Resend signs email
      ↓
Receiving mail server
      ↓
Checks DNS DKIM public key
      ↓
Signature verified

p=MIGfMA0GCSq...

DKIM public key
    → stored in DNS

RESEND_API_KEY
    → private secret stored in Railway

send.restaurant.softsolutionsahand.com

send.forge.rmta.net

rsend.restaurant.softsolutionsahand.com

rsend-euw1.forge.rmta.net

send.restaurant.softsolutionsahand.com

rsend.restaurant.softsolutionsahand.com

resend._domainkey.restaurant.softsolutionsahand.com

Ctrl + F5

DKIM TXT       ✅
send CNAME     ✅
rsend CNAME    ✅

Add record in Miss Hosting
        ↓
Save
        ↓
DNS propagation
        ↓
Resend checks DNS
        ↓
Verification

Domains

restaurant.softsolutionsahand.com

Miss Hosting DNS
        ↓
Public DNS
        ↓
Resend checks records
        ↓
Domain verified

Nordic Ember <onboarding@resend.dev>

Nordic Ember <booking@restaurant.softsolutionsahand.com>

RESEND_FROM

Nordic Ember <booking@restaurant.softsolutionsahand.com>

RESEND_API_KEY
RESEND_FROM

Railway
│
├── RESEND_API_KEY
│       ↓
│    Authenticate with Resend
│
└── RESEND_FROM
        ↓
Nordic Ember
<booking@restaurant.softsolutionsahand.com>

RESEND_FROM
       ↓
server/email.ts
       ↓
Resend
       ↓
Customer

Nordic Ember <booking@restaurant.softsolutionsahand.com>

VS Code
   ↓
Modify server/email.ts
   ↓
Test / review
   ↓
git add
   ↓
git commit
   ↓
git push origin main
   ↓
GitHub
   ↓
Railway automatic deployment

GitHub push
     ↓
Railway deployment
     ↓
New application version

Railway
   ↓
Deployment
   ↓
Logs

Customer
Guests
Date
Time
Seating area
Special requests

Nordic Ember
From: booking@restaurant.softsolutionsahand.com

onboarding@resend.dev

Hello Mehrdad Zandi,

Thank you for your reservation at Nordic Ember.

Booking reference: TR-...
Date: ...
Time: ...
Guests: ...
Seating area: Main Dining Room (Matsal)

Special requests: ...

Please keep your booking reference if you need
to contact the restaurant about your reservation.

Best regards,
Nordic Ember

Customer
   ↓
Nordic Ember on Railway
   ↓
Reservation API
   ↓
Reservation created
   ↓
Email service
   ↓
RESEND_API_KEY
   ↓
Resend
   ↓
Verified restaurant domain
   ↓
booking@restaurant.softsolutionsahand.com
   ↓
Customer Inbox

Nordic Ember
   ↓
Express
   ↓
Nodemailer
   ↓
Gmail SMTP
   ↓
Customer

Nordic Ember
   ↓
Railway
   ↓
Express
   ↓
Resend API
   ↓
Verified Restaurant Domain
   ↓
Customer

findflight.softsolutionsahand.com
       CNAME
          ↓
webapp-2897254.pythonanywhere.com

DNS
 ↓
Website Hosting

DNS
 ↓
Email Authentication / Sending

FlightFinder record
    ≠
Resend records

restaurant.softsolutionsahand.com

Application:
Nordic Ember

Hosting:
Railway

Production Email Provider:
Resend

Email Sending Domain:
restaurant.softsolutionsahand.com

Customer-Facing Sender:
Nordic Ember <booking@restaurant.softsolutionsahand.com>

DNS Provider:
Miss Hosting

resend._domainkey.restaurant.softsolutionsahand.com
    TXT
    → DKIM public key supplied by Resend

send.restaurant.softsolutionsahand.com
    CNAME
    → send.forge.rmta.net

rsend.restaurant.softsolutionsahand.com
    CNAME
    → rsend-euw1.forge.rmta.net

                 CUSTOMER
                     │
                     ▼
              Nordic Ember
                     │
                     ▼
                  Railway
                     │
                     ▼
             Reservation API
                     │
               ┌─────┴─────┐
               │           │
               ▼           ▼
          Reservation    Resend API
             Stored          │
                             ▼
                   Verified DNS Domain
                             │
                             ▼
booking@restaurant.softsolutionsahand.com
                             │
                             ▼
                       Customer Email

onboarding@resend.dev

booking@restaurant.softsolutionsahand.com

Deployed on Railway       ✅
Publicly accessible       ✅
Reservation API working   ✅
Production email working  ✅
Custom sender verified    ✅
Customer email tested     ✅

@NordicEmberBot

Customer
   ↓
Nordic Ember
   ↓
Railway
   ↓
Reservation API
   ↓
Resend
   ↓
booking@restaurant.softsolutionsahand.com
   ↓
Customer Email

Telegram
   ↓
@NordicEmberBot
   ↓
Nordic Ember Web App
   ↓
Railway
   ↓
Reservation API
   ↓
Resend
   ↓
Customer Email

@NordicEmberBot

Customer
   ↓
Telegram
   ↓
@NordicEmberBot
   ↓
Open Restaurant
   ↓
Nordic Ember Mini App

@BotFather

Bot name
Bot username
Bot token
Bot description
Bot commands
Menu button
Web Apps

@BotFather

/newbot

/newbot

Nordic Ember

NordicEmberBot

bot

@NordicEmberBot

Restaurant:
Nordic Ember

Telegram Bot:
@NordicEmberBot

Nordic Ember

@NordicEmberBot

Display Name
Nordic Ember

        ↓

Telegram Username
@NordicEmberBot

1234567890:AAxxxxxxxxxxxxxxxxxxxxxxxxxxxx

const BOT_TOKEN = "1234567890:AA...";

SOURCE CODE
     ↓
GitHub

SECRETS
     ↓
Environment Variables

RESEND_API_KEY
TELEGRAM_BOT_TOKEN

Bot Token
    =
Secret Credential

README.md
Blog articles
GitHub source code
Public screenshots
Documentation
Frontend JavaScript
React components

React Frontend
      ↓
NO secret bot token

React / Telegram Mini App
          ↓
Our Backend
          ↓
TELEGRAM_BOT_TOKEN
          ↓
Telegram Bot API

https://restaurant-telegram-mini-app-production.up.railway.app

@NordicEmberBot
       ↓
Telegram Web App
       ↓
Railway HTTPS URL
       ↓
Nordic Ember

Why We Need HTTPS

http://localhost:...

https://restaurant-telegram-mini-app-production.up.railway.app

Telegram
   ↓
HTTPS
   ↓
Railway
   ↓
Nordic Ember

Build Nordic Ember
       ↓
Create Reservation Backend
       ↓
Create SQLite Database
       ↓
Add Local SMTP Email
       ↓
Deploy to Railway
       ↓
Configure Resend
       ↓
Verify Restaurant Email Domain
       ↓
Create / Configure Telegram Bot
       ↓
Configure Telegram Web App

localhost

@NordicEmberBot

Which web application belongs to this bot?

Telegram Bot
@NordicEmberBot

Web Application
Nordic Ember
Hosted on Railway

@NordicEmberBot
        │
        │ connect
        ▼
Nordic Ember Web App
        │
        ▼
Railway

Normal Web Browser
        │
        ▼
     Railway
        │
        ▼
  Nordic Ember

Telegram
    │
    ▼
@NordicEmberBot
    │
    ▼
Telegram Mini App
    │
    ▼
Railway
    │
    ▼
Nordic Ember

Telegram Customer
       ↓
Nordic Ember Mini App
       ↓
Railway
       ↓
POST /api/reservations
       ↓
Express
       ↓
Reservation Storage
       ↓
Resend
       ↓
booking@restaurant.softsolutionsahand.com
       ↓
Customer Email

Telegram Bot created             ✅
Bot name: Nordic Ember           ✅
Username: @NordicEmberBot        ✅
Bot token generated              ✅
Token treated as secret          ✅
Production application online    ✅
HTTPS Railway URL available      ✅

Nordic Ember Web App
        ↓
Title
        ↓
Description
        ↓
640 × 360 image
        ↓
Demo GIF / skip
        ↓
Railway Web App URL
        ↓
Short name: restaurant
        ↓
Direct Telegram Web App link
        ↓
Menu button
        ↓
🔥 Open Restaurant

@NordicEmberBot

https://restaurant-telegram-mini-app-production.up.railway.app

restaurant

t.me/NordicEmberBot/restaurant

🔥 Open Restaurant

Nordic Ember
booking@restaurant.softsolutionsahand.com

https://restaurant-telegram-mini-app-production.up.railway.app

@NordicEmberBot

Telegram
   ↓
@NordicEmberBot
   ↓
Nordic Ember Mini App
   ↓
Railway
   ↓
Express Reservation API
   ↓
Reservation
   ↓
Resend
   ↓
booking@restaurant.softsolutionsahand.com
   ↓
Customer Email

Existing Nordic Ember Web App
              +
       Telegram Bot
              ↓
      Telegram Mini App

http://localhost:...

https://restaurant-telegram-mini-app-production.up.railway.app

Telegram
   ↓
HTTPS
   ↓
Railway
   ↓
Nordic Ember

@BotFather

@NordicEmberBot

@NordicEmberBot

@NordicEmberBot
       ↓
restaurant
       ↓
Nordic Ember Web App
       ↓
Railway

Creating a new web app for @NordicEmberBot.
Please enter a title for the web app.

Nordic Ember

Please enter a short description of the web app.

Explore Nordic Ember's seasonal menu and reserve
your table directly from Telegram.

Please upload a photo, 640x360 pixels.

640 × 360 pixels

Sorry, the image dimensions are invalid.
Must be 640x360

nordic-ember-telegram-app.png

Width:  640 pixels
Height: 360 pixels

restaurant-telegram-mini-app/
│
├── Docs/
│
├── public/
│   └── telegram/
│       └── nordic-ember-telegram-app.png
│
├── server/
├── src/
└── package.json

640 × 360

Now upload a demo GIF or send /empty to skip this step.

/empty

Now please send me the Web App URL that will be
opened when users follow a web app direct link.

https://restaurant-telegram-mini-app-production.up.railway.app

Telegram Web App
       ↓
Railway URL
       ↓
Nordic Ember

3–30 characters
a-z
A-Z
0-9
_

t.me/NordicEmberBot/myapp

restaurant

You can now use restaurant as the short_name parameter
value in Bot API.

t.me/NordicEmberBot/restaurant

Telegram
   ↓
t.me/NordicEmberBot/restaurant
   ↓
Nordic Ember

restaurant

t.me/NordicEmberBot/restaurant

Home
Menu
Book Table
About
Contact

Swedish / English

@NordicEmberBot
       ↓
restaurant
       ↓
Railway
       ↓
Nordic Ember

@NordicEmberBot

Send me the URL that will be opened by tapping
the menu button.

Use /empty to use the default behavior for
the menu button.

https://restaurant-telegram-mini-app-production.up.railway.app

Send me the title to be displayed on the button
instead of 'Menu'.

Use /empty to use the default behavior for
the menu button.

Menu

🔥 Open Restaurant

Success! Menu settings updated.

Menu

Food Menu

Open the entire application

🔥 Open Restaurant

t.me/NordicEmberBot/restaurant

@NordicEmberBot

🔥 Open Restaurant

Direct Web App Link ─────┐
                         │
                         ▼
                    Nordic Ember
                         ▲
                         │
Bot Menu Button ─────────┘

@NordicEmberBot

🔥 Open Restaurant

Home            ✅
Menu            ✅
Book Table      ✅
About           ✅
Contact         ✅

Guests: 3
Date: future date
Time: 20:00
Seating area: Main Dining Room (Matsal)
Name: Mehrdad Zandi
Email: test customer email
Special requests: test message

Telegram
   ↓
Nordic Ember Mini App
   ↓
Railway
   ↓
POST /api/reservations
   ↓
Express
   ↓
Reservation saved
   ↓
Resend
   ↓
Customer Email

@NordicEmberBot

Application opens               ✅
Layout fits mobile screen       ✅
Navigation works                ✅
Menu works                      ✅
Booking form works              ✅
Date/time selection works       ✅
Reservation submits             ✅

Telegram
Railway
Reservation API
Resend
Receiving mail provider
Spam filtering
Delivery timing

Nordic Ember

From:
booking@restaurant.softsolutionsahand.com

Hello Mehrdad Zandi,

Thank you for your reservation at Nordic Ember.

Booking reference: TR-...
Date: ...
Time: 20:00
Guests: 3
Seating area: Main Dining Room (Matsal)

Special requests: ...

Please keep your booking reference if you need
to contact the restaurant about your reservation.

Mobile Phone
     ↓
Telegram
     ↓
@NordicEmberBot
     ↓
Nordic Ember Mini App
     ↓
Railway
     ↓
React Frontend
     ↓
Express API
     ↓
Reservation
     ↓
Resend
     ↓
Verified Email Domain
     ↓
booking@restaurant.softsolutionsahand.com
     ↓
Customer Inbox

Telegram
   ↓
opens
   ↓
Railway Application

React
Express
Reservation API
Email integration

Nordic Ember
   ↓
Railway Backend
   ↓
Resend
   ↓
booking@restaurant.softsolutionsahand.com
   ↓
Customer

Telegram
→ customer access / Mini App

Railway
→ application hosting

Resend
→ production email delivery

Miss Hosting DNS
→ domain authentication

GitHub
→ source code

VS Code
→ development

                    CUSTOMER
                       │
                       ▼
                    Telegram
                       │
                       ▼
                @NordicEmberBot
                       │
                       ▼
             Nordic Ember Mini App
                       │
                       ▼
                    Railway
                       │
               ┌───────┴───────┐
               │               │
               ▼               ▼
         React Frontend    Express Backend
                               │
                               ▼
                        Reservation API
                               │
                      ┌────────┴────────┐
                      │                 │
                      ▼                 ▼
                 Reservation         Resend
                    Storage             │
                                        ▼
                               Verified Domain
                                        │
                                        ▼
                  booking@restaurant.softsolutionsahand.com
                                        │
                                        ▼
                                Customer Email

VS Code
   ↓
Git
   ↓
GitHub
   ↓
Railway

Bot Name:
Nordic Ember

Bot Username:
@NordicEmberBot

Web App Title:
Nordic Ember

Web App Hosting:
Railway

Web App URL:
https://restaurant-telegram-mini-app-production.up.railway.app

Web App Short Name:
restaurant

Direct Mini App Link:
t.me/NordicEmberBot/restaurant

Menu Button:
🔥 Open Restaurant

Web App Image:
640 × 360 pixels

Demo GIF:
Skipped for now

Google Stitch
     ↓
Google AI Studio
     ↓
React + TypeScript
     ↓
Express Backend
     ↓
SQLite
     ↓
Local SMTP
     ↓
GitHub
     ↓
Railway
     ↓
Resend
     ↓
Miss Hosting DNS
     ↓
Verified Restaurant Email
     ↓
Telegram Bot
     ↓
Telegram Mini App
     ↓
Mobile Test
     ↓
Successful Reservation
     ↓
Customer Confirmation Email

Open Telegram
     ↓
Open Nordic Ember
     ↓
Browse Restaurant
     ↓
Book Table
     ↓
Reservation Created
     ↓
Confirmation Email Received

Google Stitch
      ↓
UI / UX Design
      ↓
Google AI Studio
      ↓
React + TypeScript + Vite
      ↓
Express Backend
      ↓
Reservation API
      ↓
SQLite
      ↓
GitHub
      ↓
Railway
      ↓
Production Application
      ↓
Resend
      ↓
Verified Restaurant Domain
      ↓
Telegram Mini App

Google Stitch
      ↓
Visual Restaurant Design
      ↓
Google AI Studio
      ↓
Generated Application
      ↓
VS Code
      ↓
React + TypeScript
      ↓
Vite
      ↓
Express
      ↓
SQLite

React
   +
TypeScript
   +
Vite

Home
Menu
Book Table
About
Contact
English / Swedish
Responsive mobile interface

Receive reservation
       ↓
Validate reservation
       ↓
Generate booking reference
       ↓
Store reservation
       ↓
Trigger confirmation email
       ↓
Return result to frontend

POST /api/reservations

Customer
   ↓
Book Table
   ↓
React Frontend
   ↓
POST /api/reservations
   ↓
Express Backend
   ↓
Validation
   ↓
Reservation Reference
   ↓
SQLite
   ↓
Email Confirmation

TR-XXXXXXXX-XXXX

Nordic Ember
     ↓
Express
     ↓
Nodemailer
     ↓
Gmail SMTP
     ↓
Customer

SMTP_HOST
SMTP_PORT
SMTP_USER
SMTP_PASS
SMTP_FROM

RESEND_API_KEY

Nordic Ember
     ↓
Railway
     ↓
Express
     ↓
Resend API
     ↓
Verified Restaurant Domain
     ↓
Customer

Nordic Ember
<booking@restaurant.softsolutionsahand.com>

LOCAL
Nodemailer + Gmail SMTP

PRODUCTION
Railway + Resend

        sendReservationConfirmation()
                    ↓
          Is RESEND_API_KEY set?
                    │
              ┌─────┴─────┐
              │           │
             YES          NO
              │           │
              ▼           ▼
           Resend      Nodemailer
              │           │
              ▼           ▼
         Production      Local

softsolutionsahand.com

restaurant.softsolutionsahand.com

booking@restaurant.softsolutionsahand.com

resend._domainkey.restaurant.softsolutionsahand.com
        TXT
        ↓
        DKIM public key

send.restaurant.softsolutionsahand.com
        CNAME
        ↓
send.forge.rmta.net

rsend.restaurant.softsolutionsahand.com
        CNAME
        ↓
rsend-euw1.forge.rmta.net

VS Code
   ↓
Git
   ↓
GitHub
   ↓
Railway
   ↓
Production

git add
   ↓
git commit
   ↓
git push origin main

Local Code Change
       ↓
GitHub Push
       ↓
Railway Deployment
       ↓
Updated Production Application

https://restaurant-telegram-mini-app-production.up.railway.app

@NordicEmberBot

restaurant

t.me/NordicEmberBot/restaurant

🔥 Open Restaurant

Customer
   ↓
Telegram
   ↓
@NordicEmberBot
   ↓
🔥 Open Restaurant
   ↓
Nordic Ember Mini App
   ↓
Railway

Customer
   ↓
Web Browser
   ↓
Railway
   ↓
Nordic Ember

Customer
   ↓
Telegram
   ↓
@NordicEmberBot
   ↓
Mini App
   ↓
Railway
   ↓
Nordic Ember

Customer's Mobile Phone
          ↓
       Telegram
          ↓
   @NordicEmberBot
          ↓
   🔥 Open Restaurant
          ↓
Nordic Ember Mini App
          ↓
       Railway
          ↓
   React Frontend
          ↓
    Book Table
          ↓
POST /api/reservations
          ↓
 Express Backend
          ↓
    Validation
          ↓
Booking Reference
          ↓
      SQLite
          ↓
      Resend
          ↓
Verified Restaurant Domain
          ↓
booking@restaurant.softsolutionsahand.com
          ↓
Customer Confirmation Email

                     CUSTOMER
                        │
              ┌─────────┴─────────┐
              │                   │
              ▼                   ▼
         Web Browser           Telegram
                                  │
                                  ▼
                           @NordicEmberBot
                                  │
                                  ▼
                          🔥 Open Restaurant
              │                   │
              └─────────┬─────────┘
                        │
                        ▼
                     Railway
                        │
              ┌─────────┴─────────┐
              │                   │
              ▼                   ▼
       React + TypeScript       Express
          Frontend             Backend
                                  │
                                  ▼
                         Reservation API
                                  │
                    ┌─────────────┴─────────────┐
                    │                           │
                    ▼                           ▼
                  SQLite                      Resend
                                                │
                                                ▼
                                      Verified DNS Domain
                                                │
                                                ▼
                         booking@restaurant.softsolutionsahand.com
                                                │
                                                ▼
                                         Customer Email

Google Stitch
      ↓
Google AI Studio
      ↓
VS Code
      ↓
Git
      ↓
GitHub
      ↓
Railway

Miss Hosting
     ↓
DNS
     ↓
Resend Domain Verification

Responsive restaurant UI             ✅
English and Swedish                   ✅
Menu browsing                         ✅
Table reservations                    ✅
Server-side reservation API           ✅
Reservation storage                   ✅
Unique booking references             ✅
Local SMTP email                      ✅
Production Resend email               ✅
Custom restaurant sender              ✅
Verified email domain                 ✅
GitHub source control                 ✅
Railway cloud deployment              ✅
Public HTTPS application              ✅
Telegram bot                          ✅
Telegram Mini App                     ✅
Desktop Telegram test                 ✅
Mobile Telegram test                  ✅
End-to-end reservation test           ✅
Customer confirmation email           ✅

Nordic Ember Demo
       ↓
Show to Restaurant Owner
       ↓
Discuss Requirements
       ↓
Customize
       ↓
Restaurant's Own Application

Customer / Restaurant Owner
           ↓
       Web Browser
           ↓
        Railway
           ↓
      Nordic Ember

https://restaurant-telegram-mini-app-production.up.railway.app

Customer / Restaurant Owner
           ↓
        Telegram
           ↓
    @NordicEmberBot
           ↓
   🔥 Open Restaurant
           ↓
 Nordic Ember Mini App

t.me/NordicEmberBot/restaurant

Home
  ↓
Restaurant presentation
  ↓
Menu
  ↓
Browse dishes
  ↓
Book Table
  ↓
Enter reservation details
  ↓
Submit reservation
  ↓
Booking reference created
  ↓
Confirmation email received

Restaurant name
Brand identity
Hero images
Introduction
Seasonal information
Featured dishes
Calls to action

Nordic Ember
      ↓
Customer's Restaurant Name

Nordic Ember images
      ↓
Customer's Restaurant Photos

Nordic Ember colors
      ↓
Customer's Brand Colors

Menu

Starters
Main courses
Desserts
Drinks
Prices
Descriptions
Food images
Dietary information
Categories
Seasonal dishes

English
Swedish

Swedish
English
German
French
Spanish
Turkish

Number of guests
Date
Time
Seating area
Customer name
Phone
Email
Special requests

Quiet corner requested for anniversary dinner.
1 pescatarian guest.

TR-XXXXXXXX-XXXX

Reservation
     ↓
Unique Reference
     ↓
Customer
     +
Restaurant

Thank you!

Nordic Ember
booking@restaurant.softsolutionsahand.com

Customer name
Booking reference
Date
Time
Number of guests
Seating area
Special requests

Customer
   ↓
Reservation
   ↓
Railway Backend
   ↓
Reservation Created
   ↓
Resend
   ↓
Professional Restaurant Email
   ↓
Customer Inbox

booking@restaurant-name.se

@NordicEmberBot

🔥 Open Restaurant

Telegram
   ↓
Restaurant Bot
   ↓
Mini App
   ↓
Menu + Reservation

t.me/NordicEmberBot/restaurant

Open Telegram
      ↓
@NordicEmberBot
      ↓
🔥 Open Restaurant
      ↓
Book Table
      ↓
Enter reservation
      ↓
Submit
      ↓
Reservation stored
      ↓
Confirmation email received

Responsive Home page
Menu
Navigation
Language selection
Booking form
Telegram Mini App
Confirmation process

Nordic Ember

NORDIC EMBER DEMO

Name:
Nordic Ember

Domain:
Demo / development domain

Email:
booking@restaurant.softsolutionsahand.com

Telegram:
@NordicEmberBot

CUSTOMER RESTAURANT

Name:
Customer's restaurant name

Domain:
Customer's domain

Email:
booking@customer-domain.se

Telegram:
Customer's own bot

Restaurant name
Logo
Colors
Typography
Photos
Food menu
Prices
Opening hours
Languages
Address
Map
Phone number
Email address
Reservation rules
Available booking times
Maximum party size
Seating areas
Special requests
Domain
Confirmation email
Telegram bot

https://restaurant-telegram-mini-app-production.up.railway.app

restaurant-name.se

booking.restaurant-name.se

booking@restaurant.softsolutionsahand.com

booking@customer-domain.se

@NordicEmberBot

@CustomerRestaurantBot

Customer
   ↓
@CustomerRestaurantBot
   ↓
Open Restaurant
   ↓
Customer's Restaurant App

React
TypeScript
Vite
Express
REST APIs
SQLite
Git
DNS records
DKIM
Railway environment variables
Resend API keys

Does the site represent my restaurant well?

Can customers easily see my menu?

Can customers book a table?

Does it work well on mobile?

Can customers receive confirmation?

Can I use my restaurant's name, domain and email?

Can customers access it through Telegram?

Restaurant Owner
       ↓
Provides business requirements
       ↓
Developer
       ↓
Configures application
       ↓
Deploys and tests
       ↓
Restaurant receives working system

Restaurant name
Logo
Photos
Menu
Prices
Opening hours
Contact information
Reservation requirements
Preferred languages
Domain information

I can build restaurant websites.

Here is a working restaurant application.

Open it
Browse it
Use the menu
Make a reservation
Test it on mobile
Open it in Telegram
Receive a confirmation email

softsolutionsahand.com
        ↓
Nordic Ember Project Page
        ↓
Project Description
        ↓
Features
        ↓
Screenshots
        ↓
🚀 Launch Nordic Ember
        ↓
Railway Application

📱 Open Nordic Ember in Telegram
        ↓
t.me/NordicEmberBot/restaurant

Nordic Ember — Restaurant Web App & Telegram Mini App

Nordic Ember is a full-stack restaurant demonstration
application built to show how modern web technologies,
AI-assisted development, cloud deployment and Telegram
can be combined into a complete restaurant experience.

Customers can browse the restaurant, explore the menu,
reserve a table and receive an email confirmation.

The same application can also run directly inside Telegram
as a Mini App.

Responsive restaurant website
Multilingual EN / SV interface
Interactive food menu
Table reservations
Unique booking references
Customer confirmation email
Mobile-friendly design
Telegram Mini App
Cloud deployment

🚀 Launch Nordic Ember Web App

📱 Open Nordic Ember in Telegram

Demonstrate Nordic Ember
        ↓
Restaurant is interested
        ↓
Collect requirements
        ↓
Agree on features
        ↓
Prepare restaurant content
        ↓
Customize design
        ↓
Configure menu
        ↓
Configure reservations
        ↓
Configure domain/email
        ↓
Create Telegram integration if wanted
        ↓
Test
        ↓
Customer approval
        ↓
Production deployment

Restaurant identity
Logo and branding
Food/menu information
Prices
Restaurant photos
Opening hours
Reservation hours
Maximum guests per booking
Available seating areas
Contact details
Domain information
Email requirements
Languages
Telegram requirements

Modern Restaurant UI
        ↓
Responsive Web Application
        ↓
Multilingual Interface
        ↓
Food Menu
        ↓
Table Reservation
        ↓
Backend API
        ↓
Reservation Storage
        ↓
Professional Confirmation Email
        ↓
Cloud Deployment
        ↓
Telegram Mini App

Open Nordic Ember
      ↓
Experience it as a customer
      ↓
Make a reservation
      ↓
Receive confirmation
      ↓
Imagine the same system
with the restaurant's own
brand, menu and domain

Google Stitch
      ↓
Google AI Studio
      ↓
VS Code
      ↓
React + TypeScript
      ↓
Express + SQLite
      ↓
GitHub
      ↓
Railway
      ↓
Resend
      ↓
Miss Hosting / DNS
      ↓
Telegram

Design
   ↓
Frontend
   ↓
Frontend Testing
   ↓
Backend
   ↓
Database
   ↓
Reservation Logic
   ↓
Local Email
   ↓
Deployment
   ↓
Production Email
   ↓
Telegram
   ↓
Mobile Testing

Stitch
   ↓
Design

AI Studio
   ↓
Application Foundation

VS Code
   ↓
Detailed Development

Language handling
Restaurant naming
Dates
Reservation navigation
Buttons
Contact functionality
Booking logic
Email
Backend behavior
Deployment

AI Generates
     ↓
Developer Reviews
     ↓
Developer Tests
     ↓
Problems Identified
     ↓
Developer Improves
     ↓
Test Again

Modify Code
     ↓
Run Locally
     ↓
Test
     ↓
npm run build
     ↓
Fix Problems
     ↓
Commit
     ↓
Push

Application Problem

Deployment / Production Environment Problem

Nodemailer
     ↓
SMTP
     ↓
Gmail

Railway
     ↓
Resend API
     ↓
Customer

Works on localhost
        ≠
Guaranteed to work in production

SMTP credentials
API keys
Bot tokens
Production sender configuration

SMTP_HOST
SMTP_PORT
SMTP_USER
SMTP_PASS

RESEND_API_KEY
RESEND_FROM

TELEGRAM_BOT_TOKEN

Application Code
      ↓
GitHub

Private Configuration
      ↓
Environment Variables

Passwords
SMTP App Passwords
Resend API Keys
Telegram Bot Tokens
Private credentials

.env.example

RESEND_API_KEY=
RESEND_FROM=

TELEGRAM_BOT_TOKEN

Browser
   ↓
Public Information Only

Server
   ↓
Private Credentials

React
→ User Interface

Express
→ Backend Logic

SQLite
→ Reservation Storage

Railway
→ Production Hosting

Resend
→ Production Email

Miss Hosting
→ DNS Management

Telegram
→ Mini App Entry Point

GitHub
→ Source Control

LOCAL
   ↓
Nodemailer
   ↓
SMTP

PRODUCTION
   ↓
Resend

Reservation
     ↓
sendReservationConfirmation()
     ↓
Choose Appropriate Provider

Deploy Crashed!

Something Failed
      ↓
Read Logs
      ↓
Find Actual Error
      ↓
Understand Cause
      ↓
Make Targeted Change
      ↓
Test Again

RESEND_FROM

Deploy Crashed!

RESEND_FROM caused the crash.

Deployment Failed
      ↓
Inspect Logs
      ↓
Identify Actual Error

Telegram Mobile
      ↓
Reservation
      ↓
Railway
      ↓
Resend
      ↓
booking@restaurant.softsolutionsahand.com
      ↓
Customer Email

Does the UI work?
      ↓
Does the reservation API work?
      ↓
Is the reservation stored?
      ↓
Does Railway call Resend?
      ↓
Does Resend accept the email?
      ↓
Does the customer receive it?

Real Mobile Phone
      ↓
Telegram
      ↓
@NordicEmberBot
      ↓
🔥 Open Restaurant
      ↓
Book Table
      ↓
Submit Reservation
      ↓
Railway
      ↓
Reservation API
      ↓
Resend
      ↓
Customer Inbox

Responsive layout
Navigation
Form fields
Buttons
Telegram Web App
Reservation flow
Email confirmation

Add DNS Record
      ↓
Save
      ↓
Refresh
      ↓
Verify Record Still Exists
      ↓
Wait for DNS Propagation
      ↓
Verify in Resend

Website DNS
     ≠
Email Authentication DNS

Working Version
      ↓
Commit
      ↓
Next Change
      ↓
Test
      ↓
Commit

git status

modified:
server/email.ts

new file:
Docs/Nordic_Ember_Complete_Deployment_Railway_Resend_Telegram_Manual.md

git push origin main

Save code to GitHub

Deploy a new production version

Google Stitch
Google AI Studio
VS Code
GitHub
Railway
SMTP
Resend
DNS
Miss Hosting
Telegram
BotFather

Docs/

Why Resend is used
Which environment uses SMTP
Where DNS is managed
Which domain is verified
How Railway is deployed
How Telegram is connected

Railway requires:
RESEND_API_KEY
RESEND_FROM

RESEND_API_KEY=re_actual_private_key_here

Telegram Bot:
@NordicEmberBot

Web Restaurant Application

+

Separate Telegram Restaurant Application

One Nordic Ember Application
        ↑
        │
   ┌────┴────┐
   │         │
Browser   Telegram

React
Express
Railway
SQLite
Resend
DNS

Open Restaurant
      ↓
Choose Table
      ↓
Enter Details
      ↓
Confirm Reservation
      ↓
Receive Email

Stitch
→ Design

AI Studio
→ AI-assisted application creation

VS Code
→ Development

GitHub
→ Source control

Railway
→ Hosting

Resend
→ Transactional email

Miss Hosting
→ DNS

Telegram
→ Mini App distribution

Branding
Menu
Opening hours
Languages
Reservation rules
Domain
Email
Telegram bot

Reusable Architecture
        +
Customer Configuration
        ↓
Customized Restaurant Application

Copy Everything
      ↓
Rewrite Everything

Reservation
      ↓
Storage
      ↓
Email
      ↓
Production
      ↓
Telegram
      ↓
Mobile Test

PLAN
  ↓
BUILD
  ↓
TEST
  ↓
IDENTIFY PROBLEM
  ↓
CHECK LOGS
  ↓
FIX
  ↓
TEST AGAIN
  ↓
DOCUMENT
  ↓
COMMIT
  ↓
DEPLOY
  ↓
TEST PRODUCTION

Design
+
Frontend
+
Backend
+
Data
+
Validation
+
Security
+
Email
+
Deployment
+
DNS
+
Integrations
+
Testing
+
Documentation

AI-Generated Idea
        ↓
Working Prototype
        ↓
Full-Stack Application
        ↓
Cloud Deployment
        ↓
Production Email
        ↓
Telegram Mini App
        ↓
Real Mobile Test
        ↓
Working Customer Experience

React + TypeScript frontend
        ↓
Express backend
        ↓
Reservation system
        ↓
SQLite storage
        ↓
Local SMTP email
        ↓
GitHub
        ↓
Railway deployment
        ↓
Resend production email
        ↓
Verified restaurant email domain
        ↓
Telegram Bot
        ↓
Telegram Mini App
        ↓
Desktop and mobile testing

Restaurant presentation          ✅
Responsive web interface         ✅
English / Swedish                ✅
Food menu                        ✅
Table reservation                ✅
Reservation API                  ✅
Reservation storage              ✅
Unique booking reference         ✅
Local SMTP email                 ✅
Production Resend email          ✅
Verified custom sender           ✅
GitHub source control            ✅
Railway deployment               ✅
Public HTTPS application         ✅
Telegram bot                     ✅
Telegram Mini App                ✅
Desktop testing                  ✅
Mobile testing                   ✅
End-to-end reservation test      ✅
Customer confirmation email      ✅

Restaurant Staff
      ↓
Secure Login
      ↓
Admin Dashboard
      ↓
Reservations

Today's reservations
Upcoming reservations
Customer name
Date
Time
Number of guests
Seating area
Special requests
Booking reference
Reservation status

Pending
Confirmed
Cancelled
Completed
No-show

New Reservation
      ↓
Pending
      ↓
Restaurant Reviews
      ↓
Confirmed

Customer
   ↓
Booking Reference
   ↓
Find Reservation
   ↓
Change Date / Time
        or
Cancel Reservation

Customer Books Table
        ↓
Reservation Created
        ↓
        ├── Customer Confirmation
        │
        └── Restaurant Notification

Booking reference
Customer name
Phone
Email
Date
Time
Guests
Seating area
Special requests

Nordic Ember
      ↓
Express
      ↓
Reservation API
      ↓
PostgreSQL

Admin Dashboard
      ↓
Menu Management
      ↓
Add Dish
Edit Dish
Remove Dish
Change Price
Change Description
Upload Image
Mark Unavailable

Opening hours
Booking hours
Closed days
Holiday schedules
Available time slots
Maximum guests
Minimum advance booking time
Seating areas

Restaurant Configuration
        ↓
Available Dates
        ↓
Available Times
        ↓
Customer Booking Form

Customer selects
Date + Time + Guests
        ↓
Backend checks reservations
        ↓
Capacity available?
       / \
     Yes  No
      ↓    ↓
   Book   Suggest
          another time

Table 1 → 2 guests
Table 2 → 2 guests
Table 3 → 4 guests
Table 4 → 6 guests

Reservation confirmation
Reservation changed
Reservation cancelled
Reminder before reservation
Restaurant cancellation
Important booking update

@NordicEmberBot

Telegram User
      ↓
Nordic Ember Mini App
      ↓
Recognize Telegram Session
      ↓
Improve Customer Experience

https://restaurant-telegram-mini-app-production.up.railway.app

restaurant.softsolutionsahand.com

findflight.softsolutionsahand.com

Nordic Ember
Restaurant Web App & Telegram Mini App

Introduction
      ↓
Main Features
      ↓
Technical Overview
      ↓
Screenshots
      ↓
Launch Web Application
      ↓
Open Telegram Mini App

🚀 Launch Nordic Ember

📱 Open Nordic Ember in Telegram

t.me/NordicEmberBot/restaurant

Nordic Ember is a full-stack restaurant demonstration
application that combines a responsive multilingual
website, digital menu, table reservations, transactional
email and Telegram Mini App integration.

The project demonstrates how AI-assisted design and
development tools can be combined with modern web
technologies to build and deploy a complete restaurant
experience.

Responsive restaurant interface
English / Swedish
Interactive menu
Table reservations
Unique booking references
Customer confirmation email
Cloud deployment
Telegram Mini App
Mobile support

Home
Menu
Book Table
Reservation confirmation
Telegram Mini App
Mobile layout

/empty

Softsolution Sahand portfolio
          +
Telegram Web App preview

Nordic Ember Architecture
        ↓
Customer Requirements
        ↓
Replace Branding
        ↓
Replace Menu
        ↓
Configure Reservations
        ↓
Configure Domain
        ↓
Configure Email
        ↓
Configure Telegram
        ↓
Test
        ↓
Deploy

Nordic Ember Demo
        ↓
Softsolution Sahand Portfolio

Customer Restaurant A
        ↓
Own Deployment
Own Domain
Own Email
Own Database
Own Telegram Bot

Customer Restaurant B
        ↓
Own Deployment
Own Domain
Own Email
Own Database
Own Telegram Bot

/admin
   ↓
Login
   ↓
Authentication
   ↓
Authorized?
  /       \
Yes       No
 ↓         ↓
Admin    Denied
Dashboard

Reservations today
Reservations this week
Popular booking times
Average party size
Cancellation rate
Most requested seating area

Reservation validation
Booking reference generation
Invalid dates
Guest limits
API responses
Email provider selection

Code Change
     ↓
Automated Tests
     ↓
Build
     ↓
Deployment

Deployment failure
Application startup failure
Reservation API error
Database error
Email delivery failure

Where is reservation data stored?

How is it backed up?

How long is it retained?

Who can access it?

How can it be restored?

Customer name
Phone number
Email address
Reservation details
Special requests

Restaurant FAQ assistant
      ↓
Menu questions
      ↓
Dietary information
      ↓
Opening hours
      ↓
Reservation guidance

Customer preferences
      ↓
Menu information
      ↓
AI-assisted dish suggestions

CURRENT VERSION
      ↓
Working Nordic Ember Demo
      ↓
Softsolution Sahand Project Page
      ↓
Custom Demonstration URL
      ↓
Restaurant Admin Dashboard
      ↓
Reservation Management
      ↓
Restaurant Notifications
      ↓
Menu Management
      ↓
Production Database Upgrade
      ↓
Customer Modify / Cancel
      ↓
Automated Testing
      ↓
First Customer-Specific Version

Finalize project documentation
        ↓
Commit documentation changes
        ↓
Create the next stable Git version/tag
        ↓
Create Nordic Ember presentation page
on Softsolution Sahand
        ↓
Link to Web App
        ↓
Link to Telegram Mini App

Nordic Ember

Nordic Ember Architecture
        ↓
Restaurant A
Restaurant B
Restaurant C

Brand
Menu
Domain
Email
Reservations
Telegram Bot

Idea
 ↓
Stitch Design
 ↓
AI Studio Application
 ↓
Frontend Improvements
 ↓
Backend
 ↓
Database
 ↓
Reservation System
 ↓
Local Email
 ↓
GitHub
 ↓
Railway
 ↓
Resend
 ↓
Verified Domain
 ↓
Telegram Bot
 ↓
Telegram Mini App
 ↓
Mobile Test
 ↓
Working Production Demo