🌍 Uplifters.Net – Joining Hearts & Hands with Technology

A full-stack charity platform connecting acts of kindness to real human needs.

Built with ❤️ using HTML, CSS, JavaScript, Node.js, Express, MongoDB, Cloudinary, and Gmail SMTP.
Deployed on Render (Backend) & Vercel (Frontend).

✨ Key Features

🎨 Modern & Responsive Design – Beautiful UI that works seamlessly across all devices
🌗 Light/Dark Mode – Toggle between themes for comfortable viewing
🔥 Full-Stack Integration – Complete frontend and backend with cloud services
☁️ Cloud Storage – Cloudinary-powered image gallery and uploads
📊 Dynamic Metrics Dashboard – Real-time donation impact tracking
✉️ Smart Contact System – Gmail SMTP integration with automated responses
🔒 Secure Authentication – JWT-based auth with role management (Admin/User)
🎯 Campaign Management – Track and display active donation campaigns
⭐ User Testimonials – Community feedback with admin moderation

🖼️ Preview

Clean, intuitive, and emotionally engaging interface

🛠️ Tech Stack

Layer	Technologies
Frontend	HTML5, CSS3, JavaScript, Bootstrap, Swiper.js, Lightbox
Backend	Node.js, Express.js, Mongoose, JWT, Multer, Nodemailer
Database	MongoDB Atlas
Storage	Cloudinary
Email	Gmail SMTP (App Password)
Deployment	Render (Backend), Vercel (Frontend)

📁 Project Structure

uplifters-net/
│
├── frontend/
│   ├── index.html
│   ├── css/
│   │   └── styles.css
│   ├── js/
│   │   └── main.js
│   └── img/
│       └── don/
│
├── backend/
│   ├── src/
│   │   ├── app.js
│   │   ├── server.js
│   │   ├── routes/
│   │   │   ├── auth.js
│   │   │   ├── gallery.js
│   │   │   ├── contact.js
│   │   │   ├── testimonials.js
│   │   │   └── metrics.js
│   │   ├── controllers/
│   │   ├── models/
│   │   ├── middleware/
│   │   │   └── auth.js
│   │   ├── services/
│   │   └── utils/
│   ├── .env.example
│   ├── package.json
│   └── package-lock.json

🔧 Core Backend Modules

🔐 Authentication Module

JWT access and refresh token system
Secure password hashing with bcrypt
Token rotation and expiry management
Role-based access control (Admin/User)

🖼️ Gallery Module

Image upload via Multer middleware
Cloud storage integration with Cloudinary
Admin moderation and approval system
Public gallery API for frontend display

💬 Contact Module

Form submissions stored in MongoDB
Automated email notifications via Gmail SMTP
Input validation and sanitization
Admin dashboard for message management

⭐ Testimonials Module

User-submitted feedback collection
Admin approval workflow
Frontend carousel integration with Swiper.js
Rating and comment system

📊 Metrics & Analytics

Real-time donation impact statistics
Daily auto-updated counters
Campaign performance tracking
Public API for frontend display

📁 Campaign Management

Create and manage donation campaigns
Category-based organization
Active/inactive status tracking
API endpoints for campaign data

🚀 Getting Started

Prerequisites

Node.js (v14 or higher)
MongoDB Atlas account
Cloudinary account
Gmail account with App Password

Installation

1. Clone the Repository

git clone https://github.com/TanushreeSarkar/uplifters-net.git
cd uplifters-net

2. Backend Setup

cd backend
npm install
cp .env.example .env

3. Configure Environment Variables

Edit the .env file with your credentials:

PORT=5000
MONGODB_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret
JWT_REFRESH_SECRET=your_refresh_secret
CLOUDINARY_CLOUD_NAME=your_cloudinary_name
CLOUDINARY_API_KEY=your_cloudinary_key
CLOUDINARY_API_SECRET=your_cloudinary_secret
EMAIL_USER=your_gmail@gmail.com
EMAIL_PASS=your_gmail_app_password
FRONTEND_URL=http://localhost:3000

4. Start Development Server

npm run dev

Backend runs on http://localhost:5000

5. Frontend Setup

Simply open frontend/index.html in a browser or use a live server:

cd frontend
npx live-server

🌐 Deployment

Backend Deployment on Render

Create a new Web Service on Render
Connect your GitHub repository
Configure build settings:
- Build Command: npm install
- Start Command: npm start
Add environment variables from .env
Deploy and note your backend URL
Test health endpoint: https://your-app.onrender.com/health

Frontend Deployment on Vercel

Import project on Vercel
Update API base URL in frontend/index.html:

<body data-api-base="https://your-backend.onrender.com/api">

Deploy and your site is live!

🌍 API Endpoints

Authentication

Method	Endpoint	Description	Auth Required
POST	`/api/auth/register`	Register new user	No
POST	`/api/auth/login`	Login and get JWT	No
POST	`/api/auth/refresh`	Refresh access token	Yes
POST	`/api/auth/logout`	Logout user	Yes

Gallery

Method	Endpoint	Description	Auth Required
GET	`/api/gallery`	Fetch all gallery items	No
POST	`/api/gallery`	Upload image	Admin
DELETE	`/api/gallery/:id`	Delete image	Admin

Contact

Method	Endpoint	Description	Auth Required
POST	`/api/contact`	Submit contact form	No
GET	`/api/contact`	Get all messages	Admin

Testimonials

Method	Endpoint	Description	Auth Required
GET	`/api/testimonials`	Get approved testimonials	No
POST	`/api/testimonials`	Submit testimonial	Yes
PATCH	`/api/testimonials/:id`	Approve testimonial	Admin

Metrics

Method	Endpoint	Description	Auth Required
GET	`/api/metrics`	Get platform metrics	No
PUT	`/api/metrics`	Update metrics	Admin

Campaigns

Method	Endpoint	Description	Auth Required
GET	`/api/campaigns`	Get all campaigns	No
POST	`/api/campaigns`	Create campaign	Admin
PATCH	`/api/campaigns/:id`	Update campaign	Admin

Testing: Use Postman or Thunder Client for API testing.

🧪 Testing

# Run tests
npm test

# Run tests with coverage
npm run test:coverage

# Run linter
npm run lint

🤝 Contributing

We love contributions! Here's how you can help:

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

Contribution Guidelines

Write clean, readable code
Follow existing code style
Add comments for complex logic
Test your changes thoroughly
Update documentation as needed

🐛 Known Issues

Gallery images may load slowly on first visit (caching improves subsequent loads)
Email notifications may be delayed during high traffic

📝 Future Enhancements

👨‍💻 Developer

Tanushree Sarkar
Full-Stack Developer & Creator of Uplifters.Net

📧 Email: 2k22.csaiml.2212256@gmail.com
🔗 GitHub: @TanushreeSarkar
🔗 LinkedIn: Tanushree Sarkar

📄 License

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

Free to use for personal and commercial projects.

🙏 Acknowledgments

Bootstrap for responsive design components
Cloudinary for seamless image management
MongoDB Atlas for reliable database hosting
Render & Vercel for deployment infrastructure
All contributors and supporters of this project

💖 Final Thoughts

"Technology becomes truly powerful when it uplifts humanity."

This platform was built with empathy, purpose, and passion to create real positive impact in the world.

Every donation, every testimonial, and every connection made through this platform represents hope and humanity coming together.

Thank you for being part of this journey. 🌟

Made with ❤️ by Tanushree Sarkar

⭐ Star this repo if you found it helpful!

Name		Name	Last commit message	Last commit date
Latest commit History 26 Commits
.github/workflows		.github/workflows
css		css
img		img
js		js
node_modules		node_modules
src		src
.gitattributes		.gitattributes
.gitignore		.gitignore
404.html		404.html
500.html		500.html
README.md		README.md
about.html		about.html
contact.html		contact.html
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json

TanushreeSarkar/uplifters-net

Folders and files

Latest commit

History

Repository files navigation