A Telegram Mini App for investment calculations and financial planning. This application helps users calculate compound interest, plan investments, and analyze potential returns on their financial investments.

🧮 Investment Calculator

• Calculate compound interest with regular monthly contributions
• Adjustable interest rates from 0.1% to 15% per month
• Investment period planning (1-12 months)
• Real-time calculation updates
• Visual breakdown of invested capital vs. earned interest

💰 Financial Planning

• Initial capital input with validation
• Monthly contribution planning
• Expected return calculations
• Total investment summary

🎨 Modern UI/UX

• Clean, intuitive interface using Telegram UI components
• Dark/light theme support
• Responsive design for all devices
• Native Telegram Mini App integration

This application is built using modern web technologies:

• Frontend: React 18 with TypeScript
• Build Tool: Vite 6 with SWC compiler
• UI Library: Telegram UI + Radix UI
• SDK: @telegram-apps SDK
• Styling: Tailwind CSS 4 with BEM methodology
• Icons: Lucide React
• Testing: Vitest with React Testing Library
• Linting: ESLint with TypeScript and Prettier integration

This project uses npm as the package manager. Using other package managers may cause compatibility issues.

• Node.js 18 or higher
• npm (comes with Node.js)

1. Clone the repository:

git clone <repository-url>
cd telegram-finance-informer/telegram-app/frontend

2. Install dependencies:

npm install

Before using this application in Telegram, you need to create a Telegram Bot and Mini App. Follow the comprehensive guide for detailed instructions.

The application can be run both inside and outside of Telegram during development:

For full Telegram Mini App functionality, use HTTPS:

npm run dev:https

Note: On first run, you may be prompted for administrator password to install SSL certificates via vite-plugin-mkcert.

For basic development without SSL:

npm run dev

After starting the development server, you'll see output similar to:

VITE v6.2.4 ready in 237 ms

➜  Local:   https://localhost:5173/
➜  Network: https://192.168.1.100:5173/

• Local: Access from your development machine
• Network: Access from other devices on the same network (useful for mobile testing)

The application includes a mock Telegram environment (src/mockEnv.ts) that allows development outside of Telegram. This simulates the Telegram SDK functionality for development purposes.

Warning: The mock environment should not be used in production. It's automatically disabled when the app runs inside actual Telegram clients.

The application is configured for deployment to GitHub Pages, which provides fast CDN delivery. You can also deploy to other platforms like Vercel or Netlify.

Before deploying, ensure the following configuration is correct:

1. package.json: Update the homepage field to match your GitHub Pages URL:

{
  "homepage": "https://yourusername.github.io/repository-name"
}

2. vite.config.ts: Set the base field to your repository name:

export default defineConfig({
  base: '/repository-name/',
  // ...
});

1. Build the application:

npm run build

2. Deploy to GitHub Pages:

npm run deploy

The project includes a GitHub Actions workflow that automatically deploys when changes are pushed to the master branch.

To enable automatic deployment:

1. Go to your repository settings: https://github.com/username/repository/settings/environments
2. Create or edit the github-pages environment
3. Add master to the deployment branches list

src/
├── components/          # React components
│   ├── App.tsx         # Main application component
│   └── Root.tsx        # Application root wrapper
├── pages/              # Page components
│   └── IndexPage/      # Investment calculator page
├── helpers/            # Utility functions
│   └── numbers.ts      # Number formatting and validation
├── navigation/         # Routing configuration
├── css/               # CSS utilities and styles
├── test/              # Test configuration
├── index.tsx          # Application entry point
└── init.ts            # Telegram SDK initialization

• Platform documentation
• @telegram-apps/sdk-react documentation
• Telegram developers community chat