Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Niurka77/tf-app/llms.txt

Use this file to discover all available pages before exploring further.

TF-App separates its concerns into two main areas: the web source under src/ (where all development happens) and the Android wrapper under android/ (generated and managed by Capacitor). Day-to-day work — adding views, modifying logic, updating styles — happens entirely in src/. The android/ project is only touched when configuring native Android settings or building a release APK in Android Studio. Everything else, including the dist/ production bundle, is derived from the source and should never be hand-edited. 
tf-app/
├── public/                        # Static assets served as-is by Vite
│   └── vite.svg                   # Default Vite logo asset
├── src/
│   ├── views/
│   │   ├── login.html             # Login / sign-in screen
│   │   ├── dashboard.html         # Main dashboard view
│   │   └── cargando.html          # Loading / splash transition view
│   ├── main.js                    # App logic: auth handler, showMessage modal
│   ├── counter.js                 # Counter utility export
│   └── style.css                  # Global stylesheet
├── dist/                          # Production build output (gitignored)
├── android/                       # Capacitor-generated Android project (gitignored)
│   └── app/src/main/
│       └── AndroidManifest.xml    # Android app manifest
├── index.html                     # Vite entry HTML — loads src/main.js
├── capacitor.config.json          # Capacitor settings (appId, webDir, plugins)
└── package.json                   # Dependencies and npm scripts

​
src/views/

The views/ directory holds every HTML screen in the application. Each file is a self-contained page styled with Tailwind CSS (loaded from CDN) and Font Awesome icons.
FilePurpose
login.htmlThe DNI-based sign-in screen. Contains the login form wired to main.js and the messageModal overlay used by showMessage().
dashboard.htmlThe main hub displayed after a successful login.
cargando.htmlA loading/transition screen shown while the app initialises, coordinated with the Capacitor SplashScreen plugin.
You modify files in src/views/ whenever you need to change the UI layout, add a new screen, update form fields, or adjust page-level styles.

​
src/main.js

main.js is the central JavaScript module that powers the application’s interactive behaviour. It performs two responsibilities: showMessage(title, message) — A custom modal utility that replaces the browser’s native alert(). It reads three elements from the DOM (messageModal, messageModalTitle, messageModalBody, messageModalCloseButton), sets their text content, and toggles a hidden Tailwind class to show or hide the overlay. This approach works identically in a desktop browser and in Android’s WebView. Login form handler — Registered via DOMContentLoaded, it listens to the #loginForm submit event, validates that neither field is empty, and checks the supplied credentials against the demo values. A comment block in the source marks exactly where a real fetch() call to an authentication API should replace the hardcoded check. Edit src/main.js when you need to change authentication logic, add form validation, wire up new UI interactions, or integrate a backend API.
The demo credentials (usuario / contraseña) are defined directly in main.js. Remove them and replace the credential block with an authenticated API request before deploying to a production environment.

​
Entry Point — index.html

index.html at the project root is the application’s default landing page — the login screen. It is a self-contained HTML file that loads Tailwind CSS from CDN, Font Awesome icons, and the Montserrat font. It contains the full sign-in form (DNI field, password field, “Remember me” checkbox, and forgot-password link) along with the branded green wave SVG decorations. Vite uses index.html as its build entry point: during npm run build, Vite processes this file and outputs the bundled result into dist/. During development (npm run dev), Vite serves it directly from the project root. Modify index.html when you need to update the page <title>, add global <meta> tags, change the login form layout, update the wave decorations, or include additional third-party scripts at the document level.

​
capacitor.config.json

This file controls how Capacitor bridges the web project to the native Android layer. Key settings from the current configuration: 
{
  "appId": "com.example.app",
  "appName": "tf-app",
  "webDir": "dist",
  "server": {
    "android": {
      "cleartext": true
    }
  },
  "plugins": {
    "SplashScreen": {
      "launchShowDuration": 2000,
      "launchAutoHide": true,
      "backgroundColor": "#1E88E5",
      "splashFullScreen": true,
      "splashImmersive": true
    }
  }
}
SettingEffect
appIdReverse-domain identifier for the Android app. Change this to your organisation’s domain before publishing to the Play Store.
webDirTells Capacitor which folder to copy into the Android WebView assets. Must match Vite’s output directory (dist).
server.android.cleartextAllows unencrypted HTTP traffic on Android. Set to false and use HTTPS endpoints in production.
SplashScreenConfigures the native splash shown on cold start — duration, background colour, full-screen immersive mode, and the blue-to-dark-blue gradient.
Edit capacitor.config.json when you change your app identifier, update splash screen colours, add new Capacitor plugin settings, or modify network security behaviour.

​
android/

The android/ directory is the full Android Studio project generated by Capacitor. It contains Gradle build files, the AndroidManifest.xml, and all native Java/Kotlin scaffolding needed to wrap the web app in a WebView. You typically do not edit files here directly. The workflow is:
  1. Make changes in src/.
  2. Run npm run build to update dist/.
  3. Run npx cap sync to copy dist/ into android/app/src/main/assets/public/ and update native plugin references.
  4. Open in Android Studio (npx cap open android) only when you need to configure native settings, add Android permissions, or build a signed release.
The android/ directory is listed in .gitignore and is not committed to the repository. It is regenerated by running npx cap add android on a fresh clone.

​
dist/

The dist/ folder is created by npm run build and contains the fully optimised, production-ready web bundle that Capacitor copies into the Android project. It is the only folder that capacitor.config.json’s webDir points to.
dist/ is listed in .gitignore and should never be committed to Git. It is always reproducible from the source files by running npm run build, and committing it would cause unnecessary merge conflicts and bloat the repository history.

Build docs developers (and LLMs) love

Get started for freeTalk to us