SkillBridge

Title: SkillBridge : A Platform to Connect Volunteers with NGOs

Project Statement: This project aims to create a web-based platform where skilled
volunteers can connect with NGOs for short-term or long-term volunteer opportunities. The
application allows users to register as volunteers or NGOs, enabling them to post or apply for
skill-based opportunities.

Description:
SkillBridge is a web-based platform designed to bridge the gap between skilled volunteers
and non-governmental organizations (NGOs) seeking specific expertise. The platform serves
as a dynamic networking hub where volunteers can contribute their professional skills to
meaningful causes, while NGOs can easily find the right talent to support their missions.
The application provides two primary user roles: Volunteers and NGOs.
• Volunteers can create detailed profiles highlighting their skills, availability, and areas
of interest. They can browse through various volunteer opportunities, apply for
suitable roles, and track their ongoing engagements.
• NGOs can register on the platform, create organization profiles, and post
opportunities specifying the skills they require (e.g., graphic design, web
development, teaching, content writing, etc.). They can review volunteer applications,
select candidates, and manage collaborations efficiently.
The platform aims to streamline the process of finding and offering volunteer work by
leveraging technology for social impact. It promotes community engagement, skill-based
volunteering, and transparency in the volunteering ecosystem.
Purpose of the Project
The purpose of the SkillBridge project is to create an online platform that connects skilled
volunteers with NGOs that require their expertise. Many NGOs struggle to find qualified
individuals to help with specific tasks, while numerous people are willing to contribute their
skills but lack a proper channel to find suitable opportunities.
SkillBridge aims to solve this gap by providing a centralized, easy-to-use system where:
• Volunteers can showcase their skills and find meaningful opportunities to contribute.
• NGOs can post requirements for short-term or long-term projects and easily identify
suitable volunteers.
By facilitating this connection, the project promotes social responsibility, encourages
community engagement, and helps NGOs operate more efficiently through access to skilled
support.
Objectives of the Project
The main objectives of the SkillBridge project are:
1. To connect skilled volunteers with NGOs in need of specific expertise.
 2. To simplify the process of finding and managing volunteer opportunities through a
digital platform.
3. To enable NGOs to post and manage volunteer requirements efficiently.
4. To allow volunteers to create profiles, highlight their skills, and apply for suitable
opportunities.
5. To promote social engagement and encourage individuals to use their professional
skills for community benefit.
6. To provide a user-friendly interface and secure data management for both volunteers
and NGOs.
Scope of the Project
The scope of the SkillBridge project includes the design, development, and deployment of a
web application accessible to both NGOs and volunteers.
• The system will include user registration and authentication, profile management,
opportunity posting and searching, and communication features between NGOs
and volunteers.
• It will be accessible via web browsers, ensuring easy usability on different devices.
• The platform will initially focus on connecting local NGOs and volunteers but can
later be scaled for national or global use.
• The admin module will handle user verification, data management, and system
monitoring to maintain the platform’s integrity.

Getting Started
Prerequisites
Before setting up and running the application, ensure the following software and tools are
installed on your system:
• [Link] and npm
Download and install from the [Link] official website.
npm comes bundled with [Link].
• MongoDB
Install and set up MongoDB locally or use a cloud-hosted solution like MongoDB
Atlas.
• SMTP Service
Configure an SMTP service (e.g., Gmail SMTP) for sending OTPs and notifications.
• IDE
Use a development environment like Visual Studio Code for code editing and
debugging.
 • WebSocket
WebSocket is used to power the real-time messaging system between NGOs and
volunteers. This ensures that messages are delivered immediately, creating a smooth
and interactive communication experience.
Installation
Follow these steps to set up the project:
• Clone the Repository
[Link]
cd SkillBridge_Group2
• Install Dependencies
npm install
Running the Application
• Start the Backend
Navigate to the backend directory:
cd backend
Run the backend server (ensure the backend runs on a specific port, e.g., 5173):
npm install
npm run dev
• Start the Frontend
Navigate to the frontend directory:
cd frontend
Run the development server:
npm install
npm run dev
Environment Setup for Right Resource Fit
To run the project seamlessly, you need to set up environment variables for both the backend
and frontend. Create a .env file in the root directory of the backend project and add the
required configurations as shown below.
Required Environment Variables
Example .env Configuration
Here’s an example .env file for your project:
MongoDB URLs:
MONGODB_URI=mongodb://localhost:27017/skillbridge (for local MongoDB)
For MongoDB Atlas:
MONGODB_URI=mongodb+srv://username:password@[Link]/skillbridge?ret
ryWrites=true&w=majority
JWT Secret:
JWT_SECRET=supersecretkey123
SMTP Configuration:
CLIENT_URL=[Link]
SMTP_HOST=[Link]
SMTP_PORT=587
SMTP_USER=your_email@[Link]
SMTP_PASS=your_app_password
Steps to Set Up the Environment
• Create a .env file in the root of your backend directory.
• Copy the example configuration above and paste it into the .env file.
• Replace placeholder values (like your-email@[Link] and your-email-
password) with your actual configuration.
Additional Notes
• For cloud-hosted MongoDB (e.g., MongoDB Atlas), replace
mongodb://localhost:27017/ with your cluster's connection string.
• If you’re using a third-party email service, adjust the SMTP_HOST, SMTP_PORT,
SMTP_USER, and SMTP_PASS accordingly.
• Keep the .env file secure and do not commit it to version control. Add .env to your
.gitignore file.
Folder Structure
A well-organized folder structure helps maintain clarity and efficiency in development.
Below is a suggested folder structure for SkillBridge project, leveraging the MERN stack.
SkillBridge_Group2/
├── Backend/
│ ├── models/ # MongoDB models
│ ├── src/
│ │ └── utils/ # Utility functions
│ ├── [Link] # Main server file
│ ├── [Link]
│ └── ...
├── Frontend/
│ ├── public/ # Static assets
│ ├── src/
│ │ ├── components/ # React components
│ │ ├── contexts/ # React contexts
│ │ ├── pages/ # Page components
│ │ ├── services/ # API services
│ │ └── ...
│ ├── [Link]
│ ├── [Link]
│ └── ...
└── [Link]

Key Features
Profile Creation
Volunteers and NGOs can sign up and create detailed profiles showcasing skills and needs.
Opportunity Management
Intuitive tools for NGOs to create, edit, and manage volunteer positions. Each opportunity
includes detailed categorization by required skills, location preferences, time commitment,
and project duration.
Browse & Apply
Volunteers can browse, filter, and apply for opportunities matching their expertise.
Direct Communication
Matched users interact via a built-in chat system for seamless coordination.

Project Components
Here’s a list of key components in the SkillBridge project, along with brief descriptions of
their functionality:
Homepage Component
Serves as the landing page, showcasing platform features and providing navigation options.
Login Component:
Manages the user login process, handling inputs for email and password.
 Login Form
• Email / Username field (input)
• Password field (input, masked)
• Submit / Login button

 Forgot Password / OTP generation

• OTP to “Forgot your password?”
• Flow to request password reset (via email)

 Sign Up / Register / Create Account

• Optionally differentiate user roles (volunteer, NGO etc.)
 Error / Validation Messages
• “Invalid credentials” message
• Field-level validation (e.g. “Email is invalid”)
• Loading indicator (spinner) while login is submitting
 Security Features
• “Show password” toggle (eye icon)
 Redirect / Post-login Navigation
• After login, redirect to dashboard or intended page
• Store original requested page (for redirection after login)

Registration Component
Provides signup functionality for both volunteers and NGOs
• Form Validation
o Real-time validation (email format, required fields)
• Password Visibility Toggle
o “Show / Hide Password” eye icon
• Submit Button
o Disabled until all required fields are valid
• Redirect Link
o “Already have an account? Login”
Volunteer Registration
NGO Registration

Reset Password & OTP Component

Implements the functionality for password recovery using an OTP sent via email.
“Forgot Password” Page
• Email Input Field – user enters their registered email.
• Submit Button – triggers backend call to send reset link or OTP.
• Validation
o Check if field is not empty and email format is valid.
o Disable button while loading.
• Feedback UI
o Success message: “Password reset link sent to your email.”
o Error message: “Email not found.”
“Reset Password” Page
This opens via email link or after successful OTP verification.
• Form Fields
New Password
Confirm New Password
“Show / Hide Password” toggle
• UX Features
Inline validation (“Passwords must match.”)
“Reset Password” button → calls backend API
Redirects to login page after success with toast: “Password reset successful!”
About Component:
The About Component introduces SkillBridge’s vision, mission, and values, explains what
the platform does, and builds trust and credibility among users(Volunteers and NGOs).
Dashboard Component:
Provides a personalized dashboard for users based on their role.
Key Features:

• Welcome message (“Welcome back, Mahesh ”)

• User profile picture + dropdown menu (Profile, Settings, Logout)

• Notifications bell icon (with unread count)

• Quick search bar for Opportunities, applications etc
Sidebar Navigation Panel
Purpose:
Provide quick access to all key modules.
Typical Sidebar Menu Items:

Dashboard (Home)

Applications

Mentorship

Active Volunteers

Total Opportunities
Volunteer Dashboard
NGO Dashboard

Opportunity Component
List of Opportunities
• Displays all active, upcoming, and closed opportunities.
• Supports pagination and filtering by category, location, or date.

Advanced Search & Filters

• Search by keywords, organization, or skills required.
• Filter by opportunity type (internship, volunteering, mentorship, etc.).

Status Overview Cards

• Quick stats on:

Active Opportunities

Upcoming Opportunities

Closed Opportunities

Volunteer Engagement Tracker

• Shows the number of volunteers applied or assigned to each opportunity.
• Displays participation trends.

Calendar Integration
• Visual calendar view for start/end dates of all opportunities.
• Helps users plan participation and track deadlines.

Add / Edit / Delete Opportunities (Admin feature)

• Admins can create or update opportunity listings with validation.
 Notifications & Updates
• Alerts for newly added opportunities or approaching deadlines.

Responsive & Interactive UI

• Built with React + Tailwind for a clean, user-friendly experience across devices.
Volunteer Opportunity page

NGO Opportunity page

Message Component:
Key Features (WebSocket Enabled)
1. Real-Time Messaging
o Instant message delivery using WebSockets (e.g., [Link]).
o Messages appear immediately without refreshing the page.
2. One-to-One & Group Chats
o Supports direct messages between users.
o Allows group or community discussion channels (e.g., “Mentorship Group”).
3. Online Status Indicator
o Displays whether a user is online or offline in real-time.
o Updates dynamically when users connect or disconnect.
4. Typing Indicators
o Shows “User is typing…” feedback when the other person is composing a
message.
5. Message Delivery Status
o Message states like Sent, Delivered, and Seen (with ticks or badges).
o Ensures reliable communication acknowledgment.
6. Chat History Management
o Loads previous conversations from the database (MongoDB or Firebase).
o Auto-scrolls to the latest message upon new arrival.
7. Real-Time Notifications
o Push alerts for new messages, even when the chat window is not active.
 8. Secure Communication
o Uses authentication tokens (JWT) to connect only verified users to the
WebSocket server.
o Ensures encrypted data flow and user privacy.
Volunteer Message page

NGO Message page

Challenges Faced During the Project

1. Role-Based Functionality Complexity
o Designing dashboards and features for multiple user roles (volunteers, NGOs)
required careful planning to ensure correct access control and personalized
views.
2. Real-Time Communication
o Implementing WebSocket-based messaging for instant notifications and chat
posed challenges in maintaining scalability, ensuring message delivery, and
handling disconnections.
3. Secure Authentication & Data Privacy
o Ensuring secure login, OTP verification, and safe storage of sensitive user data
required encryption, token management, and compliance with security best
practices.
 4. Dynamic Data Management
o Handling large datasets for volunteers, NGOs, and opportunities, and ensuring
real-time updates in dashboards and notifications demanded optimized API
design and database management.
5. Responsive UI/UX
o Building a responsive, intuitive, and accessible interface for multiple devices
while maintaining consistency across dashboards, forms, and components
required extra design and testing effort.
6. Integration of Multiple Functionalities
o Incorporating features like mentorship tracking and opportunity management
into a cohesive platform posed integration and synchronization challenges.

Impacts of the Project

1. Enhanced Volunteer-NGO Coordination
o Volunteers can easily discover, apply for, and track opportunities, while NGOs
can efficiently manage their registrations and postings.
2. Increased Engagement & Productivity
o Real-time communication, notifications, and role-based dashboards improve
user engagement, collaboration, and overall efficiency.
3. Centralized Opportunity Management
o Provides a single platform for all stakeholders to access opportunities, track
progress, and maintain records securely.
4. Empowerment of Community Initiatives
o By streamlining volunteer participation and NGO operations, the platform
strengthens community projects and social impact.
5. Data-Driven Insights
o Analytics and reporting features help NGOs and administrators make
informed decisions, monitor volunteer activity, and optimize program
effectiveness.
6. Scalable & Future-Ready Platform
o With modular design, AI integration for recommendations, and real-time
features, the platform can easily be extended to include more features and
handle more users.
Conclusion:
SkillBridge is a comprehensive web platform designed to connect volunteers with NGOs in a
seamless and efficient manner. The platform provides a centralized dashboard where
volunteers can explore, track, and apply for various opportunities, while NGOs can register,
post opportunities, and manage their volunteer engagement.
Key features such as role-based dashboards, real-time messaging via WebSockets,
mentorship tracking, opportunity management, and analytics make the platform highly
interactive, user-friendly, and responsive. With functionalities like OTP verification, secure
login, and personalized recommendations, SkillBridge ensures safe, transparent, and efficient
coordination between volunteers and NGOs.
Moreover, the platform promotes community engagement by empowering volunteers to
contribute their skills to meaningful projects and enabling NGOs to reach a wider, more
organized pool of participants. The data-driven insights and analytics help administrators and
organizations monitor progress, optimize resource allocation, and measure impact effectively.
Overall, SkillBridge not only streamlines volunteer and NGO interactions but also fosters a
culture of collaboration, learning, and social responsibility. By leveraging technology, the
platform strengthens networks, encourages active participation, and amplifies the positive
impact of community-driven initiatives, making it a valuable tool for both volunteers and
organizations alike.