Volunteer Connect

Inspiration

Finding local volunteer opportunities can be surprisingly difficult. Existing platforms often focus on a single cause or require lengthy sign‑ups. We wanted to build a simple tool that anyone can open in their browser and immediately discover ways to help their community.

What it does

Volunteer Connect lists a curated set of events across a variety of causes — environment, education, health and more. You can filter events by keywords, learn about their time and location, and add them to a personal list stored in your browser. No registration or external services are required.

How we built it

We built a responsive, accessible web app using vanilla HTML, CSS and JavaScript. Event data is defined locally in a JSON‑like array and rendered dynamically. When you select an event, its ID is saved to localStorage, allowing your selections to persist even if you refresh the page or close the browser.

Challenges we ran into

Designing a layout that is both clean and highly legible took experimentation. We wanted high contrast and responsive behaviour without relying on external frameworks. Implementing localStorage for the first time was also a learning curve, especially ensuring that lists update correctly when items are added or removed.

Accomplishments that we're proud of

• A polished user interface that works on desktop and mobile.
• A simple yet effective filtering system that lets users quickly find relevant events.
• Persistent storage of selected events without requiring back‑end services.

What we learned

We deepened our understanding of modern CSS layouts (grid and flexbox), event handling in JavaScript, and persisting data client‑side using the Web Storage API.

What's next for Volunteer Connect

In future iterations we hope to:

• Integrate with real event APIs to provide live opportunities.
• Add user accounts so people can sync their lists across devices.
• Show event locations on an interactive map.
• Provide accessibility enhancements such as keyboard navigation and screen‑reader optimisations.

Built With

• css
• html
• javascript
• storage
• web