https://github.com/marcelosanchezdev/bobioproject

Last synced: 23 days ago
JSON representation
Host: GitHub
URL: https://github.com/marcelosanchezdev/bobioproject
Owner: MarceloSanchezDev
Created: 2025-06-26T19:56:42.000Z (12 months ago)
Default Branch: main
Last Pushed: 2026-05-28T18:07:14.000Z (28 days ago)
Last Synced: 2026-05-28T20:09:09.425Z (28 days ago)
Language: JavaScript
Homepage: https://www.bobbio.com.ar
Size: 3.4 MB
Stars: 0
Watchers: 0
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
Awesome Lists containing this project

README

          # Bobbio Project

> ERP liviano para PYMEs: ventas, inventario, finanzas, reportes y más. Construido con **React + Vite** y backend serverless con **Firebase**.

![Bobbio Banner](./docs/banner.png)



  Características •

  Demo •

  Stack •

  Inicio rápido •

  Scripts •

  Testing •

  Estructura •

  Despliegue •

  Roadmap



---

![Build](https://img.shields.io/badge/build-vite%206-success)

![React](https://img.shields.io/badge/react-19-61dafb)

![Firebase](https://img.shields.io/badge/firebase-11-ffca28)

![Tests](https://img.shields.io/badge/tests-vitest%20%2B%20RTL-8A2BE2)

![License](https://img.shields.io/badge/license-MIT-informational)

## 🚀 Estado

Proyecto activo en desarrollo.

## ✨ Características

- **Autenticación** con Firebase Authentication (email/password, Google, etc.).

- **Gestión de Ventas** y **Productos** con filtros y paginación.

- **Inventario**: altas/bajas, alertas por stock bajo (en progreso).

- **Reportes**: métricas y panel visual (gráficos), selector de fechas con `react-calendar`.

- **UI responsiva** con Bootstrap 5 + React-Bootstrap.

- **Ruteo** con React Router v7.

- **Arquitectura modular** y contextos para estado global.

## 🧪 Demo

> _Opcional:_ agrega aquí el link cuando esté público (Vercel/Firebase Hosting).

- Producción: **[https://…](#)**

- Staging: **[https://…](#)**

## 🧰 Stack



- **Frontend**: React 19, Vite 6, React Router v7, React-Bootstrap, Bootstrap 5.

- **Estado**: Context API / hooks.

- **Backend/DB**: Firebase 11 (Auth, Firestore, Storage) _(ajusta según uso real)_.

- **Utilidades**: `react-calendar` para rangos de fechas.

- **Calidad**: ESLint 9.

- **Testing**: Vitest 3, React Testing Library, Jest-DOM, JSDOM.

## ⚙️ Requisitos previos

- **Node.js ≥ 18** (recomendado LTS).

- **npm** ≥ 9 o **pnpm/yarn** (a gusto).

- Cuenta de **Firebase** con un proyecto creado.

## 🏁 Inicio rápido



```bash

# 1) Clonar

git clone https://github.com/tu-usuario/bobbio-project.git

cd bobbio-project

# 2) Instalar dependencias

npm install

# 3) Variables de entorno

cp .env.example .env.local

# Completar credenciales Firebase en .env.local

# 4) Ejecutar en desarrollo

npm run dev

# abre http://localhost:5173

```

### 🔐 Variables de entorno

> Vite expone variables con prefijo `VITE_`. No subas `.env.local` al repo.

```dotenv

# .env.example

VITE_FIREBASE_API_KEY=

VITE_FIREBASE_AUTH_DOMAIN=

VITE_FIREBASE_PROJECT_ID=

VITE_FIREBASE_STORAGE_BUCKET=

VITE_FIREBASE_MESSAGING_SENDER_ID=

VITE_FIREBASE_APP_ID=

# Si usas Analytics u otros servicios, agrégalos aquí

```

### 🔧 Configuración de Firebase (resumen)

1. Crea un proyecto en **Firebase Console**.

2. Agrega una **app web** y copia las credenciales al `.env.local` (ver arriba).

3. Habilita **Authentication** (proveedores que uses).

4. Crea **Firestore** en modo de seguridad apropiado (reglas estrictas en prod).

5. (Opcional) Configura **Storage** para subir archivos/imagenes.

## 📜 Scripts disponibles



Del `package.json`:

```json

{

  "dev": "vite",

  "build": "vite build",

  "preview": "vite preview",

  "lint": "eslint .",

  "test": "vitest",

  "test:ci": "vitest run --coverage"

}

```

- `npm run dev` — servidor de desarrollo.

- `npm run build` — build de producción en `dist/`.

- `npm run preview` — sirve el build localmente.

- `npm run lint` — corre ESLint.

- `npm test` — corre Vitest en modo watch.

- `npm run test:ci` — corre tests una vez con **coverage**.

## 🧪 Testing



Este proyecto usa **Vitest + React Testing Library** y **jest-dom** con **jsdom**:

- Render con `render(...)` y consultas `getBy*/queryBy*/findBy*`.

- Interacciones de usuario con `@testing-library/user-event`.

- Asincronía con `waitFor`/`findBy*`.

- Cobertura con `@vitest/coverage-v8`.

Ejemplos mínimos:

```ts

// src/components/Example/Example.test.tsx

import { render, screen } from "@testing-library/react";

import userEvent from "@testing-library/user-event";

import Example from "./Example";

test("muestra el título y reacciona al click", async () => {

  render();

  expect(screen.getByRole('heading', { name: /example/i })).toBeInTheDocument();

  await userEvent.click(screen.getByRole('button', { name: /sumar/i }));

  expect(await screen.findByText(/total: 1/i)).toBeVisible();

});

```

> **Consejos**: testea por comportamiento (accesible) y no por implementación; usa roles/labels; evita IDs frágiles.

## 📁 Estructura de carpetas



```

├─ public/

├─ src/

│  ├─ assets/

│  ├─ components/

│  │  └─ Example/

│  ├─ context/

│  ├─ hooks/

│  ├─ pages/

│  ├─ routes/

│  ├─ services/    # firebase.ts, api wrappers

│  ├─ utils/

│  ├─ styles/

│  ├─ App.tsx

│  └─ main.tsx

├─ tests/           # (opcional) helpers/mocks

├─ .env.example

├─ .env.local       # (gitignored)

├─ vite.config.ts

└─ package.json

```

## 🚢 Despliegue



### Opción A) Vercel (SPA React)

1. Conecta el repo a **Vercel**.

2. Framework Preset: **Vite**.

3. Variables de entorno: pegar las `VITE_*`.

4. Build Command: `npm run build` • Output Dir: `dist`.

### Opción B) Firebase Hosting

1. `npm i -g firebase-tools` y `firebase login`.

2. `firebase init hosting` (selecciona proyecto existente).

3. Configura **public** = `dist` y `Single Page App` = `yes`.

4. `npm run build` y `firebase deploy`.

> Asegúrate de configurar headers de caché y reglas de seguridad adecuadas.

## 🧹 Calidad y estilo

- **ESLint**: `npm run lint` (plugins: react-hooks, react-refresh).

- (Opcional) Agrega **Prettier** si prefieres formateo consistente.

## 🔒 Seguridad

- Mantén las **reglas de Firestore/Storage** estrictas.

- No subas secretos al repo. Usa `.env.local` y secretos de CI/CD.

- Revisa dependencias con `npm audit` periódicamente.

## 🗺️ Roadmap



- [ ] Panel de KPIs con gráficos (ventas por período, top productos).

- [ ] Roles y permisos (admin/operador/consulta).

- [ ] Alertas de stock bajo + notificaciones.

- [ ] Importación/exportación CSV.

- [ ] i18n (ES/EN).

- [ ] Tests E2E (Playwright/Cypress).

## 🤝 Contribuir

1. Haz un fork y crea tu rama: `git checkout -b feature/mi-feature`.

2. Corre lint/tests antes de pushear.

3. Abre un PR describiendo cambios y screenshots.

## 📜 Licencia

MIT © 2025 Marcelo Sánchez

## 👤 Autor

**Marcelo Sánchez**

- GitHub: [@MarceloSanchezDev](https://github.com/MarceloSanchezDev)

- Web: [marcelosanchezdev.com.ar](https://marcelosanchezdev.com.ar)

- LinkedIn: _(agrega link)_

## 📎 Recursos

- [Documentación de Vite](https://vitejs.dev/)

- [React Router](https://reactrouter.com/)

- [Firebase](https://firebase.google.com/docs)

- [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)

---

> _Tip_: guarda los screenshots en `./docs/` y referencia imágenes reales del sistema (pantallas de login, dashboard, reportes).
ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/marcelosanchezdev/bobioproject

Awesome Lists containing this project

README
