PaySphere 💰

Payroll in seconds, not hours.
A lightweight payroll management system built for small businesses in India.

Figma Design • Live Project • Postman Documentation • Backend API • YouTube Demo

---

❗ Problem Statement

Small businesses employing fewer than 10 workers spend hours every month manually calculating salaries factoring in paid leave, unpaid absences, overtime hours, and festival bonuses.

Most payroll software is built for large enterprises, making them:

• Too complex for tiny teams.
• Expensive and over-engineered.
• Not optimized for the fast-paced "Digital Ledger" style of Bharat.

👉 Result: Wasted time, calculation errors, and frustration.

---

💡 Solution

PaySphere simplifies payroll into a 3-step workflow:

1. 👥 Add Employees: Quickly onboard your team with base salary and overtime rates.
2. 💬 Log Updates: Add leaves, overtime, and bonuses through a clean, intuitive interface.
3. ⚡ Run Payroll: Generate professional payslips and finalize payouts in one click.

---

🎯 Features

Feature	Description
🔐 Google Authentication	Secure Login & Signup with Google One-Tap integration.
👥 Employee Management	Dashboard view with status, role, and salary at a glance.
💬 Activity Tracking	Log leave, overtime, bonuses, and deductions per employee.
⚡ Instant Payroll	Automated calculation of Net Salary based on monthly activity.
📄 Professional Payslips	Download detailed PDF breakdowns for each payout.
📱 Responsive Design	Fully optimized for Mobile, Tablet, and Desktop.

---

🛠️ Tech Stack

Layer	Technologies
Frontend	React.js, Vite, Tailwind CSS v4, MUI (Material UI)
Backend	Node.js, Express.js, MongoDB
Deployment	Vercel (Frontend), Render (Backend)

---

📁 Project Structure

paysphere/
├── backend/
│   ├── src/
│   │   ├── config/             # Database connection
│   │   ├── controllers/        # Business logic
│   │   ├── models/             # Mongoose schemas
│   │   ├── routes/             # API endpoint definitions
│   │   └── index.js            # Server entry point
├── frontend/
│   ├── src/
│   │   ├── assets/             # Images and local files
│   │   ├── components/         # Reusable UI Components
│   │   │   ├── common/         # Button, Input, Modal, etc.
│   │   │   └── layout/         # Sidebar, Navbar, etc.
│   │   ├── pages/              # Main route views
│   │   ├── features/           # Feature-based modules (Auth, Dashboard)
│   │   ├── hooks/              # Global reusable React hooks
│   │   ├── services/           # API services (axios config)
│   │   ├── utils/              # Helper functions and constants
│   │   ├── App.jsx             # Route definitions
│   │   └── main.jsx            # React root & Context providers

---

📸 Screenshots

Dashboard Overview

---

🚀 Installation & Setup

1. Backend Configuration

Create a .env in backend/:

MONGO_URI=your_mongodb_uri
JWT_SECRET=your_secret_key
GOOGLE_CLIENT_ID=your_google_id
GOOGLE_CLIENT_SECRET=your_google_secret

2. Frontend Configuration

Create a .env in frontend/:

VITE_API_URL=http://localhost:5000
VITE_GOOGLE_CLIENT_ID=your_google_id

3. Run Development

# Backend
cd backend && npm run dev

# Frontend
cd frontend && npm run dev

---

PaySphere — Payroll in seconds, not hours. ⚡