Paisable is a full-stack personal finance management app built with React (frontend), Node.js/Express (backend), MongoDB (database), and enhanced with Google Gemini AI for OCR-based receipt scanning. It helps users track income, expenses, receipts, and visualize financial analytics via charts.
- Authentication – JWT-based login & signup
- Transactions Management – Add income and expenses with categories
- Analytics & Charts – Visual breakdown by category, income/expense trends
- Receipt Management – Upload receipts and automatically extract expense details using Google Gemini OCR
- Full-Stack Deployment Ready – Backend on Render, frontend on Netlify
- Account Settings – View your profile and delete your account permanently from the app.
- Frontend: https://paisable.netlify.app/
- Backend: https://paisable.onrender.com
Frontend:
- React + Vite
- React Router
- Axios
- TailwindCSS
Backend:
- Node.js + Express
- MongoDB + Mongoose
- JWT Authentication
- Multer (for file uploads)
- Google Gemini AI SDK (for OCR)
Dev Tools:
- Nodemon
- dotenv
Hosting:
- Frontend → Netlify
- Backend → Render
- Database → MongoDB Atlas
.
├── backend/
│ ├── server.js # Express app entry
│ ├── package.json
│ ├── config/
│ │ └── db.js
│ ├── routes/
│ │ ├── authRoutes.js
│ │ ├── transactionRoutes.js
│ │ ├── receiptRoutes.js
| | └── userRoutes.js
│ ├── middleware/
│ ├── controllers/
│ ├── models/
│ └── uploads/ # static served files (receipts)
│
├── docs/
│ ├── openapi.yaml
│
├── frontend/
│ ├── src/
│ │ ├── pages/
│ │ ├── components/
│ │ ├── contexts/
│ │ └── api/
│ │ └── config/
│ │ └── hooks/
│ ├── App.jsx
│ ├── main.jsx
│ ├── package.json
│ ├── vite.config.js
│ ├── tailwindcss.config.js
│
└── README.md
Before cloning, make sure to fork the repository to your GitHub account.
- Go to the GitHub repo page: https://github.com/Code-A2Z/paisable
- Click Fork in the top-right corner.
git clone https://github.com/your-username/paisable.git
cd paisablecd backend
npm installCreate a .env file in the backend/ folder:
PORT=5000
MONGO_URI=your-mongodb-atlas-uri
JWT_SECRET=your-secret-key
GEMINI_API_KEY=your-gemini-api-key
KEEP_ALIVE_URL=http://localhost:5000 Start the backend:
npm run devBackend will run on → http://localhost:5000
cd frontend
npm installCreate a .env file in the frontend/ folder:
VITE_API_URL=http://localhost:5000Start the frontend:
npm run devFrontend will run on → http://localhost:5173
The full API reference is defined in OpenAPI 3.0 format.
See the file → docs/openapi.yaml
You can:
- Open it in Swagger Editor
- Import into Postman or Insomnia
POST /api/auth/signup→ Register new userPOST /api/auth/login→ Login userGET /api/auth/me→ Fetch logged-in user profile
GET /api/transactions→ Get all transactions (paginated)POST /api/transactions→ Create a new transactionGET /api/transactions/summary→ Get income, expense, balance, and recent transactionsGET /api/transactions/charts→ Get data for dashboard chartsGET /api/transactions/categories→ Get unique transaction categoriesDELETE /api/transactions/category→ Delete a custom category
GET /api/analytics/summary→ Income vs Expense summaryGET /api/analytics/categories→ Expense breakdown by category
POST /api/receipts/upload→ Upload receipt, trigger Gemini OCR, and create a transaction in one step
DELETE /api/users/account→ Delete the authenticated user account permanently
- Configure Start Command:
npm start - Add environment variables in Render dashboard
- Example deployed backend:
https://your-backend.onrender.com
- Build Command:
npm run build - Publish Directory:
dist - Environment Variable:
VITE_API_URL=https://your-backend.onrender.com/api
This project is licensed under the MIT License.
Developed by Archa