/SparkServe

Primary LanguageJavaScript

This project was built as a part of nwHacks 2024! : https://nwhacks-2024.devpost.com/

Inspiration

Researching and applying for local volunteering and community service gigs can be a daunting task, especially for many high school students/adults looking for volunteer hours or wanting to help out in their free time. Finding opportunities and navigating various company websites can become stressful and time-consuming, which dissuades many from contributing to their local community. SparkServe intends to streamline the volunteering process, from matching users to jobs to aiding in final communications and confirmation of commitment. Throughout the aftermath of the COVID-19 pandemic, up to 65% of Canadian companies were impacted by a shortage of in-person volunteering resources. We aim to encourage all people to re-engage with their community, promote social connections, and make social work easily accessible and interactive.

What it does

SparkServe is a user-friendly platform, that makes local volunteer opportunities accessible, inclusive, and engaging. Users can effortlessly swipe right if interested, and match with prospective candidates or employers to create a unique "spark" that initiates communication, fostering connections and community engagement.

How we built it

We initiated SparkServe with low-fidelity sketches, refining our vision through Figma to craft a usable prototype. Our design strategy incorporates a high-contrast palette, ensuring visual clarity, and prioritizes intuitive and familiar user design flows for a seamless and engaging experience. We employed the React framework to bring our designs to life, utilizing JavaScript, HTML/CSS, and numerous libraries to match our designs, build client-side routing, and maximize performance.

Challenges we ran into

Our main challenge revolved around seamlessly connecting our Figma design to our application's front end. Overcoming this hurdle required innovative problem-solving and collaboration.

Accomplishments that we're proud of

Our achievements include the successful design and implementation of two perspectives (job candidate and hiring manager), as well as the creation of interactive onboarding and next-step screens including accepting "sparks", and communication with prospective employers.

What we learned

Throughout the development process, our team gained valuable insights into React development, achieved a harmonious balance between playful and professional UX/UI design, and ensured that the platform was accessible and appealing to a large target audience.

What's next for SparkServe

In the future, SparkServe aims to enhance user engagement through the implementation of gamification elements, such as badges and leaderboards, further motivating individuals to volunteer and contribute to their communities.

Figma

View the final design here!

Figma