Teofin - React Mobile Banking App

1. Folder structure

• assets: Contains static files such as images, icons, and fonts.
• components: Contains reusable UI components.
• scss: Contains SCSS files for styling.
• hooks: Contains custom React hooks.
• items: Contains specific items or modules related to the application.
• modules: Contains scss modules for styling.
• navigation: Contains navigation components and configurations.
• routes: Contains route definitions for the application.
• screens: Contains screen components for different views or pages.
• store: Contains Redux store configuration and slices.
• types: Contains TypeScript type definitions.
• utils: Contains utility functions and helpers.

main.tsx and App.tsx are the main entry points of the project. main.tsx initializes the application and renders the root component, while App.tsx serves as the primary component that defines the app's structure and routing.

2. 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

3. Install dependencies

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

4. 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.

5. Change Assets

All project assets are located in the src/assets folder. The svg subfolder contains React 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 SCSS for styling. Global styles and variables are located in the src/scss folder.

To customize colors, fonts, and other design tokens, edit the SCSS variables in the corresponding files. Changes will be automatically reflected throughout the application.

Component-specific styles are stored in the src/modules folder as SCSS modules, allowing for scoped styling without conflicts.

7. 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 React 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

8. 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.

9. 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:

• react-redux
• redux-persist
• redux-toolkit
• sass
• motion
• react-device-detect

The project uses the following font:

• Mulish