sahasrajit-foundation

KO | EN

gitlite — search

#hacktoberfest #react #ai #golang #go #machine-learning #rust #deep-learning #linux #awesome #awesome-list #vue #security #mcp

sahasrajit-foundation

(★ 22)

Built the official website for Sahasrajit Foundation, a grassroots NGO working in education, healthcare, and social welfare. The platform lets visitors explore the foundation's work, donate via UPI QR, volunteer, and track events — complete with a Firebase-powered admin panel so the team can manage everything from any device, no coding needed.

sahasrajit-foundation Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Sahasrajit Foundation — Official Website

> *Empowering Communities, Transforming Lives*

![Sahasrajit Foundation Website](https://raw.githubusercontent.com/arupdas0825/sahasrajit-foundation/main/docs/screenshot.png)
---

## 🌱 About This Project

This is the official website of **Sahasrajit Foundation**, a grassroots NGO committed to education, healthcare, and social welfare for underprivileged communities.

This is my **first full-stack web development project** — built from the ground up without prior coding experience. Every section, animation, and feature was designed and implemented step by step with the goal of giving the Foundation a professional digital presence.

The website follows a **Glassmorphism / Minimalism** design aesthetic with a dark theme and golden accents — designed to feel elegant, trustworthy, and impactful.

---

## 🚀 Live Demo

> *(https://sahasrajit-foundation.vercel.app/)*

---

## ✨ Current Features

### 🏠 Homepage
- Sticky scroll hero animation — text slides left while the field photo reveals from the right
- Smooth entrance animations on page load
- Stats bar showing impact numbers (Lives Impacted, Districts Covered, etc.)
- Animated gold particle background

### 📖 About Section
- NGO purpose, founding story, vision, and mission
- Interactive mission cards with hover effects

### 💼 Work Section
- Timeline view of all past activities and campaigns
- Category filter tabs (Education, Healthcare, Skill Development, Environment)
- Each work entry shows date, location, category, and impact

### 📅 Events System
- Homepage highlights — 3 past event cards + upcoming events
- Dedicated `/events` page with full list
- Individual event detail pages (`/events/:slug`) with full description and photo gallery
- Lightbox photo viewer on detail pages
- **Real-time data from Firebase Firestore**

### 🖼️ Gallery Section
- Three tabs — Past, Present, Future
- Auto-sliding highlight strip on homepage (right to left, no cursor needed)
- Photo grid with card hover effects

### 👥 Team Section
- Homepage shows Leadership only (President, Secretary, Treasurer)
- Click any member → modal popup with bio and responsibilities
- "Meet the Full Team" button → dedicated `/team` page
- `/team` page shows all Leadership + Core Members

### 💳 Donation System
- "Donate Now" on hero → popup modal (no scrolling needed)
- Donor name + email collection
- UPI QR code generation for payment
- Success confirmation screen

### 📬 Contact Section
- Email, phone, address, office hours
- Facebook and Instagram links
- Quick message form

### 🔗 Join With Us
- 3-step membership application modal
- Photo upload, personal details, contact info, confirmation review

### 🔐 Admin Panel (`/admin`)
- Password protected
- Add, edit, delete events
- Upload multiple photos from phone or laptop (via Cloudinary)
- Mark Upcoming events as Past with one click
- Auto-seeds default events on first login
- Real-time sync with Firebase

### 🧭 Navigation
- Sticky glassmorphism navbar
- Smooth scroll for anchor links
- React Router page navigation for Events, Team, Admin
- Mobile hamburger menu

---

## 🛠️ Tech Stack

| Category | Technology |
|---|---|
| Framework | React 18 + Vite |
| Routing | React Router DOM |
| Database | Firebase Firestore |
| Image Hosting | Cloudinary |
| QR Code | qrcode.react |
| Styling | Custom CSS (Glassmorphism variables) |
| Fonts | Cormorant Garamond + Jost (Google Fonts) |
| Animations | CSS keyframes + Intersection Observer API |

---

## 📂 Project Structure

```
sahasrajit-foundation/
├── public/
│   └── favicon.svg
├── src/
│   ├── assets/
│   │   └── ngo-hero.jpg          ← Hero + Logo image
│   ├── components/
│   │   ├── Background.jsx         ← Animated particle canvas
│   │   ├── Navbar.jsx             ← Sticky nav with Admin + Join buttons
│   │   ├── Hero.jsx               ← Scroll-reveal hero section
│   │   ├── About.jsx              ← Story, Vision, Mission
│   │   ├── Work.jsx               ← Activity timeline
│   │   ├── Events.jsx             ← Homepage event highlights
│   │   ├── Gallery.jsx            ← Photo gallery + auto-slide strip
│   │   ├── Team.jsx               ← Leadership section
│   │   ├── Donation.jsx           ← Full donation section
│   │   ├── DonationModal.jsx      ← Popup donation flow with QR
│   │   ├── Contact.jsx            ← Contact info + message form
│   │   ├── JoinModal.jsx          ← 3-step membership form
│   │   └── Footer.jsx
│   ├── pages/
│   │   ├── EventsPage.jsx         ← /events — all events
│   │   ├── EventDetailPage.jsx    ← /events/:slug — event details
│   │   ├── TeamPage.jsx           ← /team — full team
│   │   └── AdminPage.jsx          ← /admin — content management
│   ├── data/
│   │   └── content.js             ← All static NGO content
│   ├── firebase.js                ← Firebase initialization
│   ├── App.jsx
│   ├── main.jsx
│   └── index.css
├── .env                           ← ⚠️ Secret keys (not in GitHub)
├── .env.example                   ← Template for .env
├── .gitignore
├── index.html
├── vite.config.js
└── package.json
```

---

## ⚙️ Getting Started

### 1. Clone the repository
```bash
git clone https://github.com/arupdas0825/sahasrajit-foundation.git
cd sahasrajit-foundation
```

### 2. Install dependencies
```bash
npm install
```

### 3. Set up environment variables
```bash
cp .env.example .env
```
Fill in your own Firebase and Cloudinary credentials in `.env`.

### 4. Run locally
```bash
npm run dev
```

Open **http://localhost:5173** in your browser.

---

## 🔐 Environment Variables

Create a `.env` file in the root directory:

```env
VITE_FIREBASE_API_KEY=your_key
VITE_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=your_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_project.firebasestorage.app
VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
VITE_FIREBASE_APP_ID=your_app_id
VITE_CLOUDINARY_CLOUD_NAME=your_cloud_name
VITE_CLOUDINARY_UPLOAD_PRESET=your_preset_name
VITE_ADMIN_PASSWORD=your_admin_password
```

---

## 🗺️ Future Implementation

- [ ] **Member Database** — Join form submissions saved to Firebase with admin approval flow
- [ ] **Donation Records** — Every donation logged in Firebase with automatic email receipt via EmailJS
- [ ] **Gallery Admin Panel** — Upload and manage gallery photos directly from admin dashboard
- [ ] **Team Admin Panel** — Add/edit/remove team members with photos from admin
- [ ] **Blog / News Section** — Post updates, press coverage, and impact stories
- [ ] **Multi-language Support** — Bengali and English toggle
- [ ] **Search & Filter** — Search events and work by category, year, or keyword
- [ ] **Event Registration** — Online form for registering at upcoming events
- [ ] **Volunteer Dashboard** — Dedicated portal for active volunteers to track activities
- [ ] **Impact Analytics** — Visual charts showing growth in impact over the years
- [ ] **PWA Support** — Make the website installable on mobile as a Progressive Web App
- [ ] **Email Newsletter** — Subscriber list with periodic updates
- [ ] **Secure Admin Auth** — Replace password login with Firebase Authentication
- [ ] **Deployment** — Host on Vercel or Firebase Hosting with custom domain

---

## 👤 Author

**Arup**
— Founder & Developer, Sahasrajit Foundation Website
— First web development project, built with dedication and purpose

> *"I built this website not just to learn to code, but to give our Foundation the voice it deserves online."*

---

## 🤝 Contributing

This project is currently maintained by the Sahasrajit Foundation team. If you'd like to contribute or suggest improvements, feel free to open an issue or pull request.

---

## 📄 License

---

<p align="center">
  Built with ❤️ for the communities we serve
</p>

sahasrajit-foundation

sahasrajit-foundation Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

sahasrajit-foundation

sahasrajit-foundation Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README