A comprehensive, mobile-friendly work scheduling application with multi-schedule support. Built with Vite + React, styled using TailwindCSS v4 and Shadcn UI, and powered by Firebase Firestore for real-time data synchronization.
- ✅ Multiple Schedules - Create and manage unlimited work schedules
- ✅ Duplicate Schedules - Clone schedules with flexible copy options (employees, shifts, or both)
- ✅ Private/Public Schedules - Control visibility per month - hide work-in-progress schedules from public view
- ✅ Auto-Generate Schedules - Intelligent algorithm adapts to any team size
- ✅ Custom Shifts - Personalized time ranges (e.g., 9:00-17:30)
- ✅ Work Hours Analytics - Track expected vs actual hours with overwork alerts
- ✅ Change Tracking - Visual indicators with count badges for modified shifts
- ✅ Custom Messages - Add optional notes to shift changes (e.g., "По негово желание", "Болничен")
- ✅ Bulgarian Holidays - Automatic holiday detection and highlighting
- ✅ Authentication - Secure login with read-only public mode
- ✅ Real-time Sync - Firebase Firestore for live updates
- ✅ PWA Support - Progressive Web App with offline support and installable
- ✅ Export - PDF and Excel with full styling
- ✅ Mobile Responsive - Works on all devices
- ✅ SEO Optimized - Rich meta tags and structured data
- ✅ URL State - Shareable links with schedule/month/year params
- Vite – Fast frontend tooling
- React 19 – UI library
- TypeScript – Type safety
- TailwindCSS v4 – Utility-first styling
- Shadcn UI – Accessible UI components
- Firebase Firestore – Real-time database
- Firebase Authentication – Secure email/password auth
- jsPDF + xlsx – PDF and Excel export
git clone https://github.com/Wickedlolz/work-schedule.git
cd work-schedule
npm install- Create a Firebase project
- Enable Firestore Database and Authentication
- Copy
.env.exampleto.env - Add your Firebase credentials
cp .env.example .envIn Firebase Console → Firestore Database → Rules:
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /schedules/{scheduleId} {
// Public read access (transparency)
allow read: if true;
// Only authenticated users can modify
allow create, update, delete: if request.auth != null;
}
}
}In Firebase Console → Authentication → Users:
- Click "Add user"
- Enter email and password
- Save
npm run dev- 📚 Features in Detail - Complete feature documentation
- 🏗️ Project Structure - Architecture and code organization
- ⚡ Performance Optimizations - React optimization techniques
- 🚀 Deployment Guide - Deploy to GitHub Pages, Vercel, Netlify
- 🔍 SEO Checklist - SEO optimization guide
- 🎨 Favicon Guide - Icon setup instructions
- ✅ View all schedules
- ✅ Navigate months/years
- ✅ Export to PDF/Excel
- ✅ View public schedules - See schedules marked as public by admins
- ❌ Private schedules hidden - Work-in-progress schedules show "Графикът е частен" overlay
- ❌ Cannot edit
- ✅ All public features
- ✅ Control schedule visibility - Toggle each month between Public/Private:
- Public (👁️): Visible to everyone (ideal for finalized schedules)
- Private (🚫): Only admins can view (perfect for work-in-progress)
- Toggle button appears at top-right of schedule table
- Each month has independent visibility (e.g., March public, April private)
- New schedules default to private for all months
- ✅ Create/edit/delete schedules
- ✅ Duplicate schedules - Clone existing schedules with flexible options:
- Copy employees only: Creates new empty schedule with same team (useful for new months)
- Copy employees + shifts: Exact clone with all shifts adjusted to target month/year (perfect for recurring schedules)
- Specify target month/year when duplicating
- ✅ Add/remove employees
- ✅ Assign shifts
- ✅ Set custom monthly hour limits - Override automatic calculation (click ℹ️ icon → "Промени максимум")
- ✅ Track manual changes - Modified shifts display:
- Change count badge (1-2 changes: blue, 3-5: orange, 6+: red)
- Tooltip: "Променена X пъти | custom message"
- Optional custom messages: Add context when changing shifts (e.g., "По негово желание", "Болничен", "Отпуск")
- Edit/delete messages: Dialog pre-populates existing message, clear text to delete
- ✅ Auto-generate schedules with intelligent rules:
- Large teams (9+ employees): 3 Morning + 5-6 Evening on weekends
- Medium teams (4-8 employees): ~2 Morning + rest Evening on weekends
- Small teams (1-3 employees): Balanced distribution adapted to available workforce
- All teams: 2 rest days/week, max 6 consecutive work days, respects monthly hour limits
- Smart rest scheduling: Prevents Morning shift after Evening shift (insufficient rest)
- 4-hour employees always Evening (they have another job in the morning)
- Weekdays: Balanced Morning/Evening (Night shifts left for manual assignment)
schedules/
{scheduleId}/
name: "Schedule 1"
isPublic: { // Per-month visibility control (key format: "YYYY-MM")
"2026-01": true, // January 2026 is public
"2026-02": false, // February 2026 is private
"2026-03": true // March 2026 is public
}
employees: [
{
id: "1234",
name: "John Doe",
workingHours: 8, // 4, 6, or 8 hours
maxMonthlyHours: 160, // Optional: Manual override for max monthly hours
shifts: {
"2026-01-01": "Morning",
"2026-01-02": { type: "Custom", startTime: "09:00", endTime: "17:30" },
"2026-01-03": "Evening"
},
changedShifts: { // Track number of times each shift was modified
"2026-01-02": 2,
"2026-01-03": 5
},
shiftMessages: { // Optional custom messages for shift changes
"2026-01-02": "По негово желание",
"2026-01-03": "Болничен"
}
}
]
createdAt: "2026-01-01T..."
updatedAt: "2026-01-01T..."npm run dev # Start development server
npm run build # Build for production
npm run preview # Preview production build
npm run lint # Run ESLintPlanned features for future versions:
- Dark mode support
- Email notifications for schedule changes
- Statistics and reports
- PWA with offline support
- Mobile app version
- Verify
.envvariables are correct - Check Firebase console for enabled services
- Whitelist your domain in Firebase settings
- Ensure Node.js 20+ is installed
- Clear cache:
rm -rf node_modules package-lock.json && npm install
- Check Firestore rules are deployed
- Verify user exists in Firebase Console
- Check browser console for errors
For more troubleshooting, see FEATURES.md.
Contributions are welcome! Please:
- Fork the repository
- 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
This project is licensed under the MIT License.
Viktor Dimitrov (Wickedlolz)
- GitHub: @Wickedlolz
- Project Link: https://github.com/Wickedlolz/work-schedule
Give a ⭐️ if this project helped you!