TF-App is a hybrid real estate management application designed for sales teams that need a single, consistent tool across both browser and Android device. Built on Vite with Vanilla JavaScript, it packages the same web codebase into a native Android APK using Capacitor — meaning you write and maintain one set of source files while deploying to two platforms. The app covers the core workflow of a real estate operation: agent login with DNI credentials, a dashboard overview, sales and commission tracking, and GPS-based property geolocation.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.
Quickstart
Clone the repo, install dependencies, and run the dev server in five minutes.
Project Structure
Understand the directory layout, source views, and Capacitor config.
Android Setup
Build the production bundle and deploy it to Android Studio via Capacitor.
Authentication
How DNI-based login works and where to plug in a real API.
Core Capabilities
TF-App ships with the following features out of the box:- DNI Login — Agents authenticate with a national ID number and password through a polished, mobile-first sign-in screen with wave-styled branding.
- Dashboard — A central hub view that gives agents a snapshot of their activity after login.
- Sales & Commissions Tracking — Views for recording property sales and calculating the resulting agent commissions.
- Geolocation — GPS integration to associate properties with their real-world coordinates, surfaced through Capacitor’s native device APIs.
- Loading / Splash Screen — A dedicated splash view (
cargando.html) coordinated with Capacitor’sSplashScreenplugin for a smooth cold-start experience on Android. - Android Packaging — The entire web app is wrapped into a native Android project via
@capacitor/android, distributable as a standard APK. - Custom Modal System — A
showMessage()utility replaces browseralert()dialogs for a consistent, mobile-friendly notification experience across web and Android.
Technology Stack
| Layer | Technology |
|---|---|
| Build tool | Vite v7 — instant HMR dev server and optimized production bundler |
| Language | Vanilla JavaScript (ES modules, type="module") |
| Styling | Tailwind CSS loaded via CDN — no PostCSS build step required |
| Native bridge | Capacitor v7 (@capacitor/core, @capacitor/android, @capacitor/splash-screen) |
| Native IDE | Android Studio — opens and builds the generated android/ project |
Tailwind CSS is loaded from the CDN in each HTML view. This is intentional for a lightweight setup, but for a production app with a custom design system you may want to switch to the PostCSS plugin and purge unused classes at build time.
Project Status
TF-App is an educational project developed as a learning exercise in hybrid mobile development. It uses hardcoded demo credentials (usuario / contraseña) to simulate authentication — there is no live backend. Before deploying this app to real users, you must:
- Replace the credential check in
src/main.jswith an authenticated API call to your own server. - Change the
appIdincapacitor.config.jsonfromcom.example.appto your organization’s reverse-domain identifier. - Review the
cleartext: trueflag incapacitor.config.json(Android network security) and switch to HTTPS endpoints in production.
The
android/ directory and dist/ folder are listed in .gitignore and are not committed to the repository. You must run npm run build and npx cap sync locally to regenerate them after cloning.