Volunteen

Inspire change. Empower others. Make a difference.

Comment

Inspiration

When I first started looking for volunteering opportunities, I realized there wasn't a single centralized website that made it easy for teenagers like me to find meaningful events. Most platforms that do exist only sort by location or type—and even then, the filtering options are limited. The layouts are often cluttered and confusing to navigate, making the entire process frustrating and time-consuming.

I also noticed a common trend among my peers: many of them only volunteer to meet the high school graduation requirement. They often end up doing half-hearted activities they don’t truly enjoy, just because those were the most accessible. I didn’t want volunteering to feel like a chore—I wanted to change that.

That’s what inspired me to create Volunteen—a website that not only simplifies finding volunteering opportunities, but also helps students discover areas they’re passionate about and feel excited to contribute to.

What It Does

Volunteen is a platform designed to help teenagers easily find, join, and create meaningful volunteering opportunities. Here's what users can do:

  • Discover Events: Browse events using filters like type, date, location, time, distance, and upcoming.
  • Smart Recommendations: Get personalized event suggestions based on past activity.
  • AI-Powered Chatbot: Use the chatbot to find and sign up for events, or create new ones.
  • Event Creation & Management: Users can host their own events with detailed forms and uploaded posters.
  • Community Board: Share updates, encouragement, and messages with others.
  • Volunteer Hour Tracking: View upcoming and completed activities and log hours.
  • Gamification: Earn badges, climb leaderboards, and complete monthly challenges.
  • Fundraising Generator: Use AI to generate creative fundraising event ideas.
  • Email Notifications: Receive automatic confirmation and reminder emails after joining events.

What I Learned

Through building Volunteen, I gained valuable experience not just in web development, but in creating a real-world product that solves a problem I care deeply about. I expanded my skills in designing clean, responsive user interfaces using HTML, CSS, and JavaScript, while also learning how to work with real-time data and authentication through Firebase and integrate a sign-in through Google feature.

One of the most valuable parts of the process was learning how to bring multiple tools and services together into a seamless experience. I integrated features like Google Maps and Geocoding to handle location-based filtering and mapping. Since the Maps API didn’t provide distance values directly, I had to calculate proximity using latitude and longitude coordinates from the Geocoding API. This helped me build a custom sorting system based on distance, which allowed users to find nearby opportunities more efficiently.

I also used OpenAI to create an interactive chatbot that could respond to user input and assist with actions like signing up for events or creating new ones. To make this possible, I connected the chatbot to the Firebase database so it could access, write, and update real event data in real time. Because of this integration, the chatbot is also able to tell users what events are currently available based on live data. Integrating the OpenAI API taught me how to ensure the chatbot could interpret user input accurately and translate it into meaningful database actions. To protect sensitive information, I made sure to securely store my API keys and keep them hidden from the public side of the app.

In addition, I set up automated event reminders and confirmation emails using Oracle Email Delivery. I learned how to configure it to reliably send out notifications triggered by specific user actions like joining an event.

I also learned a lot about designing with the user in mind—making sure every feature was intuitive and served a clear purpose. Whether it was refining the chatbot experience or improving filters and search logic, I found myself constantly thinking about how to make the platform not just functional, but enjoyable to use.

How I Built It

For the front end, I used HTML, CSS, and JavaScript to create a responsive and interactive user interface. The homepage features an animated menu, trivia, and a volunteer-themed Wordle to engage users and make the experience more fun and welcoming for teenagers.

I used Firebase for authentication, database management, and file storage. Users can sign in using email/password or Google sign-in, and once authenticated, they gain access to key features like joining events, creating opportunities, tracking volunteer hours, and interacting with the community. I used Firebase Firestore to store and retrieve user and event data in real time, and Firebase Storage to host uploaded files like event posters.

To help users discover opportunities, I implemented a comprehensive filtering system. Users can sort events by type, location, date, time, distance, upcoming, and newest. I used the Google Maps API to display a map view of opportunities and the Geocoding API to convert event addresses into latitude and longitude coordinates. Then, I calculated the distance between the user and each event to enable location-based sorting.

I used an Oracle server to handle secure server-side logic, including custom API endpoints, request handling, and sensitive operations. This server manages tasks such as validating form submissions, securely interacting with third-party APIs, and controlling access to protected routes.

One of the most technically rewarding features was the AI-powered chatbot, which I built using OpenAI’s API. The chatbot helps users discover events, sign up, and even create their own opportunities. Since OpenAI requires an API key, I made sure to hide the key securely in environment variables to protect it from exposure on the client side.

I also added automated email notifications and reminders using Oracle Email Delivery, ensuring that users receive confirmation emails and reminders after signing up for events.

Beyond basic functionality, I wanted to make Volunteen feel like a community. So I built a community board where users can post, like, and delete messages to share updates or encouragement. The Organize tab allows users to create their own events with full details, including age requirements, dress codes, documentation needs, and posters. These events are also added to their My Plans page, which shows a dashboard of both upcoming and past activities.

To encourage ongoing engagement, I developed a leaderboard, a badge system, and a challenge page with volunteering monthly challenges of varying difficulties and completion times. I also added a fundraising campaign generator powered by AI, which provides students with creative event ideas. Finally, the “For You” recommendations page uses previous activity data to show personalized events that match a user’s interests.

Challenges I Faced

One of the biggest technical challenges was calculating event distances. The Google Maps API gave me location data, but not distance values. I had to learn how to use latitude and longitude to calculate accurate distances and implement that into the filtering system.

Another challenge was building the AI chatbot to be more than just a helper—it needed to be able to register users, create events, and respond with real information. Debugging the chatbot and integrating it with our backend system took a lot of trial and error, but it became one of the most rewarding features.

I also faced difficulty implementing the event notification reminder system. I wanted users who signed up for events to receive timely reminders and confirmation emails. After researching several options, I ended up using Oracle Email Delivery to send automated notifications to users. Getting everything to work smoothly and making sure the emails were actually being sent out reliably wasn’t easy, but in the end, it really helped make the platform feel more helpful for users.

What’s Next for Volunteen

  • Mobile App Version: Build a mobile version so students can engage from anywhere.
  • Integration with School Portals: Allow users to submit volunteer hours directly to school systems.
  • Organization Accounts: Enable nonprofits to manage their own events and communicate with students.
  • Social Features: Let users follow friends, share experiences, and team up for challenges.
  • Advanced Analytics Dashboard: Visualize impact with data like total hours, causes supported, and badges earned.
  • Language Support: Add multilingual options to support a broader, more diverse audience.

Built With

Share this project:

Updates