🔧 Pibes Mecánicos
The lads' garage — a web app to keep track of your vehicles' maintenance together with your mates.
Never miss a service, an MOT or an oil change again. Responsive web app (installable as a PWA on iPhone and Android) to log and follow the maintenance of cars and bikes: services, MOT/ITV, fuel-ups with real consumption, expenses, spare parts, pending jobs and a lot more. Built for a group of friends who share what they know about their vehicles. 🚗🏍️
✨ Features
🚗 Vehicles
- Cars and bikes, with fuel type and transmission.
- Current mileage and mileage history.
- Maintenance items filtered by vehicle and fuel type (no spark plugs on a diesel, glow plugs only on diesel, chain and sprocket kit only on bikes, and so on).
- Over 18 maintenance types with intervals by mileage and by months. You can log by mileage only, by date only, or both.
- Spare parts with part number and a link to buy them.
- MOT / ITV with the result (pass / advisory / fail), defects, expiry date and warnings before it runs out.
- Fuel-ups with per-tank consumption, driving mode (city / mixed / motorway) and average consumption.
- Expenses with monthly and per-category charts, plus cost per kilometre.
- To-do list per vehicle with priority (low / medium / high).
📊 Overview
- Aggregated stats across all your vehicles: total spend, maintenance, fuel, total kilometres.
- Expense table per vehicle with cost/km.
- Monthly spending charts and distribution per vehicle.
🔔 Reminders and notifications
- Personal reminders with a date and an optional vehicle (insurance, MOTs, purchases…).
- Notification centre with overdue and upcoming maintenance, MOTs about to expire, reminders and group invites. Updates instantly.
👥 Groups
- Users request a group; an admin approves it.
- Whoever created it becomes the group admin and can invite others.
- Invited people choose whether to join.
- Group chat and a read-only viewer for the members' vehicles.
🔧 Workshops
- Shared directory of garages with rating, speciality and phone number.
- Direct call and WhatsApp buttons.
🛡️ Admin panel
- User management split into administrators and users.
- Create, edit (name, username, role) and delete users.
- Reset a PIN directly, or force a PIN change.
- Approve / reject group requests.
- Global stats with charts.
📄 Export
- Polished PDF with a cover page, KPIs, general status and detailed sections.
- Styled Excel (one sheet per section, colours, totals, number formats).
🎨 Other
- Dark theme (default) and light theme, with a toggle.
- Spanish UI, dates in DD/MM/YYYY.
- Login with username + PIN and progressive lockout after failed attempts.
- Mobile-first design with bottom navigation on phones.
🛠️ Tech stack
| Layer | Technology |
|---|
| Frontend | React 19 + Vite |
| Icons | lucide-react |
| Charts | recharts |
| PDF | jspdf + jspdf-autotable |
| Excel | exceljs |
| Database | Supabase (PostgreSQL) |
| Hosting | GitHub Pages (auto-deployed with GitHub Actions) |
🚀 Getting started
1. Database (Supabase)
- Create a project at supabase.com.
- Open the SQL Editor and run the contents of
supabase/schema-completo.sql. It is idempotent: it creates every table, index, policy and permission, along with a default admin user (admin / 1234).
- In Project Settings → API, copy the
URL and the anon key.
2. Environment variables
On GitHub, go to Settings → Secrets and variables → Actions and create:
VITE_SUPABASE_URLVITE_SUPABASE_ANON_KEY
For local development, create a .env file in the root:
VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-key
3. Local development
npm install
npm run dev
4. Deployment
Every push to the master branch deploys automatically to GitHub Pages through the workflow in .github/workflows/.
🗄️ Database migrations
supabase/schema-completo.sql holds the complete, up-to-date schema. For incremental changes on an existing database there are individual migrations inside supabase/ that you can run in the SQL Editor.
ℹ️ Supabase note (Oct 2026): from 30/10/2026 Supabase no longer exposes new tables to the API automatically. The schema already includes the explicit GRANTs and default privileges needed, so tables you create stay reachable. If in doubt, run supabase/migration-grants.sql.
🔐 Default access
⚠️ Change the admin PIN the first time you log in.
📁 Project layout
src/
App.jsx # View routing, theme, PIN change
lib/
supabase.js # Every database function
theme.js # Reactive dark/light theme
constants.js # Maintenance types, date helpers
pdfExport.js # PDF export
excelExport.js # Excel export
useIsMobile.js # Responsive hook
components/
Login.jsx # Login + lockout on failed attempts
Nav.jsx # Navigation (top on desktop, bottom on mobile)
Dashboard.jsx # Vehicle list
CarDetail.jsx # Vehicle detail with tabs
UserStats.jsx # Global overview
Reminders.jsx # Personal reminders
Groups.jsx # Groups, invites and chat
Workshops.jsx # Garage directory
AdminPanel.jsx # Admin panel
NotificationCenter.jsx# Notification centre
...
supabase/
schema-completo.sql # Full schema (run this first)
migration-*.sql # Incremental migrations
Made with 🔧 and 🍺 for los pibes.
