💕 Tuition Fee Manager - Made with Love for Mom

A beautiful, easy-to-use fee management system created specially for my mom's tuition classes. Because managing 25 students' fees in a diary was getting tough, and she deserves better! ❤️

🌟 Why I Built This

My mom is an amazing tuition teacher who teaches around 25 students. She was maintaining all fee records in a diary, and sometimes:

• She'd forget who paid
• Parents would pay for 2-3 months together and it got confusing
• It was hard to track which months were paid
• No easy way to see total collections

So I built this web app to make her life easier! Now she can manage everything from her phone. 📱

✨ Features Made for Mom

📊 Dashboard - Quick Overview

• See total students at a glance
• Check total revenue collected
• Current month's collections
• Recent payment history

👨‍🎓 Student Management

• Add all 25 students with their details
• Store parent name, phone, class, and monthly fee
• Edit anytime if details change
• Easy to find any student

💰 Payment Tracking - Just Like Her Diary!

• Diary-style pages - Each student has their own page
• Click any student to see their complete payment history
• Visual month selection - Click months to mark as paid
• Green months = Already paid ✓
• Advance payments - Parents can pay for multiple months
• Add remarks like "Cash", "Google Pay", etc.
• See running total for each student

📱 Mobile-First Design

• Works perfectly on her phone
• Big buttons, easy to tap
• Beautiful pastel colors (pink, lavender, mint)
• Fast and smooth

🎨 Design Philosophy

• Soft & Pretty: Pastel colors because mom loves them
• Simple & Clear: No complicated menus or options
• Like a Diary: Familiar layout, one page per student
• Big & Tappable: Everything designed for phone use

🚀 Live Demo

Website: Deployed on Vercel - Access from any device!

Just open on any phone or computer - no app installation needed!

💝 For Mom's Use

First Time Setup:

1. Open the website on your phone
2. Go to "Students" tab
3. Add all 25 students one by one
4. That's it! You're ready!

Recording Payments:

1. Go to "Payments" tab
2. Click on the student's card
3. You'll see their page (like diary!)
4. Click "Add New Payment"
5. Select which months they're paying for
6. Click "Record Payment"
7. Done! ✅

Tips:

• Green months = Already paid, can't select again
• Blue months = You just selected
• You can select multiple months if parent pays advance
• Everything saves automatically
• Data won't be lost!

🛠️ Technical Details

Built With:

• Frontend: React 18 (beautiful UI)
• Backend: Node.js + Express (handles data)
• Storage: JSON file (simple & reliable)
• Styling: Custom CSS (pastel theme)
• Hosting: Vercel (fast & free)

Features:

• Real-time updates
• Automatic calculations
• Data persistence
• Responsive design
• Mobile-optimized
• Beautiful pastel theme

📂 Project Structure

tuition-fee-manager/
├── client/              # React frontend
│   ├── src/
│   │   ├── pages/      # Dashboard, Students, Payments
│   │   └── styles/     # Beautiful CSS
│   └── package.json
├── server/              # Express backend
│   ├── index.js        # API server
│   └── data.json       # All data stored here
└── README.md           # This file!

🔒 Privacy & Security

• No data shared with anyone
• All data stored securely
• Only you have the link
• No tracking or analytics
• Mom's data stays private! 🔐

💾 Backup

Important: The server/data.json file contains all students and payment records.

To Backup:

1. Download the data.json file
2. Save it to Google Drive or USB
3. Do this monthly!

To Restore:

1. Replace data.json with backup
2. Restart the server
3. All data restored!

🚀 Deployment Instructions

Deploy to Vercel:

1. Push to GitHub:

   git init
   git add .
   git commit -m "Initial commit - Tuition Fee Manager for Mom"
   git branch -M main
   git remote add origin YOUR_GITHUB_REPO_URL
   git push -u origin main

2. Deploy on Vercel:

   • Go to vercel.com
   • Sign in with GitHub
   • Click "New Project"
   • Import your repository
   • Configure:
     • Framework Preset: Other
     • Root Directory: ./
     • Build Command: cd client && npm install && npm run build && cd .. && npm install
     • Output Directory: client/build
     • Install Command: npm install
   • Click "Deploy"
   • Done! Your app is live! 🎉

🎯 Future Enhancements (Maybe!)

• SMS reminders for pending fees
• PDF receipt generation
• Attendance tracking
• Export to Excel
• Multiple teacher support
• WhatsApp integration

👨‍💻 Developer

Built with ❤️ by a son who loves his mom and wanted to make her work easier.

📞 Support

If mom faces any issues:

1. Call me! 😊
2. Or check the USER_GUIDE.md file
3. Everything is explained there

🙏 Acknowledgments

Special thanks to:

• Mom - for being an amazing teacher and inspiration
• Her students - for being patient during testing
• Coffee - for keeping me awake during coding

📝 License

This is a personal project made for my mom's tuition classes. Feel free to use it for your own family needs, but please give credit! 💕

---

Made with 💖 for the best mom and teacher in the world!

"Technology should make life easier, not harder. This is my small way of saying thank you, Mom!"

---

🌈 Note to Mom:

Mom, I know you were finding it hard to manage everything in the diary. I hope this makes your life a bit easier. You taught me everything I know, including the discipline and dedication it takes to teach others. This is my small gift to you.

Just remember:

• Dashboard = See everything at once
• Students = Your student list
• Payments = Like your diary, but better!

I love you! ❤️

---

Version: 1.0.0
Last Updated: February 2026
Status: ✅ Ready to Deploy!