Teofin - Vue Mobile Banking App

1. Important Requirements

The project is built with the following versions:

Node.js: Version 24 or higher is required to run the project. [Node.js Official Site]
Vuew: The project is built with Vue 3 . [Vue Official Site]
npm: Version 11 was used for dependency management. [npm Official Site]

Please ensure your development environment matches these versions for optimal compatibility and performance.

To check your installed versions, run: node -v , npm -v in your terminal. If you need to update, follow the links above to download the latest versions.

2. Folder structure

• src / assets: Contains static files such as images, icons, and fonts.
• src / components: Contains reusable UI components.
• src / constants: Contains reusable constants used throughout the application.
• src / css: Contains CSS files for styling.
• src / items: Contains specific items or modules related to the application.
• src / router: Contains router configuration and route definitions.
• src / screens: Contains screen components for different views or pages.
• src / stores: Contains Pinia stores.
• src / types: Contains TypeScript type definitions.
• src / utils: Contains utility functions and helpers.

main.ts and App.vue are the core entry files of a Vue application.
main.ts is responsible for initializing the Vue app and mounting the root component.
App.vue is the main component that defines the overall structure and routing of the application.

3. Install environment

Your computer should have Node.js (version 24 or higher) and npm installed to manage the dependencies. You can download Node.js (which includes npm) from the following link: Node.js

To verify your installation, run the following commands in your terminal: node -v and npm -v

4. Install dependencies

To install the project dependencies, run the following command in the project directory: npm install

This command will install all the necessary dependencies for the project.

5. Change Assets

All project assets are located in the src/assets folder. The svg subfolder contains Vue components for vector graphics.

To replace an asset, simply swap the corresponding file with your own, ensuring the file name and format remain the same for proper functionality.

Additionally, some images in the project are loaded via external URLs. To replace these, locate the relevant URL in the code and update it with your new image link.

6. Customization

The project uses both global and screen-specific styles. Global styles and variables are located in the src/css folder and apply to the entire application. In addition, each screen (or page) can have its own styles stored in the src/screens folder, allowing for scoped styling without conflicts between different components.

The image below shows an example of global CSS files located in the src/css folder.

The image below shows an example of screen-specific CSS files located in the src/screens folder.

7. Run the project

To run the project, use the following command: npm run dev

The development server will start at http://localhost:5173 by default.
The page will automatically reload when you make changes to the code.

8. Build the project

When you're ready to deploy your application, create an optimized production build by running: npm run build

This command compiles your Vue application, minifies the code, and optimizes assets for the best performance. The build process may take a few minutes depending on your project size.

After the build completes, a dist folder will be created containing all the production-ready files. You can preview the build locally before deployment by running: npm run preview

9. Deploy the project

Once the build is complete, the dist folder contains all the static files needed for deployment. You can host your application on any static hosting service.

Popular hosting platforms for React applications:

• Vercel — Zero-config deployment with automatic CI/CD
• Netlify — Simple drag-and-drop or Git-based deployment
• GitHub Pages — Free hosting for static sites (requires additional configuration for SPA routing)

To deploy manually, upload all contents from the dist folder to your web server's public directory (e.g., public_html or www ). Ensure your server is configured to serve index.html for all routes to enable client-side routing.

10. API Usage

By default, the application uses mock data provided by a fake API located in the src/api folder. This approach allows you to develop and test the app’s features without connecting to a real backend server.

The src/api directory contains the following JSON files, each representing a specific data set used throughout the application:

- cards.json
- currencies.json
- notifications.json
- transactions.json
- rates.json
- deposits.json
- moneyboxes.json

11. API Integration

To integrate APIs into your application, you can call them directly inside your Vue components using axios or another HTTP client. Simply place your API requests in the onMounted lifecycle hook or a component method to fetch and handle data as needed. For example, you can easily fetch transactions and display them in your component:

12. Support and Dependencies

If you have any questions or need support, please contact me via email: kul.giorgi@gmail.com
The project uses the following dependencies:

• pinia
• motion
• vue-router

The project uses the following font:

• Mulish

13. Changelog

Version 1.0.0 – Initial Release (March 23, 2026)

- 35+ mobile-ready screens included
- Fully responsive and optimized UI
- Authentication (Sign in / Sign up / OTP)
- Clean and modern design
- Easy to customize and extend
- Built with Vue 3 and Vite