KindForces a full-featured web application for managing volunteer needs and activities. Built with React, Express, MongoDB, and Firebase authentication, this platform allows organizations to post volunteer opportunities and users to participate as volunteers.
🔗 https://kindforces.netlify.app
The purpose of this project is to streamline the process of volunteer management by providing an easy-to-use platform for:
- Posting volunteer opportunities.
- Managing and tracking volunteer applications.
- Providing secure login/register system with role-based access.
- Enabling users to contribute to social welfare easily.
- Email/password-based login and registration.
- Google/GitHub OAuth login.
- Firebase Authentication.
- JWT integration for private routes.
- Navbar with conditional Login/Logout, Profile dropdown.
- Dynamic title for every route.
- Protected routes for adding, updating, and managing posts.
- 404 Not Found page.
- Loading spinners while fetching data.
- Eye-catching hero slider with 3 slides.
- “Volunteer Needs Now” section with top 6 urgent posts sorted by deadline.
- See all button to view full list of volunteer needs.
- 2 additional meaningful sections.
- Framer Motion animations.
- Form with fields like title, thumbnail, category, location, deadline, etc.
- Read-only organizer name and email.
- Toast notification on success.
- Shows full post details.
- “Be a Volunteer” button opens a modal/form.
- Auto-filled read-only fields from database.
- Logged-in user name/email auto-filled.
- Request button stores application and decreases needed volunteer count.
- Displays all posts in card layout.
- Includes search functionality (title-based).
Split into:
- Table format with update/delete buttons.
- Update through modal or page.
- Confirmation before delete.
- Table layout showing user requests.
- Cancel button with confirmation.
- Dynamic page title change.
- Spinner while loading data.
- Toast/alerts for all CRUD operations.
- Responsive design.
- Dark / Light theme toggle.
- Change Layout (Card ↔ Table) in volunteer post page.
- Prevent requests if needed volunteers count is 0.
| Package | Purpose |
|---|---|
react-router-dom |
Routing |
firebase |
Authentication (Email & Social Login) |
jsonwebtoken |
JWT token creation and verification |
sweetalert2 |
Alert modals |
react-datepicker |
For selecting deadline dates |
framer-motion |
Animations |
dotenv |
Managing environment variables |
express |
Backend framework |
mongoose |
MongoDB ODM |
cors |
Cross-origin requests |
tailwindcss |
Styling |
daisyui |
UI Components (Theme switching, modals etc.) |