Everyday Santa is a modern, interactive NGO web application built with React. It aims to bridge the gap between donors, volunteers, and underprivileged children through a transparent, gamified, and AI-enhanced platform.
- Immersive Vanta.js bird animation on the landing page
- Fully responsive design with Dark / Light mode
- Bilingual support (English & Hindi) for wider accessibility
- Gemini Chatbot: Intelligent assistant for NGO-related queries
- AI Role Matcher: Analyzes volunteer skills to suggest the perfect role
- AI Impact Stories: Generates emotional micro-stories based on donation amounts
- Secure OTP-based login system (EmailJS + Firebase)
- Happiness Index: Visualizes tangible impact (meals, books, healthcare, etc.)
- Interactive payment UI supporting:
- UPI
- Net Banking
- Bank Transfer
- Live Leaderboard: Encourages donations through friendly competition
- Fund Allocation Charts: Shows exactly where money goes
- Profile Dashboard: Track total donations & lives impacted
| Category | Technologies |
|---|---|
| Frontend | React.js, React Router DOM |
| Styling | Tailwind CSS, Lucide React |
| Backend & DB | Firebase Authentication, Cloud Firestore |
| AI Integration | Google Gemini API |
| Visualization | Recharts, Vanta.js, Three.js |
| Utilities | EmailJS |
| Build Tool | Vite |
Follow these steps to run the project locally.
- Node.js v16+
- npm or yarn
Clone the repository:
git clone https://github.com/your-username/everyday-santa.git
cd everyday-santa
Install dependencies:
npm install
🔐 Environment Variables
Create a .env file in the root directory:
VITE_FIREBASE_API_KEY=your_firebase_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
VITE_GEMINI_API_KEY=your_gemini_api_key
VITE_EMAILJS_SERVICE_ID=your_service_id
VITE_EMAILJS_TEMPLATE_ID=your_template_id
VITE_EMAILJS_PUBLIC_KEY=your_public_key
⚠️ Note: API keys are currently hardcoded for demo purposes. Move them to .env for production use.
▶️ Run Locally
npm run dev
Open:
http://localhost:5173
📁 Project Structure
everyday-santa/
├── public/ # Static assets
├── src/
│ ├── App.jsx # Main component + routing
│ ├── main.jsx # Entry point
│ ├── index.css # Tailwind + global styles
│ └── components/ # Header, Footer, Pages, UI components
├── firebase.json # Firebase hosting config
├── vite.config.js # Vite configuration
├── tailwind.config.js # Tailwind config
└── package.json # Scripts & dependencies
☁️ Deployment (Firebase Hosting)
Install Firebase CLI:
npm install -g firebase-tools
Login:
firebase login
Initialize:
firebase init hosting
Set:
Public directory → dist
Configure as SPA → Yes
Build:
npm run build
Deploy:
firebase deploy
⚠️ Fix Blank Page on Refresh (Important)
Ensure firebase.json contains:
{
"hosting": {
"public": "dist",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
This ensures React Router works correctly in production.
🤝 Contributing
Contributions are welcome and appreciated ❤️
Fork the repository
Create your feature branch
git checkout -b feature/AmazingFeature
Commit your changes
git commit -m "Add AmazingFeature"
Push to branch
git push origin feature/AmazingFeature
Open a Pull Request
📄 License
Distributed under the MIT License.
See LICENSE for more information.
📞 Contact
Everyday Santa Team
Email: info@everydaysanta.org
Phone: +91 98765 43210
Location: Mumbai, India
Made with ❤️ for a better tomorrow