Skip to content

chicho69-cesar/expense-tracker

Repository files navigation

💸 Expense Tracker - Control de gastos personales

Expense Tracker es una aplicación web sencilla y moderna para llevar el control de tus ingresos y egresos. Permite visualizar tu balance, registrar movimientos fácilmente y mantener tus finanzas personales organizadas.

🔗 Demo en vivo: Expense Tracker


📸 Capturas de pantalla

📊 Dashboard

Dashboard

➕ Agregar gasto o ingreso

Agregar Movimiento

✨ Categorías de gastos

Agregar Movimiento


🚀 Características

  • ✅ Registro de ingresos y gastos.
  • ✅ Autenticación de usuario con Firebase.
  • ✅ Base de datos en tiempo real (Firestore).
  • ✅ Visualización del balance actual.
  • ✅ Diseño responsivo y limpio con TailwindCSS.
  • ✅ Almacenamiento de transacciones por usuario.
  • ✅ Interfaz amigable y minimalista.

🛠️ Tecnologías utilizadas

Tecnología Descripción
React Biblioteca para construir interfaces de usuario.
Firebase Autenticación y base de datos (Firestore).
Tailwind CSS Utilidades para estilos rápidos y modernos.
React Router Navegación entre páginas.
Vite Herramienta rápida de desarrollo.

📦 Instalación local

# Clona el repositorio
git clone https://github.com/chicho69-cesar/expense-tracker.git
cd expense-tracker

# Instala las dependencias
npm install

# Crea un archivo .env con tus credenciales de Firebase
cp .env.example .env

# Ejecuta el servidor de desarrollo
npm run dev

La app se abrirá en http://localhost:5173

🔐 Configuración de Firebase

  • Crea un proyecto en Firebase Console.
  • Habilita Authentication (Email/Password).
  • Crea una base de datos Cloud Firestore.
  • Copia las credenciales del SDK de Firebase y pégalas en tu archivo .env

📂 Estructura del proyecto

expense-tracker/
│
├── src/
│   ├── assets/              # Imágenes y fuentes
│   ├── components/          # Componentes personalizados
│   ├── constants/           # Constantes para el proyecto
│   ├── context/             # Contexto global
│   ├── firebase/            # Configuración del proyecto de firebase
│   ├── helpers/             # Funciones helpers para el proyecto
│   ├── hooks/               # Custom hooks
│   ├── pages/               # Páginas principales
│   ├── routers/             # Configuración de las rutas
│   ├── services/            # Configuración de los servicios de la app
│   ├── App.jsx              # Componente principal
│   └── main.jsx             # Punto de entrada
├── .env                     # Variables de entorno
├── tailwind.config.js       # Configuración de Tailwind
└── package.json             # Dependencias y scripts

🤝 Contribuciones

¡Toda contribución es bienvenida! Si quieres colaborar:

  • Haz un fork del proyecto.
  • Crea una nueva rama (git checkout -b feature/nueva-funcionalidad).
  • Realiza tus cambios.
  • Abre un pull request con una descripción clara.

About

Tracker de gastos para administrar las finanzas y los gastos personales, construido con React, JavaScript, Tailwindcss y Firebase.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages