🌳 Tally — Attendance Manager

A modern, gamified attendance tracking platform for small teams. Staff submit, admin approves, and every present day plants a tree in your team's living forest.

🌐 Try it live → · Report Bug · Request Feature

✨ Why Tally?

Tracking attendance shouldn't feel like a chore. Tally turns the boring grind into a delightful, motivating experience — your team's record is visualized as a living forest where every present day plants a tree, overtime adds a bonus glow, and absences leave withered stumps. The forest changes with the time of day, with a sun that arcs across the sky, twinkling stars at night, a flowing river, and butterflies that appear as your team thrives.

Built for office teams, interns, and small businesses that want a clean, modern, free alternative to enterprise time-tracking tools.

🎯 Features

Core

🏢 Multi-tenant workspaces — each admin owns a private workspace with full data isolation
👥 Role-based access — admins manage, staff submit; tight Firestore security rules enforce boundaries
✉️ Email-based staff invites — admin adds staff by email; they receive a "set your password" link and join in one click
🔐 Google sign-in for admins plus traditional email/password
⏱️ Check-in / check-out flow — staff clock in when they arrive, clock out when they leave; entry/exit times stored automatically
📅 Full-year attendance calendar with intelligent day classification (on-time, late, early-out, etc.)
✅ Admin approval workflow — staff submissions are pending until approved (or set workspace to auto-approve)
🗓️ Date-range leave requests — staff request planned off days 3+ days in advance with reason; admin can mark off periods directly for any staff
⚙️ Configurable per workspace — office hours, working days (Mon–Sat or Mon–Fri etc.), and a holiday calendar
📸 Photo uploads — company logo and staff profile photos via Cloudinary (free tier, no Firebase Storage required)

The Forest 🌳

A unique gamified visualization that lives below every attendance calendar:

🌱 Every present day plants a tree at a stable, seed-deterministic position
🌳 Tree size = hours worked ratio; arrive late or leave early → stunted tree
✨ Overtime grows oversized trees with a soft yellow glow
🪵 Absent days wither into dead trees; 🪨 planned off-days become stumps
⏳ Today's tree grows in real-time — checked in but not out? The tree gets bigger every 30 seconds with a pulsing emerald halo
🦋 Wildlife appears as your forest thrives — butterflies, rabbits, deer
🐦 Birds fly across the sky — count grows with healthier forests
🌅 Live day/night cycle — sun arcs from east to west, moon rises after dusk, stars twinkle at night, all driven by the actual system clock
🌊 Animated flowing river with shimmers and floating leaves drifting downstream
🌷 Naturalistic ground — clustered grass, blooming flowers, and the occasional mushroom

UX polish

🎨 Clean, modern design inspired by Linear/Vercel
🌓 Smooth animations and live transitions
📱 Fully responsive
🔔 Inline toast notifications (no ugly browser alerts)
⚡ Real-time Firestore subscriptions — no manual refresh needed

🛠 Tech Stack

Layer	Technology
Frontend	React 19, Vite 8, React Router 7
Styling	Tailwind CSS 4, custom design tokens
Auth	Firebase Authentication (email/password + Google OAuth)
Database	Cloud Firestore with security rules
Image hosting	Cloudinary (unsigned upload preset)
Icons	Lucide React
Date handling	date-fns
Hosting	Vercel

📸 Screenshots

Add screenshots here after deployment

Login	Dashboard	Calendar	Forest
TBD	TBD	TBD	TBD

🚀 Quick Start

Prerequisites

Node.js 18+ (LTS recommended)
A Firebase project (create one free)
A Cloudinary account (sign up free)

1. Clone & install

git clone https://github.com/rajendra7169/attendance-system.git
cd attendance-system
npm install

2. Set up Firebase

Create a project

Go to the Firebase Console → Add project
Skip Google Analytics (optional)

Enable Authentication

Build → Authentication → Get started
Sign-in method tab → Enable Email/Password
Enable the "Email link (passwordless sign-in)" toggle inside Email/Password (optional but recommended)
Also enable Google provider → set support email → Save

Create Firestore Database

Build → Firestore Database → Create database
Choose a region close to your users (e.g. asia-south1)
Start in production mode (we'll apply our security rules next)

Apply security rules

Paste the contents of firestore.rules into the Firestore → Rules tab and publish.

Get your config

Project Settings (gear icon) → Your apps → Web app → Register app
Copy the firebaseConfig values for the next step

3. Set up Cloudinary

Sign up at cloudinary.com
On the dashboard, copy your Cloud Name
Settings → Upload → Upload presets → Add upload preset
- Signing Mode: Unsigned (important — required for browser uploads)
- Folder: attendance-system (optional)
- Save and copy the preset name

4. Environment variables

Copy the example and fill in your values:

cp .env.example .env.local

Edit .env.local:

# Firebase
VITE_FIREBASE_API_KEY=your_api_key
VITE_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=your-project
VITE_FIREBASE_STORAGE_BUCKET=your-project.appspot.com
VITE_FIREBASE_MESSAGING_SENDER_ID=123456789
VITE_FIREBASE_APP_ID=1:123456789:web:abcdef

# Cloudinary
VITE_CLOUDINARY_CLOUD_NAME=your_cloud_name
VITE_CLOUDINARY_UPLOAD_PRESET=your_preset_name

5. Run

npm run dev

Open http://localhost:5173. Click "Create one" to set up your first workspace.

📂 Project Structure

attendance-system/
├── public/                  # Static assets
├── src/
│   ├── components/
│   │   ├── Calendar.jsx     # Year calendar + attendance modal
│   │   ├── Forest.jsx       # The living forest visualization
│   │   ├── Header.jsx       # Top navigation with pending badge
│   │   └── MemberCard.jsx   # Staff card with attendance stats
│   ├── context/
│   │   └── AuthContext.jsx  # User + workspace state with live subscriptions
│   ├── hooks/
│   │   └── useAuth.js
│   ├── pages/
│   │   ├── Login.jsx        # Unified email/password + Google sign-in
│   │   ├── Signup.jsx       # Workspace creation
│   │   ├── Onboard.jsx      # Post-Google sign-up workspace setup
│   │   ├── ResetPassword.jsx
│   │   ├── Dashboard.jsx    # Admin + Staff dashboards
│   │   ├── MemberDetail.jsx # Staff profile + calendar + forest
│   │   └── Admin.jsx        # Company settings, staff, approvals
│   ├── utils/
│   │   ├── firebase.js
│   │   ├── calendarUtils.js # Day classification, time math
│   │   ├── staffUtils.js    # Invite, create, resend
│   │   └── uploadImage.js   # Cloudinary upload helper
│   ├── App.jsx              # Routes
│   └── main.jsx             # Entry point
├── firestore.rules          # Production-ready security rules
├── vercel.json              # Vercel SPA routing config
├── .env.example             # Template for local env vars
└── package.json

📜 Available Scripts

Command	What it does
`npm run dev`	Start the Vite dev server at `localhost:5173`
`npm run dev -- --host 0.0.0.0`	Expose dev server to your LAN (test on other devices)
`npm run build`	Production build to `dist/`
`npm run preview`	Serve the production build locally
`npm run lint`	Run ESLint

☁️ Deploy to Vercel

The fastest path to production:

1. Push to GitHub (see Pushing this code below)

2. Import to Vercel

Go to vercel.com/new → Import Git Repository
Pick your attendance-system repo
Vercel auto-detects Vite — no configuration needed
Add environment variables (copy each VITE_* from your .env.local)
Click Deploy

3. Update Firebase for production

In the Firebase Console → Authentication → Settings → Authorized domains → Add domain → enter your Vercel URL (e.g. your-app.vercel.app) or custom domain.

For Google sign-in to work, also add your domain to the OAuth Web client in Google Cloud Console → Credentials:

Authorized JavaScript origins → https://your-domain
Authorized redirect URIs → https://your-domain/__/auth/handler

That's it. Subsequent pushes to main auto-deploy in ~30 seconds.

Password-reset URL: No need to set this in the Firebase Console — Tally passes the current site's origin as the action URL on every reset call, so it works automatically across localhost, Vercel previews, and production.

Custom domain (optional)

In Vercel → your project → Settings → Domains → add tally.yourdomain.com (or any subdomain). Vercel auto-provisions SSL. Then re-add the custom domain to Firebase Authorized Domains and the Google Cloud OAuth client.

Alternative: Netlify

Drag-and-drop the dist/ folder after npm run build, or connect the GitHub repo. Add the same env vars in Site settings.

🗺 Roadmap

Bulk CSV staff import
Monthly attendance report export (PDF/CSV)
Email notifications on approval / rejection
Mobile native apps (React Native)
Geofencing for office-based check-in
Customizable forest themes (snowy winter, autumn, etc.)
Achievement badges (perfect month, 100-day streak, etc.)
Slack / WhatsApp integration

🤝 Contributing

Contributions are very welcome. Whether it's a bug fix, a new feature, or improved docs:

Fork the repo
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

For larger changes, please open an issue first to discuss the approach.

📄 License

This project is licensed under the MIT License — see the LICENSE file for details.

You're free to use it in personal or commercial projects.

🙏 Acknowledgments

Firebase for an excellent free auth + database tier
Cloudinary for free image hosting
Lucide for the beautiful icon set
Tailwind CSS for making styling fun again
date-fns for sane date handling

👤 Author

Rajendra Pandey

GitHub: @rajendra7169
Built with ☕ and 🌳

⭐ If you found this project useful, please consider giving it a star! ⭐

Made with ❤️ in Nepal

Name		Name	Last commit message	Last commit date
android		android
api		api
functions		functions
public		public
src		src
.env.example		.env.example
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
capacitor.config.json		capacitor.config.json
eslint.config.js		eslint.config.js
firebase.json		firebase.json
firestore.indexes.json		firestore.indexes.json
firestore.rules		firestore.rules
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
vercel.json		vercel.json
vite.config.js		vite.config.js

Navigation Menu

Repository files navigation

🌳 Tally — Attendance Manager

✨ Why Tally?

🎯 Features

Core

The Forest 🌳

UX polish

🛠 Tech Stack

📸 Screenshots

🚀 Quick Start

Prerequisites

1. Clone & install

2. Set up Firebase

Create a project

Enable Authentication

Create Firestore Database

Apply security rules

Get your config

3. Set up Cloudinary

4. Environment variables

5. Run

📂 Project Structure

📜 Available Scripts

☁️ Deploy to Vercel

1. Push to GitHub (see Pushing this code below)

2. Import to Vercel

3. Update Firebase for production

Custom domain (optional)

Alternative: Netlify

🗺 Roadmap

🤝 Contributing

📄 License

🙏 Acknowledgments

👤 Author

About

Releases

Packages

Contributors

Languages

Latest commit

History

Folders and files

Repository files navigation

🌳 Tally — Attendance Manager

✨ Why Tally?

🎯 Features

Core

The Forest 🌳

UX polish

🛠 Tech Stack

📸 Screenshots

🚀 Quick Start

Prerequisites

1. Clone & install

2. Set up Firebase

Create a project

Enable Authentication

Create Firestore Database

Apply security rules

Get your config

3. Set up Cloudinary

4. Environment variables

5. Run

📂 Project Structure

📜 Available Scripts

☁️ Deploy to Vercel

1. Push to GitHub (see Pushing this code below)

2. Import to Vercel

3. Update Firebase for production

Custom domain (optional)

Alternative: Netlify

🗺 Roadmap

🤝 Contributing

📄 License

🙏 Acknowledgments

👤 Author

About

Topics

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages